layui复杂表头导出excel文件
layui支持复杂表头展示。但是其本身导出功能是不能导出复杂表头数据。
在网上有一篇导出excel文件的文章
这个文章写的是导出一个表格的方法。
其实拓展一下就可以对多个表格进行同时导出。
而layui表头和表格数据其实是分开来的两个表格。
1 //转换方法 2 function ChangeExport(content) { 3 return window.btoa(unescape(encodeURIComponent(content))); 4 } 5 6 //导出带复杂头部 7 //tableHead:复杂头部table信息 8 //tableBody:数据表格信息 9 //例子:ExportOfficeWithHead($(".layui-table-header table")[0], $(".layui-table-body table")[0]); 10 function ExportOfficeWithHead(tableHead, tableBody) { 11 var type = 'excel'; 12 //var table = document.getElementById(tableID); 13 var excelContent = tableBody.innerHTML; 14 var excelHeadContent = tableHead.innerHTML; 15 16 var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:" + type + "' xmlns='http://www.w3.org/TR/REC-html40'>"; 17 excelFile += "<head>"; 18 excelFile += "<!--[if gte mso 9]>"; 19 excelFile += "<xml>"; 20 excelFile += "<x:ExcelWorkbook>"; 21 excelFile += "<x:ExcelWorksheets>"; 22 excelFile += "<x:ExcelWorksheet>"; 23 excelFile += "<x:Name>"; 24 excelFile += "{worksheet}"; 25 excelFile += "</x:Name>"; 26 excelFile += "<x:WorksheetOptions>"; 27 excelFile += "<x:DisplayGridlines/>"; 28 excelFile += "</x:WorksheetOptions>"; 29 excelFile += "</x:ExcelWorksheet>"; 30 excelFile += "</x:ExcelWorksheets>"; 31 excelFile += "</x:ExcelWorkbook>"; 32 excelFile += "</xml>"; 33 excelFile += "<![endif]-->"; 34 excelFile += "</head>"; 35 excelFile += "<body>"; 36 excelFile += "<table>"; 37 excelFile += excelHeadContent; 38 excelFile += excelContent; 39 excelFile += "</table>"; 40 excelFile += "</body>"; 41 excelFile += "</html>"; 42 var base64data = "base64," + ChangeExport(excelFile); 43 switch (type) { 44 case 'excel': 45 window.open('data:application/vnd.ms-' + type + ';' + base64data); 46 break; 47 case 'powerpoint': 48 window.open('data:application/vnd.ms-' + type + ';' + base64data); 49 break; 50 } 51 }
新的处理方案：
入参为datatable的id，具体可以看元素中lay-id的值
1 //导出带复杂头部 2 //例子:ExportOfficeWithHead(obj.config.id);
3 function ExportOfficeWithHead(tableId) { 4 var content = $("div[lay-id='" + tableId + "'] .layui-table-box").html(); 5 6 var type = 'excel'; 7 //var table = document.getElementById(tableID); 8 //var excelContent = tableBody.innerHTML; 9 //var excelHeadContent = tableHead.innerHTML; 10 11 //var content = $("#" + obj.config.id); 12 13 14 var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:" + type + "' xmlns='http://www.w3.org/TR/REC-html40'>"; 15 excelFile += "<head>"; 16 excelFile += "<!--[if gte mso 9]>"; 17 excelFile += "<xml>"; 18 excelFile += "<x:ExcelWorkbook>"; 19 excelFile += "<x:ExcelWorksheets>"; 20 excelFile += "<x:ExcelWorksheet>"; 21 excelFile += "<x:Name>"; 22 excelFile += "{worksheet}"; 23 excelFile += "</x:Name>"; 24 excelFile += "<x:WorksheetOptions>"; 25 excelFile += "<x:DisplayGridlines/>"; 26 excelFile += "</x:WorksheetOptions>"; 27 excelFile += "</x:ExcelWorksheet>"; 28 excelFile += "</x:ExcelWorksheets>"; 29 excelFile += "</x:ExcelWorkbook>"; 30 excelFile += "</xml>"; 31 excelFile += "<![endif]-->"; 32 excelFile += "</head>"; 33 excelFile += "<body>"; 34 excelFile += "<table>"; 35 excelFile += content; 36 //excelFile += excelHeadContent; 37 //excelFile += excelContent; 38 excelFile += "</table>"; 39 excelFile += "</body>"; 40 excelFile += "</html>"; 41 var base64data = "base64," + ChangeExport(excelFile); 42 switch (type) { 43 case 'excel': 44 window.open('data:application/vnd.ms-' + type + ';' + base64data); 45 break; 46 case 'powerpoint': 47 window.open('data:application/vnd.ms-' + type + ';' + base64data); 48 break; 49 } 50 }
打印方法：
//导出Layui数据表格 //导出数据为紧密型数据 function PrintLayDataTable() { var v = document.createElement("div"); var f = ["<head>", "<style>", "body{font-size: 12px; color: #666;}", ".layui-table-cell {padding: 0px !important; text-align: center;}", ".layui-table td {padding: 0 !important; text-align: center;}", "th, td{padding: 0px !important;}", "table{width: 100%; border-collapse: collapse; border-spacing: 0;}", "th,td{line-height: 20px; padding: 9px 15px; border: 1px solid #ccc; text-align: left; font-size: 12px; color: #666;}", "a{color: #666; text-decoration:none;}", "*.layui-hide{display: none}", "</style>", "</head>" ].join(""); //找到表格数据内容 var tableBody = $(".layui-table-body").html(); //找到表格标题内容 var tableHead = $(".layui-table-header table").html(); tableHead = StrReplaceAll(tableHead, "<th class=\"layui-table-patch\"><div class=\"layui-table-cell\" style=\"width: 17px;\"></div></th>", ""); //添加打印时间 //var nowTime = GetDataTime("yyyy-MM-dd", 'sub', 'day',0) //tableHead = tableHead.replace("申请信息", "申请信息</br>打印时间:" + nowTime); //将标题加入到数据内容中 var insertArray = tableBody.split("<tbody>"); var tmpBody = insertArray[0] + tableHead + "<tbody>" + insertArray[1]; $(v).append(tmpBody); //$(v).find("tr").after($("[lay-id=\"" + tablelayid + "\"] .layui-table-body.layui-table-main table").html()); //$(v).find("tr").after($(".layui-table-header table")[0].innerHTML); //$(v).find("tr").after($(".layui-table-body table")[0].innerHTML); //$(v).find("th.layui-table-patch").remove(); //$(v).find(".layui-table-col-special").remove(); var h = window.open("打印窗口", "_blank"); //var printHtml = f + $(v).prop("outerHTML"); var printHtml = f + $(v).prop("outerHTML"); h.document.write(printHtml); h.document.close(); h.print(); h.close(); } //导出Layui数据表格 //导出数据为紧密型数据 //例子： PrintLayDataTable(obj.config.id); function PrintLayDataTable(tableId) { var v = document.createElement("div"); var f = ["<head>", "<style>", "body{font-size: 12px; color: #666;}", ".layui-table-cell {padding: 0px !important; text-align: center;}", ".layui-table td {padding: 0 !important; text-align: center;}", "th, td{padding: 0px !important;}", "table{width: 100%; border-collapse: collapse; border-spacing: 0;}", "th,td{line-height: 20px; padding: 9px 15px; border: 1px solid #ccc; text-align: left; font-size: 12px; color: #666;}", "a{color: #666; text-decoration:none;}", "*.layui-hide{display: none}", "</style>", "</head>" ].join(""); //var content = $("div[lay-id='" + tableId + "'] .layui-table-box").html(); ////找到表格数据内容 var tableBody = $("div[lay-id='" + tableId + "'] .layui-table-body").html(); ////找到表格标题内容 var tableHead = $("div[lay-id='" + tableId + "'] .layui-table-header table").html(); tableHead = StrReplaceAll(tableHead, "<th class=\"layui-table-patch\"><div class=\"layui-table-cell\" style=\"width: 17px;\"></div></th>", ""); //content = StrReplaceAll(content, "<th class=\"layui-table-patch\"><div class=\"layui-table-cell\" style=\"width: 17px;\"></div></th>", ""); //添加打印时间 //var nowTime = GetDataTime("yyyy-MM-dd", 'sub', 'day',0) //tableHead = tableHead.replace("申请信息", "申请信息</br>打印时间:" + nowTime); //将标题加入到数据内容中 var insertArray = tableBody.split("<tbody>"); var tmpBody = insertArray[0] + tableHead + "<tbody>" + insertArray[1]; // var tmpBody =content; $(v).append(tmpBody); //$(v).find("tr").after($("[lay-id=\"" + tablelayid + "\"] .layui-table-body.layui-table-main table").html()); //$(v).find("tr").after($(".layui-table-header table")[0].innerHTML); //$(v).find("tr").after($(".layui-table-body table")[0].innerHTML); //$(v).find("th.layui-table-patch").remove(); //$(v).find(".layui-table-col-special").remove(); var h = window.open("打印窗口", "_blank"); //var printHtml = f + $(v).prop("outerHTML"); var printHtml = f + $(v).prop("outerHTML"); h.document.write(printHtml); h.document.close(); h.print(); h.close(); }
