在開發中遇到這樣一個需求，當前界面有多張報表由table渲染出來，然后可以把這些table表格批量下載成Excel，並且多張table表格集中在一個sheet里面。具體代碼實現如下：
//EXCEL導出 exportFile: function (classArr,dowloadName) { // classArr表示多個table的類名 //dowloadName 表示要下載的Excel的名字 let html = '' for (var i = 0; i < classArr.length; i++) { html = html + document.querySelector("." + `${classArr[i]}`).outerHTML; } var htmlTemplate = ` <html xmlns:v="urn:schemas-microsoft-com:vml" 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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> table{ margin-bottom:40px; } table th{ height: 36px; text-align: center; } table td { height: 36px; text-align: center; } </style> <!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name></x:Name><x:WorksheetOptions><x:Selected/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--> </head> <body> <div class="onlyTable"> ${html} </div> </body> </html>` var blob = new Blob([htmlTemplate], {type:"application/octet-stream"}); var link = document.getElementsByTagName("a")[0]; link.href = URL.createObjectURL(blob); link.download = dowloadName+"類報表.xls"; link.click(); }
實現下載的效果如下，表格table的樣式同樣可以顯示在Excel中
