Export to Excel from Front-end
本文章展示前端 EXCEL 匯出之範例，不多作說明。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> </head> <body> <button id="btnEXCEL">EXCEL匯出</button> <script> document.getElementById("btnEXCEL").addEventListener("click", function () { let title = "客戶帳務報表"; let tempHTML = ""; tempHTML += "<table border='1'>"; tempHTML += "<thead>"; tempHTML += " <tr>"; tempHTML += " <th style='text-align:left;' colspan='6'>date between: " + "2020-08-08~2020-09-09" + "</th>"; tempHTML += " </tr>"; tempHTML += " <tr>"; tempHTML += " <th style='text-align:left;' colspan='6'>總額: " + "3000" + "元</th>"; tempHTML += " </tr>"; tempHTML += "</thead>"; tempHTML += "<tbody>"; tempHTML += "<tr>"; tempHTML += " <th style='text-align:left;' colspan='5'>" + "客戶:Tom" + "</th>"; tempHTML += " <th style='text-align:center;'>" + "3000元" + "</th>"; tempHTML += "</tr>"; tempHTML += "<tr>"; tempHTML += " <th style='text-align:center;'>訂單編號</th>"; tempHTML += " <th style='text-align:center;'>訂單時(送貨時)</th>"; tempHTML += " <th style='text-align:center;'>訂貨人</th>"; tempHTML += " <th style='text-align:center;'>pay status</th>"; tempHTML += " <th style='text-align:center;'>備註</th>"; tempHTML += " <th style='text-align:center;'>總計</th>"; tempHTML += "</tr>"; tempHTML += "<tr>"; tempHTML += " <td style='text-align:center;mso-number-format:\"\@\"; '>" + "03125478465" + "</td>"; tempHTML += " <td style='text-align:center;'>" + "2020-08-08" + "</td>"; tempHTML += " <td style='text-align:center;'>" + "Tom" + "</td>"; tempHTML += " <td style='text-align:center;'>" + "N" + "</td>"; tempHTML += " <td style='text-align:center;'>" + "需要冷凍" + "</td>"; tempHTML += " <td style='text-align:center;'>" + "3000" + "</td>"; tempHTML += "</tr>"; tempHTML += "</tbody>"; tempHTML += "</table>"; let html = '<html xmlns:o="urn:schemas-microsoft-com:office:office"'; html += ' xmlns:x="urn:schemas-microsoft-com:office:excel"'; html += ' xmlns="https://www.w3.org/TR/html40/">'; html += '<head>'; html += '<!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'; html += '<x:Name>{worksheet}</x:Name>'; html += '<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions>'; html += '</x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->'; html += '<meta http-equiv="content-type" content="text/plain; charset=UTF-8"/>'; html += '</head>'; html += '<body>' + tempHTML + '</body></html>'; let blob = new Blob([html], { type: "application/vnd.ms-excel" }); if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveOrOpenBlob(blob, title + '.xls'); } else { const link = document.createElement('a'); link.style.display = 'none'; document.body.appendChild(link); if (link.download !== undefined) { link.setAttribute('href', window.URL.createObjectURL(blob)); link.setAttribute('download', title + '.xls'); link.click(); } document.body.removeChild(link); } }); </script> </body> </html>
參考資料：