使用layui框架導出table表為excel

1.當分頁導出table時，只需要添加導出按鈕，並給按鈕添加onclick事件觸發以下函數

              //文件導出
        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"))
        if(btrs==''){
            alert('數據為空，無法導出excel文件');
        }else{
        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 = 1; i < hths.length-1; 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 = 1; i < btds.length-1; 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);
        }
        
        var rowConf = excel.makeRowConfig({
            1: 40,
            3: 30
        }, 20)
        excel.exportExcel({
            sheet: datas
        }, '專家表-' + new Date().toLocaleString() + '.xlsx', 'xlsx', {
            extend: {
                sheet: {
                    '!merges': mergeArr
                    , '!cols': widthArr
                    , '!rows': rowConf
                }
            }
        })  
        }
    } 

 

2.分頁的table數據，導出全部數據，需要后台將數據全部給前台

給導出按鈕，添加一個id，點擊通過ajax獲取全部數據，成功后添加

dataList = eval(data.data);//data.data后台傳入的數據
table.exportFile(d.config.id, dataList, 'xls');//d=table.render

table.exportFile(col,data , 'xls');

col為組裝自定義表頭數組，

data為重新請求的完整表格數據，

xls為導出文件類型。

 

3.不想將數據全部導出，只導出table表格的幾列，可以寫一個隱藏的table表格

<div style="display:none">
     <table id="tabExport"></table>
</div>

給導出按鈕，添加一個id，點擊通過ajax獲取全部數據

$("#btnExport").click(function (){ var d = table.render({
                    elem: '#tabExport',
                    url: "/data/listall", //數據接口
                    method: 'post',
                    title: '導出表的名字',
                    where:{
                        name:name,
                    },
                    cols: [[
                        ,{field:'name', title: '', align:'center'}
                          ,{field:'major', title: '', align:'center'} 
                          ,{field:'user', title: '', align:'center'} 
                    ]],
                    done: function (data) {
                        dataList = eval(data.data);
                        table.exportFile(d.config.id, dataList, 'xls');
                    }
                });
            })
            

 

//導出時阻止頁面刷新
$(".layui-form").submit(function (e) {
e.preventDefault();
})