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

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

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

FlexGridExcelImportExport

为了给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");
    }