Kendoui之grid保存为Excel

在制作报表时常会遇到的需求是报表的导出。将报表导出为一个Excel格式更便于浏览、维护及打印。同时Grid也提供了此功能

 var grid = $("#grid").data("kendoGrid");
    grid.saveAsExcel();

只需要这样两行简单的代码就能将grid中的数据导出
** 但是... **
有时候导出的数据和我们想象的不太一样！！！

• 导出失败，点击触发导出操作的按钮时无反应，此时打开浏览器控制台发现报错：

可以看出grid导出使用了jsZip库，我们需要将这个库导入;
提供一个在线可用的js库：

• 导出的表格名称默认为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
来源：
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。