在制作报表时常会遇到的需求是报表的导出。将报表导出为一个Excel格式更便于浏览、维护及打印。同时Grid也提供了此功能
var grid = $("#grid").data("kendoGrid");
grid.saveAsExcel();
只需要这样两行简单的代码就能将grid中的数据导出
** 但是... **
有时候导出的数据和我们想象的不太一样！！！
- 导出失败，点击触发导出操作的按钮时无反应，此时打开浏览器控制台发现报错：
可以看出grid导出使用了jsZip库，我们需要将这个库导入;
提供一个在线可用的js库：
<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.js"></script>
- 导出的表格名称默认为grid.xlsx，每次都需要修改好麻烦，我们需要的是当前打开的表格的名称xxx.xlsx
此时只需要我们给grid添加一个属性即可：
方法1：
excelExport: function(e) {
e.workbook.fileName = "xxx.xlsx";
}
方法2：
excel: {
fileName: "xxx.xlsx"
},
- 导出成功，看一下导出的Excel,艾玛!,表中的数据怎么和我想象的不太一样，有的grid中的列，我在对应的列中配置了template函数，修改了页面上显示的数据，即grid._data中的数据和显示在页面上的数据不一致，此时在Excel中表现的是grid._data中的值，而我的需求是要打印出页面上显示的数据（这符合大部分需求，因为保存在数据库中的值，出于对可维护性，降低数据库冗余等问题考虑，往往和需要显示的值是不同的），那么此时我们就要对grid._data进行处理了，通过一系列逻辑判断来改变修改里面的值，从而得到打印的效果
方法1：
//在每次调用saveAsGrid前会先执行这里面的函数
excelExport: function(e) {
console.log(e.data);//打印e.data发现这里面的数据就是最后在Excel中输出的值
/*
* 处理e.data即可
* 将对数据的处理逻辑放在这里！！！！！！！！！！！！！
*/
}
方法2：
//在调用saveAsExcel()前对grid._data进行处理
var grid = $("#grid").data("kendoGrid");
console.log(grid._data);//打印grid._data发现这里面的数据就是打印出来的数据；
/*
*因为grid中显示的数据也是grid._data,所以直接修改grid._data会导致显示的数据也发生变化
*所以需要先将grid复制一份
*/
var excel={};
$.extend(excel,grid);//此时excel就是grid的副本，拥有和grid一样的属性和函数,对grid的操作可以转移到excel上来进行
$.each(excel._data,function (i,item) {//逐行处理数据
//将对数据的处理逻辑放在这里！！！！！！！！！！！！！
})
excel.saveAsExcel();
- 做完以后，发现有需求变了，要求导出grid中所有的数据到Excel中，打开自己导出的Excel发现现在导出的是grid做完分页以后的数据，此时需要对grid的属性进行修改
excel:{
allPages:true//是否导出所有页中的数据
},
导出所有数据需要处理列数据，方法如下：
transport: {
read: function (options) {
remoting.json({
url: url,
type: 'get'
}, function (error, result) {
if (!error) {
// 将对数据的处理逻辑放在这里！！！！！！！！！！！！！
options.success(result);
} else {
options.error(error);
}
});
}
}
kendo官方文档并没有直接给出关于导出Excel功能对浏览器的支持情况，但是为了保险起见，请尽量使用IE10+以及Firefox4+以及其他现代浏览器
转载链接：https://www.jianshu.com/p/fbcaa51d9c0c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网友评论