js導出Excel的方法
利用html的table表格的格式書寫想要的excel格式
獲取table的內容並組裝成一個xls格式的字符串
利用Blob對象生成一個xls格式的文件
利用a標簽的download屬性創建文件名，並下載到本地
舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style media="screen"> .tableA { border-collapse: collapse; } .tableA .title th { height: 50px; font-size: 24px; font-family: '微軟雅黑'; font-weight: 700; } .tableA tr th { border: 1px #000 solid; height: 40px; background: #efefef; } .tableA tr td { padding: 0 40px; border: 1px #000 solid; height: 40px; text-align: center; } .tableA .footer td { font-size: 20px; font-weight: 700; } </style> </head> <body> <table bordercolor="black" class="tableA"> <tr class="title"> <th colspan="4">學生信息</th> </tr> <tr> <th>名字</th> <th>性別</th> <th>年齡</th> <th>班級</th> </tr> <tr> <td>小明</td> <td>男</td> <td>19</td> <td>1班</td> </tr> <tr> <td>小黃</td> <td>男</td> <td>20</td> <td>2班</td> </tr> <tr> <td>老王</td> <td>男</td> <td>29</td> <td>3班</td> </tr> <tr class="footer"> <td colspan="4">總人數：3人</td> </tr> </table> <p id="insert"></p> </body> </html> <script> //獲取table的html內容了，里面包括標簽的class或id等。 var oHtml = document.getElementsByClassName('tableA')[0].outerHTML; // 這里將table和style組成一個html，使用模板字符串 var excelHtml = ` <html> <head> <meta charset='utf-8' /> <style> .tableA { border-collapse: collapse; } .tableA .title th{ height: 50px; font-size: 24px; font-family: '微軟雅黑'; font-weight: 700; } .tableA tr th { border: 1px #000 solid; height: 40px; background: #efefef; } .tableA tr td { padding: 0 40px; border: 1px #000 solid; height: 40px; text-align: center; } .tableA .footer td { font-size: 20px; font-weight: 700; } </style> </head> <body> ${oHtml} </body> </html> `; // 生成xls文件並通過a標簽下載到本地 // 生成Excel var excelBlob = new Blob([excelHtml], { type: 'application/vnd.ms-excel' }) // 通過a標簽下載到本地了，下載前可以利用a標簽的download屬性命名 // 創建一個a標簽 var oA = document.createElement('a'); // 利用URL.createObjectURL()方法為a元素生成blob URL oA.href = URL.createObjectURL(excelBlob); // 給文件命名 oA.download = '學生名單.xls'; oA.innerHTML = "點擊下載" document.getElementById('insert').append(oA) </script>
來看看在瀏覽器顯示的效果如下，在這里我是給table增加了樣式的
======================================= 解釋如下 ==================================================================
先寫一個正常的html表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style media="screen"> .tableA { border-collapse: collapse; } .tableA .title th{ height: 50px; font-size: 24px; font-family: '微軟雅黑'; font-weight: 700; } .tableA tr th { border: 1px #000 solid; height: 40px; background: #efefef; } .tableA tr td { padding: 0 40px; border: 1px #000 solid; height: 40px; text-align: center; } .tableA .footer td { font-size: 20px; font-weight: 700; } </style> </head> <body> <table bordercolor="black" class="tableA"> <tr class="title"> <th colspan="4">學生信息</th> </tr> <tr> <th>名字</th> <th>性別</th> <th>年齡</th> <th>班級</th> </tr> <tr> <td>小明</td> <td>男</td> <td>19</td> <td>1班</td> </tr> <tr> <td>小黃</td> <td>男</td> <td>20</td> <td>2班</td> </tr> <tr> <td>老王</td> <td>男</td> <td>29</td> <td>3班</td> </tr> <tr class="footer"> <td colspan="4">總人數：3人</td> </tr> </table> </body> </html>來看看在瀏覽器顯示的效果如下，在這里我是給table增加了樣式的：
獲取table的內容裝成一個xls格式的字符串
接下來就是獲取table的html內容了，里面包括標簽的class或id等。
var oHtml = document.getElementsByClassName('tableA')[0].outerHTML;這里將table和style組成一個html，
【附上es6字符串模板鏈接[es6字符串模板][1]】
[1]:http://es6.ruanyifeng.com/#docs/string#模板字符串 "es6字符串模板"
// 這里我是用了es6的字符串語法``和${},對es6不熟悉的同學可以去查一下。 // 有沒有發現我這里的樣式就是和HTML上的style復制下來的， var excelHtml = ` <html> <head> <meta charset='utf-8' /> <style> .tableA { border-collapse: collapse; } .tableA .title th{ height: 50px; font-size: 24px; font-family: '微軟雅黑'; font-weight: 700; } .tableA tr th { border: 1px #000 solid; height: 40px; background: #efefef; } .tableA tr td { padding: 0 40px; border: 1px #000 solid; height: 40px; text-align: center; } .tableA .footer td { font-size: 20px; font-weight: 700; } </style> </head> <body> ${oHtml} </body> </html> `;生成xls文件並通過a標簽下載到本地
前面的准備工作就差不多了，接下來就是將字符串轉成xls文件了，這里主要利用Blob對象和URL.createObjectURL() 方法
- Blob對象表示不可變的類似文件對象的原始數據。Blob表示不一定是JavaScript原生形式的數據。 File 接口基於Blob，繼承了 blob的功能並將其擴展使其支持用戶系統上的文件。
- URL.createObjectURL() 靜態方法會創建一個 DOMString，其中包含一個表示參數中給出的對象的URL。這個 URL 的生命周期和創建它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。
Blob 構造函數用法舉例（生成一個json文件）：
var debug = {hello: "world"}; var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
同樣道理利用第二個步驟的字符串生成Excel
var excelBlob = new Blob([excelHtml], {type: 'application/vnd.ms-excel'})
最后一步就是通過a標簽下載到本地了，下載前可以利用a標簽的download屬性命名
// 創建一個a標簽 var oA = document.createElement('a'); // 利用URL.createObjectURL()方法為a元素生成blob URL oA.href = URL.createObjectURL(excelBlob); // 給文件命名 oA.download = '學生名單.xls';
最后生成的xls效果如下：
可以看出和瀏覽器的樣式除了涉及到px的會有偏差，其它設置都是生效的，只要微調一下就可以達到想要的效果了
ps:因為權限問題，生成的excel的格式只能為.xls而且每次打開都會彈窗詢問。所以建議打開后另存一份excel
轉自：
https://www.cnblogs.com/suyuanli/p/7945102.html