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

自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纯前端表格控件