国家  china

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

 

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

示例:

本文的源代码请下载:

 

更多资源:

Wijmo中文官网:http://wijmo.gcpowertools.com.cn/

Wijmo5在线示例:http://wijmo.gcpowertools.com.cn/products/wijmo-5/

Wijmo5产品文档:http://wijmo.gcpowertools.com.cn/5/docs/

如果依然有问题,可以到我们的官方产品论坛发帖咨询:http://gcdn.gcpowertools.com.cn/showforum-140.html

请参考Wijmo5技术文章汇总
《wijmo5 flexgrid基础教程》系列文章
 

 

转载声明:
欢迎将本站文章进行转载、演绎或用于商业目的,转载时请注明以下信息
文章转自:葡萄城控件产品博客,http://blog.gcpowertools.com.cn
原文地址:http://blog.gcpowertools.com.cn/post/wijmoflexgrid_excel.aspx

不允许评论