自20世纪80年代以来，Excel电子表格一直存在。拥有超过3000万用户，大多数人都熟悉Excel电子表格体验。许多企业开始使用Excel电子表格进行预算和计划，因为他们的业务非常简单。首先，可能会有少量用户参与此过程，您可能无法解释和组织大量数据。随着组织的发展，您可能会发现很难依赖Excel的功能。它缺乏结构，防止错误和安全。

因此，电子表格组件和网格控件，尤其是纯前端无依赖的电子表格控件变得越来越受企业用户的青睐。

电子表格组件的好处

电子表格组件可以提供更高的安全性，数据整合，改进的数据可视化，战略性能测量（SPM），复杂的统计分析等等。多年来，Excel兼容性一直是Spread .NET和JavaScript组件最重要的特性之一。

我们的JavaScript组件SpreadJS提供了一个熟悉的Excel电子表格界面。您可以导入和导出Excel文件，甚至可以使用JavaScript构建性能和业务仪表板 - 而不依赖于Excel。

通过新添加的Angular 6支持，本文演示了如何在Angular环境中使用SpreadJS导入和导出Excel电子表格。

首先，在您的应用中安装SpreadJS组件。

由于我们将使用SpreadJS的Excel导入和导出功能，因此我们需要ExcelIO组件。您可以使用npm进行安装。

如何在Angular中导入和导出Excel电子表格

SpreadJS可以添加到html页面中：

    <gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="workbookInit($event)"></gc-spread-sheets>

实例化SpreadJS组件并在app.component.ts文件中创建ExcelIO类的对象，代码如下：

    @Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']})export class AppComponent {spreadBackColor = 'aliceblue';hostStyle = {width: '95vw',height: '80vh'};private spread: GC.Spread.Sheets.Workbook;private excelIO;constructor() {this.excelIO = new Excel.IO();}workbookInit(args) {const self = this;self.spread = args.spread;const sheet = self.spread.getActiveSheet();sheet.getCell(0, 0).text('Test Excel').foreColor('blue');sheet.getCell(1, 0).text('Test Excel').foreColor('blue');sheet.getCell(2, 0).text('Test Excel').foreColor('blue');sheet.getCell(3, 0).text('Test Excel').foreColor('blue');sheet.getCell(0, 1).text('Test Excel').foreColor('blue');sheet.getCell(1, 1).text('Test Excel').foreColor('blue');sheet.getCell(2, 1).text('Test Excel').foreColor('blue');sheet.getCell(3, 1).text('Test Excel').foreColor('blue');sheet.getCell(0, 2).text('Test Excel').foreColor('blue');sheet.getCell(1, 2).text('Test Excel').foreColor('blue');sheet.getCell(2, 2).text('Test Excel').foreColor('blue');sheet.getCell(3, 2).text('Test Excel').foreColor('blue');sheet.getCell(0, 3).text('Test Excel').foreColor('blue');sheet.getCell(1, 3).text('Test Excel').foreColor('blue');sheet.getCell(2, 3).text('Test Excel').foreColor('blue');sheet.getCell(3, 3).text('Test Excel').foreColor('blue');}

对于导入，我们将创建一个接受xlsx文件的输入元素。我们在app.component.html中添加以下代码：

    <div class='loadExcelInput'><p>Open Excel File</p><input type="file" name="files[]" multiple id="jsonFile" accept=".xlsx" (change)="onFileChange($event)" /></div>

ExcelIO对象可以打开所选文件并在json中给出结果。SpreadJS可以直接理解这个JSON数据。因此，我们将在onFileChange（）函数中为change事件编写导入代码，如下所示：

    onFileChange(args) {const self = this, file = args.srcElement && args.srcElement.files && args.srcElement.files[0];if (self.spread && file) {self.excelIO.open(file, (json) => {self.spread.fromJSON(json, {});setTimeout(() => {alert('load successfully');}, 0);}, (error) => {alert('load fail');});}}

同样，让我们​​添加一个处理导出功能的按钮。要添加导出按钮，我们可以使用：

    <div class='exportExcel'><p>Save Excel File</p><button (click)="onClickMe($event)">Save Excel!</button></div>

我们需要处理此按钮的click事件并在那里编写代码。SpreadJS将数据保存为JSON，ExcelIO可以使用JSON将其保存为BLOB。稍后，此blob数据需要使用另一个组件（文件保护程序）按照给定格式进行保存。

    onClickMe(args) {const self = this;const filename = 'exportExcel.xlsx';const json = JSON.stringify(self.spread.toJSON());self.excelIO.save(json, function (blob) {saveAs(blob, filename);}, function (e) {console.log(e);});}

请注意，我使用了文件保护程序组件来实现导出功能。要在项目中包含文件文件保护程序，请按照以下步骤操作：

    npm install file-saver -save

将此第三方库添加到'.angular.json'

    "scripts": ["./node_modules/file-saver/FileSaver.js"]**

导入组件

    import {saveAs} from 'file-saver';

下载上文实例请点击此处

---

本文是由葡萄城技术开发团队发布，转载请注明出处：葡萄城官网

了解全面支持Angular、React 和 Vue 的纯前端控件集，请前往 WijmoJS，快速构建轻量、零依赖的高性能纯前端应用

了解可嵌入您系统的在线 Excel，请前往 SpreadJS纯前端表格控件