Kendoui之grid保存为Excel

2017-03-24 本文已影响2522人查无此人_chazz

Kendoui中的Grid组件是一个强大的报表生成组件，可以通过读取dataSource._data来快速生成一个便于浏览的报表，并提供一系列对报表的操作；
API:http://www.kendoui.io/kendo-ui/api/javascript/ui/grid.html

在制作报表时常会遇到的需求是报表的导出。将报表导出为一个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//是否导出所有页中的数据
},

以上。

分割线：
一、关于导出grid中行是收缩到一起的问题：由于grid-columns-field在定义宽度的时候存在两种方式：
1.页面自适应形式：width定义为百分数
2.固定长度形式：width定义为数字
使用第一中方法导出Excel时，Excel不能获得具体的宽度，所以默认无宽度，造成的直接结果就是导出的列全部收缩在一起。使用第二种方法导出Excel时，在field中定义的width就是导出的Excel的列的宽度。使用第二种长度定义形式能解决列收缩的问题；
二、关于导出中grid需要导出部分列的解决办法：
1.经过测试grid.saveAsExcel()导出的Excel只包含当前grid显示的列，隐藏的列不会被导出。
2.测试grid的Event中的excelExport事件是发生在saveAsExcel之后
所以可以通过两步可以解决控制grid只导出部分列的问题：

在执行grid.saveAsExcel()执行的前一步，将那些不需要导出到Excel的列使用grid.hideColumn()隐藏起来

给grid定义excelExport事件，这个事件主要处理的是将那些刚刚被隐藏起来的列使用grid.showColumn()显示出来

浏览器支持情况

kendo官方文档并没有直接给出关于导出Excel功能对浏览器的支持情况，但是为了保险起见，请尽量使用IE10+以及Firefox4+以及其他现代浏览器

Kendoui之grid保存为Excel

猜你喜欢

热点阅读