layui重写table的导出功能
⽬录
以前的项⽬中前端⽤的，那会选layui就是那会觉得样式还挺好看的，⽽且基本上需要的组件都有，尤其是⾃带table的导出和打印功能，不过table的导出功能还有点不⾜之处，导出后的⽂件直接查看没什么问题，要编辑或者编辑完成后上传进⾏预览还是问题挺多的，所以就重写了⼀下table的导出功能，特来mark⼀下。
重写这个功能借着了⼀个layui社区的插件，叫l，插件基于 xlsx.js 和 FileSaver，做了⼀个简单的封装，应付⽇常的的导出还是够⽤了，这⾥来记录⼀下步骤，主要就是在在table.js的源码中修改导出⽅法的逻辑，然后重新打包编译，替换本地的table.js。
1.下载layui的源码
下载需要修改源码的版本
2.重写portFile⽅法
2.1 下载excel插件
将excel.js移⾄layui源码的D:\soft\sentsin-layui-v2.5.4\layui\src\lay\modules下
2.2 layui.js中引⼊excel插件
2.3修改layui\src\lay\modules下的table.js⽂件
原来的导出逻辑是直接⽤⽂件流的输出⽅式⽣成csv或者xls⽂件，这⾥就是简单的判断了⼀下导出的类型，如果是xls类型就直接⽣成数据调⽤portExcel⽅法，如果是csv就还是直接调⽤原来的导出逻辑。
1//表格导出
2  portFile = function(id, data, type){
3    data = data || table.clearCacheKey(table.cache[id]);
4    type = type || 'csv';
5
6    var config = fig[id] || {}
7    ,textType = ({
8      csv: 'text/csv'
9      ,xls: 'application/vnd.ms-excel'
10    })[type]
11    ,alink = ateElement("a");
12
13    if(device.ie) ('IE_NOT_SUPPORT_EXPORTS');
14
15    alink.href = 'data:'+ textType +';charset=utf-8,\ufeff'+ encodeURIComponent(function(){
16      var dataTitle = [], dataMain = [];
17      layui.each(data, function(i1, item1){
18        var vals = [];
19        if(typeof id === 'object'){ //ID直接为表头数据
19        if(typeof id === 'object'){ //ID直接为表头数据
20          layui.each(id, function(i, item){
21            i1 == 0 && dataTitle.push(item || '');
22          });
23          layui.each(table.clearCacheKey(item1), function(i2, item2){
24            vals.push('"'+ (item2 || '') +'"');
25          });
26        } else {
27          table.eachCols(id, function(i3, item3){
layui下载28            if(item3.field && pe == 'normal' && !item3.hide){
29              i1 == 0 && dataTitle.push(item3.title || '');
30              vals.push('"'+ parseTempData(item3, item1[item3.field], item1, 'text') + '"');
31            }
32          });
33        }
34        dataMain.push(vals.join(','))
35      });
36
37      return dataTitle.join(',') + '\r\n' + dataMain.join('\r\n');
38    }());
39    /此处为修改部分/
40 //重写excel导出功能，采⽤excel插件
41    if(type=='xls'){
42  var dataTitle = [], dataMain = [], dataTotal = [];
43  layui.each(data, function(i1, item1){
44        var vals = [];
45        if(typeof id === 'object'){ //如果 id 参数直接为表头数据
46          layui.each(id, function(i, item){
47            i1 == 0 && dataTitle.push(item || '');
48          });
49          layui.each(table.clearCacheKey(item1), function(i2, item2){
50
51      //vals.push('"'+ (item2 || '') +'"');
52            vals.push(item2 || '');
53          });
54        } else {
55          table.eachCols(id, function(i3, item3){
56            if(item3.field && pe == 'normal' && !item3.hide){
57              var content = item1[item3.field];
58              if(content === undefined || content === null) content = '';
59
60              i1 == 0 && dataTitle.push(item3.title || '');
61              vals.push(parseTempData(item3, content, item1, 'text'));
62            }
63          });
64        }
65        dataMain.push(vals.join(','));
66      });
67    var export_data=[];
68    export_data[0]=dataTitle;
69    layui.each(dataMain, function(i4, item4){
70    export_data.push(item4.split(','))
71      });
72  portExcel({
73    sheet1: export_data
74  }, '导出临时表.xlsx', 'xlsx')
75 }else{
76  alink.download = (config.title || 'table_'+ (config.index || '')) + '.' + type;
77        document.body.appendChild(alink);
78        alink.click();
79        veChild(alink);
80 }
81
82  };
3.重新打包编译
3.1安装依赖
cd到layui⽂件夹下，npm install命令安装依赖
3.2全局安装gulp
gulp：npm install -g gulp
在layui项⽬⽬录下运⾏的命令，参考gulpfile.js中的备注
发⾏版命令：gulp完整任务命令：gulp all，过滤layim：gulp all --open
我使⽤的是gulp all --open
编译完成后将dist⽂件夹下内容替换为重新编译后的内容，建议全部替换或者替换layui.all.js、layui.js、table.js，加⼊excel,js即可。编译过程中遇到的问题
2.安装依赖的时候PhantomJS⽆法成功引⼊，⽤下⾯的这个命令可以解决
npm install phantomjs-prebuilt@2.1.16 --ignore-scripts

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。