技術標籤：layuijavascript

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/