Wijmo5 FlexGrid教程（19）- 用Angular2在客户端导入导出Excel

可以使用xlsx.js库来完成导入导出。仅仅使用JavaScript或是TypeScript（不是服务器端代码）实现Excel文件的导入导出。

本文就来介绍使用xlsx.js库提供基本Excel导入导出的能力。库使用jszip.js库来读取Excel文件。

为了给Wijmo flexgrid添加客户端的导入导出功能，需要执行以下步骤：

1.在script->definition文件夹下添加grid.xlsx.d.ts 和wijmo.xlsx.d.ts

2.在script->vendor文件夹下添加wijmo.xlsx.min.js 和wijmo.grid.xlsx.js

3.在HTML页面，添加引用

引用库

准备好HTML页面，在default.html的head添加如下代码：

// Wijmo excel libraries
<script src="scripts/vendor/wijmo.xlsx.js" type="text/javascript"></script>
<script src="scripts/vendor/wijmo.grid.xlsx.js" type="text/javascript"></script>
<!-- JSZip library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>

以下是所有用到的方法：

wijmo.grid.xlsx.FlexGridXlsxConverter.load(instanceOfGrid, {options},”FileName.xlsx”)
wijmo.grid.xlsx.FlexGridXlsxConverter.save(instanceOfGrid, {options},”FileName.xlsx”))

load方法实现excel文件(xlsx）和计算flexgrid。

save方法将flexgrid的实例作为输入，转换数据和格式到Excel，返回包含内容的对象给Excel文件。

定义flexgrid然后进行数据绑定，代码参考：

<wj-flex-grid #flex [itemsSource]="data">
</wj-flex-grid>

使用2个按钮来完成导入导入操作。

代码参考：

<input type="file" class="form-control" id="importFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel.sheet.macroEnabled.12" />
<button class="btn btn-default" (click)="ImportExcel()">Import</button>
<button class="btn btn-default" (click)="ExportExcel()">Export</button>

在component类我们获取flexgrid实例，以便能够进行导入导出。

@ViewChild("flex") flex: wijmo.grid.FlexGrid;

然后再component类中添加导入导出方法：

// Load function
ImportExcel(event){
        let flex = this.flex;
        let fileEle = <HTMLInputElement>$("#importFile")[0];
        wijmo.grid.xlsx.FlexGridXlsxConverter.load(this.flex, fileEle.files[0], { includeColumnHeaders: true });
    }
// Save Funciton
    ExportExcel(event){
        let flex = this.flex;
        wijmo.grid.xlsx.FlexGridXlsxConverter.save(this.flex, { includeColumnHeaders: true, includeCellStyles: false }, "FlexGrid.xlsx");
    }

如果对自定义导入导出兴趣，可以参考API：here.

示例：

本文的源代码请下载：

Angular2FlexGridExcelImportExport - No_NodeModules.zip

请参考Wijmo5技术文章汇总

关于葡萄城

葡萄城是专业的软件开发技术和低代码平台提供商，以“赋能开发者”为使命，致力于通过表格控件、低代码和BI等各类软件开发工具和服务，一站式满足开发者需求，帮助企业提升开发效率并创新开发模式。葡萄城开发技术始于1980年，40余年来始终聚焦软件开发技术，有深厚的技术积累和丰富的产品线。是业界能够同时赋能软件开发和低代码开发的企业。凭借过硬的产品能力、活跃的用户社区和丰富的伙伴生态，与超过3000家合作伙伴紧密合作，产品广泛应用于信息和软件服务、制造、交通运输、建筑、金融、能源、教育、公共管理等支柱产业。