js 匯出 html 中的 table 表格為 excel (有效)
阿新 • • 發佈：2019-01-02
js 匯出 html 中的 table 表格為 excel
今天說一下如何將html中的表格匯出為 excel ，以後就不用麻煩後臺小夥伴了，話不多說，直接上程式碼
es6
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { padding: 1em; } </style> </head> <body> <div class="box"> <div> <button type="button" id="excelBtn">匯出Excel方法五</button> </div> <div id="myDiv"> <table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0"> <!-- caption元素可以生成表標題，其單元格列跨度為表格的列數 --> <caption>學生成績表</caption> <tr> <!-- 可以使用rowspan和colspan來合併單元格 --> <th rowspan="2">編號</th> <th rowspan="2">學號</th> <th rowspan="2">姓名</th> <th rowspan="2">性別</th> <th rowspan="2">年齡</th> <th colspan="3">成績</th> </tr> <tr> <th>語文</th> <th>數學</th> <th>英語</th> </tr> <tr> <td>1</td> <td>2016001</td> <td>張三</td> <td>男</td> <td>13</td> <td>85</td> <td>94</td> <td>77</td> </tr> <tr> <td>2</td> <td>2016002</td> <td>李四</td> <td>女</td> <td>12</td> <td>96</td> <td>84</td> <td>89</td> </tr> </table> </div> </div> </body> <script> document.getElementById('excelBtn').onclick = () => { exportExcel.exports(tableExcel); }; class ExportExcel { constructor() { this.idTmr = null; this.uri = 'data:application/vnd.ms-excel;base64,'; this.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><meta charset="UTF-8"><!--[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>{table}</table></body></html>'; } getBrowser() { var explorer = window.navigator.userAgent; //ie if (explorer.indexOf("MSIE") >= 0) { return 'ie'; } //firefox else if (explorer.indexOf("Firefox") >= 0) { return 'Firefox'; } //Chrome else if (explorer.indexOf("Chrome") >= 0) { return 'Chrome'; } //Opera else if (explorer.indexOf("Opera") >= 0) { return 'Opera'; } //Safari else if (explorer.indexOf("Safari") >= 0) { return 'Safari'; } }; exports(tableid) { if (this.getBrowser() == 'ie') { var curTbl = document.getElementById(tableid); var oXL = new ActiveXObject("Excel.Application"); var oWB = oXL.Workbooks.Add(); var xlsheet = oWB.Worksheets(1); var sel = document.body.createTextRange(); sel.moveToElementText(curTbl); sel.select(); sel.execCommand("Copy"); xlsheet.Paste(); oXL.Visible = true; try { var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls"); } catch (e) { alert(e); } finally { oWB.SaveAs(fname); oWB.Close(savechanges = false); oXL.Quit(); oXL = null; this.idTmr = window.setInterval("Cleanup();", 1); } } else { this.openExport(tableid) } }; openExport(table, name) { if (!table.nodeType) { table = document.getElementById(table) } var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }; window.location.href = this.uri + this.base64(this.format(this.template, ctx)); }; base64(s) { return window.btoa(unescape(encodeURIComponent(s))) }; format(s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }); }; } var exportExcel = new ExportExcel(); </script> </html>