乐趣区

关于javascript:前端必读30如何在-Angular-中使用SpreadJS实现导入和导出-Excel-文件

jiezi

在之前的文章中，咱们为大家别离具体介绍了在 JavaScript、React 中应用 SpreadJS 导入和导出 Excel 文件的办法，作为带给宽广前端开发者的“三部曲”，本文咱们将为大家介绍该问题在 Angular 中的实现。
Excel 电子表格自 1980 年代以来始终为各行业所宽泛应用，至今已领有超过 3 亿用户，大多数人都相熟 Excel 电子表格体验。许多企业在其业务的各个环节中应用了 Excel 电子表格进行估算和布局。
通常状况下，刚开始时咱们的业务流程中的数据简略，也不波及简单的格局和数据关系。但随着组织的倒退，可能很难不开始依赖 Excel 的性能。

在你的应用程序中装置 SpreadJS 组件

残缺的 Demo 请点击此处下载：
https://gcdn.grapecity.com.cn…

应该留神的是，因为咱们应用的是 Angular CLI，咱们须要确保它与 NPM 一起装置：

npm install -g @angular/cli

因为咱们将应用 SpreadJS 的 Excel 导入和导出性能，因而咱们须要 ExcelIO 组件。你能够应用 NPM 装置它和根本的 SpreadJS 文件：

npm install @grapecity/spread-sheets @grapecity/spread-excelio @grapecity/spread-sheets-angular

实例化 SpreadJS 组件

SpreadJS 能够增加到 app.component.html 页面，如下所示：

<gc-spread-sheets [backColor]=”spreadBackColor”[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;
  private excelIO;

  constructor() {this.spread = new GC.Spread.Sheets.Workbook();
    this.excelIO = new Excel.IO();}

  workbookInit(args: any) {
    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 文件的输出元素

对于导入，咱们将创立一个承受 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 格局返回后果。这个 JSON 数据能够被 SpreadJS 间接了解，所以咱们将在 onFileChange() 函数中为 change 事件编写导入代码，如下所示：

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

增加导出代码

同样，让咱们增加一个按钮来解决导出性能。要增加导出按钮，咱们能够应用：

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

咱们还须要解决这个按钮的点击事件并在那里编写咱们的代码。SpreadJS 将数据保留为 JSON，ExcelIO 能够应用 JSON 将其保留为 BLOB。稍后，须要将此 blob 数据传递给文件爱护程序组件的 saveAs() 函数：

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

应该留神的是，咱们应用了文件爱护程序组件来实现导出性能。要在你的我的项目中蕴含文件爱护程序，请依照以下步骤操作：

  1. 运行“npm install file-saver –save”命令
  2. 运行“npm install @types/file-saver –save-dev”命令
  3. 将此第三方库增加到“.angular.json”
    “scripts”: [“./node_modules/file-saver/FileSaver.js”]**

  4. 导入组件 

    import {saveAs} from 'file-saver';

当初曾经能够在 Angular 中应用 SpreadJS 胜利导入和导出 Excel 文件了。

更多纯前端表格在线 demo 示例 :https://demo.grapecity.com.cn…
纯前端表格利用场景：https://www.grapecity.com.cn/…
挪动端示例（可扫码体验）：http://demo.grapecity.com.cn/…

退出移动版