-
使用 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 兩種方式，請各位根據自己的需求進行選擇。