layer系列之table表及匯出+列印功能總結
阿新 • • 發佈：2021-10-28
layer系列之table匯出+列印功能總結 1.關於layui匯出方式，直接使用layui（版本2.4.5及以上）自帶的匯出方法即可： 原文連結：https://www.cnblogs.com/newcapecjmc/p/11904102.html 原始碼如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui--layui-table匯出Excel</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!-- <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all"> --> <link rel="stylesheet" href="../layui-v2.4.5/layui/css/layui.css" media="all"> <!-- 注意：如果你直接複製所有程式碼到本地，上述css路徑需要改成你本地的 --> </head> <body> <div class="layui-btn-group demoTable" style="margin-bottom: 10px;"> <button class="layui-btn" data-type="parseTable">立即轉化為資料表格</button> <button class="layui-btn" data-type="parseTable" onclick="convertToTable()">將資料轉化為靜態表格</button> <button class="layui-btn" data-type="parseTableToExcel" onclick="exportToExcel()">匯出Excel</button> </div> <table lay-filter="parse-table-demo"> <thead> <tr> <th lay-data="{field:'username', width:200}">暱稱</th> <th lay-data="{field:'joinTime', width:150}">加入時間</th> <th lay-data="{field:'sign', minWidth: 180}">簽名</th> </tr> </thead> <tbody> <tr> <td>賢心1</td> <td>2016-11-28</td> <td>人生就像是一場修行 A</td> </tr> <tr> <td>賢心2</td> <td>2016-11-29</td> <td>人生就像是一場修行 B</td> </tr> <tr> <td>賢心3</td> <td>2016-11-30</td> <td>人生就像是一場修行 C</td> </tr> </tbody> </table> <!--直接為table繫結資料--> <table id="table_TravelagenceCheck" lay-filter="TravelagenceCheck"></table> <!--引用layui.js 直接從layui官網下載2.4.5版本的layui.js--> <script src="../layui-v2.4.5/layui/layui.js"></script> <script> varexportBillsData=[{ 'nos':1, 'CompanyId':1001, 'CompanyName':"攜程", 'Sex':'男' },{ 'nos':2, 'CompanyId':1002, 'CompanyName':"攜程1", 'Sex':'女' }]; layui.use('table', function(){ var table = layui.table; }); //1.轉化為靜態表格-直接為layui-table繫結資料 function convertToTable(){ layui.use('table', function () { var table = layui.table; table.render({ elem:'#table_TravelagenceCheck' , height: 480 , title: "協議貢獻量明細" , page: true , size: 'sm' , toolbar: "協議入住明細" , defaultToolbar: ['filter', 'print', 'exports'] , limit: 200 , limits: [200] //直接繫結data , data: exportBillsData , cols: [[ //表頭 { field: 'nos', title: "序號", width: '2%', type: 'numbers', unresize: true } , { field:'CompanyId', title: "協議編號", width: '10%', sort: true, unresize: true } , { field: 'CompanyName', title: "協議名稱", width: '12%', sort: true, unresize: true } , { field: 'Sex', title: "性別", width: '12%', sort: true, unresize: true } ]] }); }); } //匯出Excel-註明:table.exportFile方法是layui-table自帶的,適用於2.4.5版本，2.3.0版本的layui.js沒有這個方法 function exportToExcel(){ layui.use('table', function () { var table = layui.table; table.exportFile(["暱稱", "加入時間", "簽名"],[ ['賢心1','2016-11-28','人生就像是一場修行 A'], ['賢心2','2019-11-28','人生就像是一場修行 B'], ['賢心3','2016-10-28','人生就像是一場修行 C'] ],'本日將到訂單列表.xls'); }); } //匯出Excel1 function exportToExcel1(){ layui.use('table', function () { var table = layui.table; table.exportFile(["#","賬號", "型別", "姓名", "房型", "房號", "狀態", "成交價", "餘額", "信用金額", "預付金額", "到達", "離開", "手機", "房數", "聯房", "VIP", "房價碼", "市場碼", "公司", "預訂號", "備註"],[ ['1','F1908090001','F','jackA302','三人房有窗 浪漫','A302','R','120','400','0','0','2019-08-09 09:33','2019-08-30 12:00','1734***2827','1','-','-','BASE','上門散客','-','R1908090001','-'], ['2','F1908210008','F','jackG202','雙床房海景','G202','R','501','0','0','0','2019-08-22 09:16','2019-08-30 12:00','1734***2827','1','-','-','BASE','上門散客','-','R1908210003','-'], ['3','F1908210012','F','李先生/李先生','雙床房海景','-','R','501','0','0','0','2019-08-22 12:00','2019-08-23 12:00','1777***3792','1','-','-','BASE','上門散客','-','R1908210004','-'], ['4','F1908210030','F','丁小帥','大床房1.5米床 有窗','-','R','31','0','0','0','2019-08-22 12:00','2019-08-23 14:00','1861***8299','1','-','-','VipGold','中央推薦入住','-','190822021002062','【客人留言:測試結果】[使用電子代金券:第1晚30抵30] [AliAPP訂單]不贈送早餐;每日房價:2019-08-22:31.00'], ['5','F1908220001','F','沙奧','單人房早餐測試','-','R','230','0','0','230','2019-08-22 12:00','2019-08-23 13:00','1317***1407','1','-','-','VipCard','中央推薦入住','銀聯線上支付','190822021002069','[已支付成功](銀聯線上支付)[Android手機訂單]不贈送早餐;每日房價:2019-08-22:230.00'], ['6','F1908220002','F','焦人傑','單人房早餐測試','D203','R','0','0','0','0','2019-08-22 16:43','2019-08-23 12:00','1363***7594','1','-','-','BASE','上門散客','-','R1908220001','自助機辦理'], ['7','F1908220003','F','焦人傑','單人房早餐測試','D205','R','0','0','0','0','2019-08-22 16:43','2019-08-23 12:00','1363***7594','1','-','-','BASE','上門散客','-','R1908220002','自助機辦理'], ['8','F1908220004','F','焦人傑','單人房早餐測試','D206','R','0','0','0','0','2019-08-22 16:43','2019-08-23 12:00','1363***7594','1','-','-','BASE','上門散客','-','R1908220003','自助機辦理'], ['9','F1908210038','F','焦人傑','雙床房海景','G208','R','0','0','0','0','2019-08-22 17:34','2019-08-23 17:34','1363***7594','1','-','-','BASE','上門散客','-','R1908210009','自助機辦理'], ['10','F1908220010','F','test芬芳','單人房早餐測試','-','R','120','0','0','0','2019-08-23 10:28','2019-08-24 12:00','-','18','☆','-','BASE','上門散客','-','R1908220004','-'], ['11','F1908220011','F','test芬芳','單人房早餐測試','-','R','120','0','0','0','2019-08-23 10:28','2019-08-24 12:00','-','1','☆','-','BASE','上門散客','-','R1908220004','-'], ['12','F1908220012','F','test芬芳','單人房早餐測試','-','R','120','0','0','0','2019-08-23 10:28','2019-08-24 12:00','-','1','☆','-','BASE','上門散客','-','R1908220004','-'], ['13','F1908220008','F','沙奧','8.高階套房 2米床 有窗','-','R','430','0','0','430','2019-08-23 12:00','2019-08-24 13:00','1317***1407','1','-','☆','VipCard','中央會員預定','銀聯線上支付','190823021002006','[已支付成功](銀聯線上支付)[Android手機訂單][使用電子代金券:1間房第1晚30抵30]不贈送早餐;每日房價:2019-08-23:430.00'], ['14','F1908220009','F','沙奧','8.高階套房 2米床 有窗','-','R','430','0','0','430','2019-08-23 12:00','2019-08-24 13:00','1317***1407','1','-','-','VipCard','中央推薦入住','銀聯線上支付','190823021002007'] ],'本日將到訂單列表.xls'); }); } </script> </body> </html> 補充說明：
另外補充layui.js與layui.all.js：參考地址：https://blog.csdn.net/qq_38642674/article/details/88236045 layui這個框架雖然還有一些不足之處但是我覺得已經非常優秀了，對於layui.js和layui.all.js的區別，網上別人各執一詞，我今天遇到個非常噁心令我難受的問題發表一下我對這兩個的看法。首先我引入layui.all.js，今天除錯發現layui物件的內容如下 大概只有這些模組，其中有很多常用的模組大家都熟悉的。 然後我換成layui.js，除錯layui物件的內容如下 內容差不多，但是少了幾個模組，多了幾個我自己引入的外部模組。所以我似乎明白了很多關於這兩者的區別。 首先layui.all.js，你引入這個之後，你的layui.use()將不生效，好處是你引用裡面有的模組將不用用模組化的寫法引入，在js檔案中可以直接用layui.table這樣用。 然後layui.js，你引入這個之後，你js所有的layui模組的引用都要用layui.use()來使用，不然將無法使用。 一句話就是：layui.all.js包含的模組較多，layui.js中包含的模組較少，前者包含後者的所有模組。 分析：通過以上比較看出如果想用layui-table的匯出功能： （1）直接引用layui.js (layui.js會飲用其模組中的table.js)直接匯出： 方法如下： //匯出Excel function exportToExcel(){ layui.use('table', function () { var table = layui.table; table.exportFile(["暱稱", "加入時間", "簽名"],[ ['賢心1','2016-11-28','人生就像是一場修行 A'], ['賢心2','2019-11-28','人生就像是一場修行 B'], ['賢心3','2016-10-28','人生就像是一場修行 C'] ],'本日將到訂單列表.xls'); }); }
(2)直接引用layui.all.js 方法如下：
原始碼如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui--layui-table匯出Excel</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!-- <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all"> --> <link rel="stylesheet" href="../layui-v2.4.5/layui/css/layui.css" media="all"> <!-- 注意：如果你直接複製所有程式碼到本地，上述css路徑需要改成你本地的 --> </head> <body> <div class="layui-btn-group demoTable" style="margin-bottom: 10px;"> <button class="layui-btn" data-type="parseTable">立即轉化為資料表格</button> <button class="layui-btn" data-type="parseTable" onclick="convertToTable()">將資料轉化為靜態表格</button> <button class="layui-btn" data-type="parseTableToExcel" onclick="exportToExcels()">匯出Excel</button> </div> <table lay-filter="parse-table-demo"> <thead> <tr> <th lay-data="{field:'username', width:200}">暱稱</th> <th lay-data="{field:'joinTime', width:150}">加入時間</th> <th lay-data="{field:'sign', minWidth: 180}">簽名</th> </tr> </thead> <tbody> <tr> <td>賢心1</td> <td>2016-11-28</td> <td>人生就像是一場修行 A</td> </tr> <tr> <td>賢心2</td> <td>2016-11-29</td> <td>人生就像是一場修行 B</td> </tr> <tr> <td>賢心3</td> <td>2016-11-30</td> <td>人生就像是一場修行 C</td> </tr> </tbody> </table> <!--直接為table繫結資料--> <table id="table_TravelagenceCheck" lay-filter="TravelagenceCheck"> </table> <!-- <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script> --> <!-- <script src="../layui-v2.4.5/layui/layui.js"></script> --> <script src="../layui-v2.4.5/layui/layui.all.js"></script> <script> var exportBillsData=[{ 'nos':1, 'CompanyId':1001, 'CompanyName':"攜程", 'Sex':'男' },{ 'nos':2, 'CompanyId':1002, 'CompanyName':"攜程1", 'Sex':'女' }]; layui.use('table', function(){ var table = layui.table; }); //轉化為靜態表格 function convertToTable(){ layui.use('table', function () { var table = layui.table; table.render({ elem: '#table_TravelagenceCheck' , height: 480 , title: "協議貢獻量明細" , page: true , size: 'sm' , toolbar: "協議入住明細" , defaultToolbar: ['filter', 'print', 'exports'] , limit: 200 , limits: [200] //直接繫結data , data: exportBillsData , cols: [[ //表頭 { field: 'nos', title: "序號", width: '2%', type: 'numbers', unresize: true } , { field: 'CompanyId', title: "協議編號", width: '10%', sort: true, unresize: true } , { field: 'CompanyName', title: "協議名稱", width: '12%', sort: true, unresize: true } , { field: 'Sex', title: "性別", width: '12%', sort: true, unresize: true } ]] }); }); } //匯出Excel function exportToExcels(){ //layui.use('table', function () { var table = layui.table; table.exportFile(["暱稱", "加入時間", "簽名"],[ ['賢心1','2016-11-28','人生就像是一場修行 A'], ['賢心2','2019-11-28','人生就像是一場修行 B'], ['賢心3','2016-10-28','人生就像是一場修行 C'] ],'本日將到訂單列表.xls'); // }); } </script> </body> </html> 總結：通過上面直接引用layui.all.js匯出excel可以看出不用layui.use，直接使用table.exportFile就可以匯出， 注意點：引用2.4.5版本的layui.js時,其自帶的layer.js是3.1.1版本的；引用2.4.5版本的layui.all.js時，其自帶的layer.js是3.1.1版本的！ 引用2.4.5版本的layui.js後其自帶的layer.js版本與系統中已經引入的layer.js版本，如2.2版本的layer.js後，前者的layer.js可能會覆蓋掉後者引入的layer.js版本，一些效果會不同。暫時不知道layer.js 3.1.1版本的是不是覆蓋2.2版本的。。。。 最後附上：js原生方式的匯出： 原始碼如下： <html> <head> <style type="text/css"> .btn_CacheExport{ display:block; width:83px; height:40px; text-align: center; position:center; color:black; background-color:#C0C0C0; line-height: 26px; border:1px solid #727373 } </style> <p style="font-size: 20px;color: red;">使用table標籤方式將json匯出xls檔案</p> <button download="table匯出Excel-第二種方式" onclick='tableToExcel()' id="excelOut1">匯出</button> <a onclick='tableToExcel()' class="btn_CacheExport" id="excelOut2">匯出</a><!-- download="table匯出Excel-第二種方式" --> <a download="table匯出Excel-第二種方式" href="javascript:;" onclick="tableToExcel()" id="excelOut3">匯出30-300207房態報表</a> </head> <body> <script> function tableToExcel(){ //要匯出的json資料 const jsonData = [ { name:'路人甲', phone:'123456', email:'[email protected]' }, { name:'炮灰乙', phone:'123456', email:'[email protected]' }, { name:'土匪丙', phone:'123456', email:'[email protected]' }, { name:'流氓丁', phone:'123456', email:'[email protected]' }, ] //列標題 let str = '<tr><td>姓名</td><td>電話</td><td>郵箱</td></tr>'; //迴圈遍歷，每行加入tr標籤，每個單元格加td標籤 for(let i = 0 ; i < jsonData.length ; i++ ){ str+='<tr>'; for(let item in jsonData[i]){ //增加\t為了不讓表格顯示科學計數法或者其他格式 str+=`<td>${ jsonData[i][item] + '\t'}</td>`; } str+='</tr>'; } //Worksheet名 let worksheet = '這是匯出的Excel' let uri = 'data:application/vnd.ms-excel;base64,'; //下載的表格模板資料 let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"> <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet> <x:Name>${worksheet}</x:Name> <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet> </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--> </head><body><table>${str}</table></body></html>`; //下載匯出1：使用button按鈕 //window.location.href = uri + base64(template);//這種方式匯出的Excel檔案沒有指定檔名 //下載匯出2：使用a標籤，指定a標籤的download屬性後匯出的Excel檔案有檔名!!! document.getElementById("excelOut2").download = "匯出excel哦";//指定匯出的Excel檔名稱 document.getElementById("excelOut2").href = uri + base64(template);//使用a標籤的download屬性可以指定匯出的Excel檔名 } //輸出base64編碼 function base64 (s) { return window.btoa(unescape(encodeURIComponent(s))) } </script> </body> </html> 2. layui table列印功能 沒有使用layui自帶的列印功能，因為自帶的列印功能感覺不好新增標題，所以使用自定義的列印函式： 可以新增報表頁首及頁尾，
原始碼： /* * layui打印表格自定義函式 */ function printReport(tablelayid) { hotelData = hotelData[0]; let hotelName = hotelData.HotelName;//酒店名稱 let businessDate = parseJsonDate(hotelData.BusinessDate);//營業日期 let printer = hotelData.CurrentUser;//列印人 let printerTime = formatDateTime(hotelData.CurrentHotelSystemTxDate, 14);//列印時間 let reportName = "報表:27-030205-當日客房出租情況報表"; let v = document.createElement("div"); let f = [`<head><br><div style='text-align:center;font-size:25px;font-weight:bolder'>${hotelName}</div><div style='font-size:16px;font-weight:bolder'>${reportName}<br>營業日期:${businessDate}</div>`, "<style>", "body{font-size: 16px; color: #666;}", "table{width: 100%; border-collapse: collapse; border-spacing: 0;}", "th,td{line-height: 20px; padding: 9px 10px; border: 1px solid #ccc; text-align: center; font-size: 18px; color: #666;}", "a{color: #666; text-decoration:none;}", "*.layui-hide{display: none}", "</style>", "</head>"].join(""); $(v).append($(".layui-table-box").find(".layui-table-header").html()); $(v).find("tr").after($("[lay-id=\"" + tablelayid + "\"] .layui-table-body.layui-table-main table").html()); $(v).find("th.layui-table-patch").remove(); $(v).find(".layui-table-col-special").remove(); //頁尾展示列印人，列印時間 let footer = [`<footer><div><div style='float: left;'>列印人：${printer}</div><div style='float: right;'>列印時間：${printerTime}</div></div></footer >`].join(""); let h = window.open("列印視窗", "_blank"); h.document.write(f + $(v).prop("outerHTML") + footer); h.document.close(); h.print(); h.close(); } /** * 匯出Excel */ function exportToExcel() { let item = new Array('客人姓名', '房號', '賬號', '客人型別程式碼', '客人型別描述', '會員卡號', '會員卡類', '協議單位', '狀態', '房型程式碼', '房型描述', '成交價', '門市價', '中央預定', '到達日期', '離開日期', '同住'); let dateTime = getDay3(); //時間格式:2019-08-08 layui.use('table', function () { var table = layui.table;// `27-030205:當日客房出租情況報表${dateTime} table.exportFile([item], exportReportData, `27-030205:當日客房出租情況報表${dateTime}.xls`); }); } 效果如圖：
上面自定義的列印方法：printReport()經過與layui自帶的列印原始碼比較後發現一致, V2.4.5 中的layui 的table.js中 擷取片段原始碼如下：
switch (layui.stope(e), R.trigger("table.tool.panel.remove"), l.close(a.tipsIndex), c) { case "LAYTABLE_COLS": s({ list: function() { var e = []; return a.eachCols(function(t, i) { i.field && "normal" == i.type && e.push('<li><input type="checkbox" name="' + i.field + '" data-key="' + i.key + '" data-parentkey="' + (i.parentKey || "") + '" lay-skin="primary" ' + (i.hide ? "": "checked") + ' title="' + (i.title || i.field) + '" lay-filter="LAY_TABLE_TOOL_COLS"></li>') }), e.join("") } (), done: function() { n.on("checkbox(LAY_TABLE_TOOL_COLS)", function(e) { var i = t(e.elem), l = this.checked, n = i.data("key"), r = i.data("parentkey"); layui.each(o.cols, function(e, t) { layui.each(t, function(t, i) { if (e + "-" + t === n) { var d = i.hide; i.hide = !l, a.elem.find('*[data-key="' + o.index + "-" + n + '"]')[l ? "removeClass": "addClass"](y), d != i.hide && a.setParentCol(!l, r), a.resize() } }) }) }) } }); break; case "LAYTABLE_EXPORT": r.ie ? l.tips("匯出功能不支援 IE，請用 Chrome 等高階瀏覽器匯出", this, { tips: 3 }) : s({ list: function() { return ['<li data-type="csv">匯出到 Csv 檔案</li>', '<li data-type="xls">匯出到 Excel 檔案</li>'].join("") } (), done: function(e, i) { i.on("click", function() { var e = t(this).data("type"); d.exportFile(o.id, null, e) }) } }); break; case "LAYTABLE_PRINT": var h = window.open("列印視窗", "_blank"), f = ["<style>", "body{font-size: 12px; color: #666;}", "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>"].join(""), v = t(a.layHeader.html()); v.append(a.layMain.find("table").html()), v.find("th.layui-table-patch").remove(), v.find(".layui-table-col-special").remove(), h.document.write(f + v.prop("outerHTML")), h.document.close(), h.print(), h.close() }
原文連結：https://www.cnblogs.com/newcapecjmc/p/11904102.html