layui复杂表头数据excel纯前端导出

layui复杂表头数据excel纯前端导出

前言：

	最近需要完成一个layui复杂表头的前端导出的功能，尝试过js-xlsx，但普通版不能设置表格样式，也尝试过各位大佬魔改版，但似乎都未能解决样式问题，遗憾放弃，最终在尝试数次后在从ayui-excel官方下找到了最终解决方法

准备

1.下载demo https://github.com/wangerzi/layui-excel
2.将demo放入项目中，在使用excel模块时引用即可

直接上代码

	function exportFile() {
        var bodys = $("div[class='layui-form layui-border-box layui-table-view'] .layui-table-box table").get(1); // 获取数据
        var btrs = Array.from(bodys.querySelectorAll("tr"))
        var btdslength = Array.from(btrs[0].querySelectorAll("td")).length;
        var headers = $("div[class='layui-form layui-border-box layui-table-view'] .layui-table-box table").get(0); // 获取表头
        var headerHead = $("div[class='layui-form layui-border-box layui-table-view'] .layui-table-box table thead").get(0); // 获取表头
        var htrs = Array.from(headers.querySelectorAll('tr'));

        var bodysArr = new Array();
        var point =new Array();  // 行，列
        for(var pi =0; pi<=htrs.length+1; pi++){
            point[pi] = new Array();
        }
        point[0][0] ="qd"; // 起点
        var mergeArr = [];
        for (var j = 0; j < htrs.length; j++) {    // 遍历tr
            var titles = [];
            var hths = Array.from(htrs[j].querySelectorAll("th"));
            var titleAll = {};
            var pointIndex = 0;
            var pindx = 0;  // 起点遍历位置
            for (var i = 0; i < hths.length; i++) {  // 遍历 th
                var clazz = hths[i].getAttributeNode('class');
                var colspan = hths[i].getAttributeNode('colspan'); // 表头占用列数
                var rowspan = hths[i].getAttributeNode('rowspan'); //，表头占用行数
                if(!colspan){
                    colspan = 1;
                }else{
                    colspan = parseInt(colspan.value);
                }
                if(!rowspan){
                    rowspan = 1;
                }else{
                    rowspan = parseInt(rowspan.value);
                }
                // 判断数据起始填写位置
                for(;pindx < btdslength; pindx ++){
                    if(j == 0 || point[j][pindx] == "qd"){
                        titles.push(hths[i].innerText);
                        for(var temp = 0; temp < colspan-1;temp++){
                            titles.push(null);
                        }
                        mergeArr.push({s:{r:j,c:pindx},e:{r:j+rowspan-1,c:pindx+colspan-1}}); // 添加合并数据参数  r的差R表示向下扩展R个单元格,c 的差C表示想右扩展C个单元格
                        for(var qdi = 0; qdi<colspan ;qdi ++){
                            point[j+rowspan][pindx+qdi] = "qd"; // 添加完数据 ,添加起点记录
                        }
                        pindx = pindx+colspan;
                        break;
                    }else{
                        titles.push(""); // 不能为null, 为null 会影响表格样式的设置
                    }
                }
            }
            bodysArr.push(titles);
        }
        var widthArr = []; //这里改宽
        for (var j = 0; j < btrs.length; j++) {
            var contents = [];
            var btds = Array.from(btrs[j].querySelectorAll("td"));
            for (var i = 0; i < btds.length; i++) {
                contents.push(btds[i].innerText);
                if(j == 0){  //只跑一圈
                    widthArr.push({wpx:btds[i].scrollWidth});
                }
            }
            bodysArr.push(contents)
        }
		
        
        //设置表格样式
        var styleStr = {
            alignment:{
                vertical:'center',
                horizontal:'center'
            },
            font:{
                sz:14,
                // bold:true
            },
            border:{
                top:{
                    style:'thin'
                },
                bottom:{
                    style:'thin'
                },
                left:{
                    style:'thin'
                },
                right:{
                    style:'thin'
                }
            }
        }
        var datas = [];
        for(var i = 0; i<bodysArr.length;i++){
            var map ={};
            var thisData = bodysArr[i];
            for(var n = 0;n<thisData.length;n++){
                var dataName = "data_"+n;
                var das = thisData[n];
                var styMap = {};
                styMap['s'] = styleStr;
                styMap['v'] = das;
                map[dataName] = styMap;
            }
            datas.push(map);
        }
       
        layui.config({
            base:'<%=path%>/resources/layui-excel/layui_exts/'  //从官方GitHub上下载的demo中excel模块地址
        }).extend({
            excel:'excel'
        }).use(['excel'], function () {
            var excel = layui.excel;
            var rowConf = excel.makeRowConfig({
                1: 40,
                3: 30
            }, 20)
            excel.exportExcel({
                sheet: datas
            }, '复杂表头导出.xlsx', 'xlsx', {
                extend: {
                    sheet: {
                        '!merges': mergeArr
                        , '!cols': widthArr
                        , '!rows': rowConf
                    }
                }
            })

        })

    }

最终导出表格样式

参考
1.拼接layui复杂表头的数据https://blog.csdn.net/qq_31816945/article/details/102857138
2.layui-excel官方demol http://excel.wj2015.com/