HTML的table表格匯出為excel的兩種方式
阿新 • • 發佈：2020-09-01
-
使用 a 標籤 download 屬性，將檔名和字尾名拼接下載。
注意：如果是後臺生成的純前端表格可以使用此方法，此方法可以將 table 內的 css 樣式進行保留，不能匯出 td 標籤中 input 輸入框的值。但是可以在匯出前將 input 的值取出並替換在 td 裡面的值即可匯出。
<script type="text/javascript" charset="utf-8"> function base64(content) { return window.btoa(unescape(encodeURIComponent(content))); } function tableToExcel(tableID) { var excelContent = $("#" + tableID).html(); var excelFile = "<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'>"; excelFile += "<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>"; excelFile += "<body><table width='10%' border='1'>"; excelFile += excelContent; excelFile += "</table></body>"; excelFile += "</html>"; var link = "data:application/vnd.ms-excel;base64," + base64(excelFile); var a = document.createElement("a"); var fileName = $("#filename").val(); a.download = fileName + ".xlsx"; a.href = link; a.click(); } </script> -
使用 jquery 的 table2excel 外掛匯出 excel。
注意：此方法可以匯出 td 標籤中 input 輸入框的值，但是不能將 table 內的 css 樣式進行保留。可以更改此外掛原始碼進行 css 樣式編寫。
function table2excel(){ $("#table2excel").table2excel({ // 不被匯出的表格行的class類 exclude: ".noExl", // 匯出的Excel文件的名稱 name: "表格-" + new Date().getTime(), // Excel檔案的名稱 filename: $("#filename").val(), //檔案字尾名 fileext: ".xls", //是否匯出圖片 exclude_img: false, //是否匯出超連結 exclude_links: false, //是否匯出輸入框中的內容 exclude_inputs: false }); }
這是我目前知道的 HTML 表格匯出 excel 兩種方式，請各位根據自己的需求進行選擇。