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

gulpnpm install -g gulp

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

发行版命令:gulp完整任务命令:gulp all,过滤layimgulp 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 phantomjs-prebuilt@2.1.16 --ignore-scripts

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值