-
使用 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 两种方式，请各位根据自己的需求进行选择。