layui重写table的导出功能

目录

1.下载layui的源码

2.重写table.exportFile方法

2.1 下载excel插件

2.2 layui.js中引入excel插件

2.3修改layui\src\lay\modules下的table.js文件

3.重新打包编译

3.1安装依赖

3.2全局安装gulp

---

以前的项目中前端用的layui，那会选layui就是那会觉得样式还挺好看的，而且基本上需要的组件都有，尤其是自带table的导出和打印功能，不过table的导出功能还有点不足之处，导出后的文件直接查看没什么问题，要编辑或者编辑完成后上传进行预览还是问题挺多的，所以就重写了一下table的导出功能，特来mark一下。

重写这个功能借着了一个layui社区的插件，叫layui.excel,插件基于 xlsx.js 和 FileSaver，做了一个简单的封装，应付日常的的导出还是够用了，这里来记录一下步骤，主要就是在在table.js的源码中修改导出方法的逻辑，然后重新打包编译，替换本地的table.js。

1.下载layui的源码

下载需要修改源码的版本

github下载地址：https://github.com/sentsin/layui/

gitee下载地址：https://gitee.com/sentsin/layui

2.重写table.exportFile方法

2.1 下载excel插件

gitee下载地址：https://gitee.com/wangerzi/layui-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类型就直接生成数据调用excel.exportExcel方法，如果是csv就还是直接调用原来的导出逻辑。

//表格导出
  table.exportFile = function(id, data, type){
    data = data || table.clearCacheKey(table.cache[id]);
    type = type || 'csv';
    
    var config = thisTable.config[id] || {}
    ,textType = ({
      csv: 'text/csv'
      ,xls: 'application/vnd.ms-excel'
    })[type]
    ,alink = document.createElement("a");
    
    if(device.ie) return hint.error('IE_NOT_SUPPORT_EXPORTS');
    
    alink.href = 'data:'+ textType +';charset=utf-8,\ufeff'+ encodeURIComponent(function(){
      var dataTitle = [], dataMain = [];
      layui.each(data, function(i1, item1){
        var vals = [];
        if(typeof id === 'object'){ //ID直接为表头数据
          layui.each(id, function(i, item){
            i1 == 0 && dataTitle.push(item || '');
          });
          layui.each(table.clearCacheKey(item1), function(i2, item2){
            vals.push('"'+ (item2 || '') +'"');
          });
        } else {
          table.eachCols(id, function(i3, item3){
            if(item3.field && item3.type == 'normal' && !item3.hide){
              i1 == 0 && dataTitle.push(item3.title || '');
              vals.push('"'+ parseTempData(item3, item1[item3.field], item1, 'text') + '"');
            }
          });
        }
        dataMain.push(vals.join(','))
      });
      
      return dataTitle.join(',') + '\r\n' + dataMain.join('\r\n');
    }());
     /////////////////////////////此处为修改部分/////////////////////////////////
	//重写excel导出功能，采用excel插件
    if(type=='xls'){
		var dataTitle = [], dataMain = [], dataTotal = [];
		layui.each(data, function(i1, item1){
        var vals = [];
        if(typeof id === 'object'){ //如果 id 参数直接为表头数据
          layui.each(id, function(i, item){
            i1 == 0 && dataTitle.push(item || '');
          });
          layui.each(table.clearCacheKey(item1), function(i2, item2){
			  
			    //vals.push('"'+ (item2 || '') +'"');
            vals.push(item2 || '');
          });
        } else {
          table.eachCols(id, function(i3, item3){
            if(item3.field && item3.type == 'normal' && !item3.hide){
              var content = item1[item3.field];
              if(content === undefined || content === null) content = '';
              
              i1 == 0 && dataTitle.push(item3.title || '');
              vals.push(parseTempData(item3, content, item1, 'text'));			
            }
          });
        }		 
        dataMain.push(vals.join(','));
      });
	    var export_data=[];
	   export_data[0]=dataTitle;
	   layui.each(dataMain, function(i4, item4){
			  export_data.push(item4.split(','))
       });
		 excel.exportExcel({
		  sheet1: export_data
		}, '导出临时表.xlsx', 'xlsx')  
	}else{
		alink.download = (config.title || 'table_'+ (config.index || '')) + '.' + type; 
        document.body.appendChild(alink);
        alink.click();
        document.body.removeChild(alink); 
	}
  
  };

3.重新打包编译

3.1安装依赖

cd到layui文件夹下，npm install命令安装依赖

3.2全局安装gulp

gulp：npm install -g gulp

在layui项目目录下运行gulp的命令，参考gulpfile.js中的备注

发行版命令：gulp完整任务命令：gulp all，过滤layim：gulp all --open

我使用的是gulp all --open

编译完成后将dist文件夹下内容替换为重新编译后的内容，建议全部替换或者替换layui.all.js、layui.js、table.js,加入excel,js即可。

编译过程中遇到的问题

1.node.js版本与gulp版本不兼容，我这采用的node版本是10.16.3

2.安装依赖的时候PhantomJS无法成功引入，用下面的这个命令可以解决

npm install [email protected] --ignore-scripts