实现layui筛选列后基于sheetjs导出

/*
* obj: layui监听事件函数参数   obj  table.on('toolbar(threeLevelTable)', function(obj){})
* withUnit: 表格设置的宽度属性 默认 with
* format:输出文件的名称加格式 默认 "地块信息列表.XLSX"
* regular(): 自定义函数过滤 templet 中的自定义内容
* */
function generateExcelFile(obj,withUnit,format,regular){
    if(!obj) new Error("数据为空");
    var config = obj.config;

    //获取表头信息
    var columns = config.cols[0].filter(obj=> obj.title != "序号");
    //获取表格数据
    var data = config.data;

    var aoa = [];
    var widthpx = [];

    console.log(obj);
    //记录标题头数据以及标题宽度
    columns.map(itam=>{
        if(!itam.hide && itam.title != "序号"){
            aoa.push(itam.title);
            try {
                widthpx.push({'wpx':parseFloat(itam[withUnit || 'with'])*0.75 ? parseFloat(itam[withUnit || 'with'])*0.75 : 100});
            }catch (err) {
                alert("错误信息: " + err.message);
                alert("错误原因可能为‘withUnit’参数问题,应传入表格的宽度属性");
            }

        }
    })
    //处理表格数据,根据标题头做过滤
    var filteredData = data.map(function(row) {
        var filteredRow = {};
        for (var i = 0; i < columns.length; i++) {
            var column = columns[i];
            // 检查列是否被Layui筛选掉
            if (!column.hide && column.field) {
                if(column.templet){
                    //column.templet(row) ? column.templet(row) : column.templet(row);
                    var columne = column.templet(row);
                    if(columne && regular && typeof regular === 'function'){
                        filteredRow[column.field] = regular(columne.toString());
                    }else {
                        filteredRow[column.field] = columne;
                    }
                }else {
                    filteredRow[column.field] = row[column.field];
                }
            }
        }
        return filteredRow;
    });
    //将表格头和表格数据拼到一起
    var aoos = [];
    //添加表头数据
    aoos.push(aoa);
    filteredData.map(row=>{
        var mentid = [];
        columns.map(rows=>{
            if(!rows.hide)mentid.push(row[rows.field]);
        })
        aoos.push(mentid);
    })
    console.log(aoos);
    var wb = XLSX.utils.book_new();
    var ws = XLSX.utils.aoa_to_sheet(aoos);
    //设定单元格宽度跟随表格宽度
    ws['!cols'] = widthpx;
    XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
    XLSX.writeFile(wb, format || "地块信息列表.XLSX");
}

layui表头用templet属性实现逻辑处理后,导出时也要导出处理好的逻辑。regular(row)函数回传一份原始行数据,可以将templet属性的规则拿来处理。返回处理好的导出数据

下面是一份例子:

          layui.use("table", function () {
            var table = layui.table;
            table.render({
              elem: elm,
              data: data,
              page: false, //开启分页
              cols: [{
                field: 'PZWH', title: '批准文号', minWidth: 180, align: 'left', templet: function (d) {
                  return "<span>" + d.PZWH + "</span><i class='el-icon-map-location' busiType='all'></i>";
                }
              },
              {
                field: 'MPAREA', title: '地块总面积(亩)', width: 150, align: 'right', templet: function (d) {
                  return d.MPAREA.toFixed(4);
                }
              }],
              height: 'full-' + h,
              limit: 999,
              // height: 'full+10',
              toolbar: '#default',
              defaultToolbar: ['filter', {
                title: '导出' //标题
                , layEvent: 'export' //事件名,用于 toolbar 事件中使用
                , icon: 'layui-icon-export' //图标类名
              }],
              done: (res) => {
                if (showLineColor) {
                  res.data.forEach((item, index) => {
                    /*  let tdDom = $("#pane-dkxxxq .layui-table-body tbody tr[data-index='"+index+"'] td")
                      if(item.color && item.color != 'white'){
                          tdDom.css("cssText","color:#fff !important;background:"+item.color);
                      }*/
                  })
                }
              }
            });
            //监听头工具栏
            table.on('toolbar(levelTable)', function (obj) {
              delete Array.prototype.contains;
              delete Array.prototype.max;
              delete Array.prototype.min;
              switch (obj.event) {
                case 'export':
                  generateExcelFile(obj,"minWidth",null,(row)=>{
                    var tempDiv = document.createElement("div");
                    tempDiv.innerHTML = row;
                    if(tempDiv.querySelector("span")){
                      return  tempDiv.querySelector("span").textContent;
                    }else {
                      return row;
                    }
                  });
                  break;
              }
              ;
            });
          });

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值