如何在Angular中导入和导出Excel电子表格-白红宇

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

阅读量：6969 次

发布时间：2019-06-27

本文共 3674 字，大约阅读时间需要 12 分钟。

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

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

电子表格组件的好处

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

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

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

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

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

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

SpreadJS可以添加到html页面中：

实例化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中添加以下代码：


            
     Open Excel File

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');          });        }      }

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


            
     Save Excel File

我们需要处理此按钮的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 的纯前端控件集，请前往

了解可嵌入您系统的在线 Excel，请前往

你可能感兴趣的文章