第一段引用上面的摘要：
本文档旨在提供一个使用 JavaScript 将 HTML 表格导出为 Excel 文件，并允许用户自定义文件名的解决方案。通过修改现有的 tableToExcel 函数，我们可以创建一个可复用的方法，方便地将网页上的表格数据导出为 Excel 格式，并根据需要设置不同的文件名，避免默认的 “download.xls” 命名。
实现方法
核心在于修改原有的 tableToExcel 函数，使其创建一个 <a> 标签，并将数据 URI 设置为 href 属性，同时设置 download 属性为期望的文件名。 通过程序触发该链接的点击事件，从而实现下载。
以下是修改后的 tableToExcel 函数：
立即学习“Java免费学习笔记（深入）”；
function tableToExcel(table, name) { var uri = 'data:application/vnd.ms-excel;base64,'; var 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"><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><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><body><table>{table}</table></body></html>'; var base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))); }; var format = function (s, c) { return s.replace(/{(w+)}/g, function (m, p) { return c[p]; }); }; if (!table.nodeType) table = document.getElementById(table); var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }; var a = document.createElement('a'); a.href = uri + base64(format(template, ctx)); a.download = name + '.xls'; // 设置下载的文件名 a.click(); // 触发下载 }
代码解释：
- uri: 定义了数据 URI 的前缀，指定了 MIME 类型为 application/vnd.ms-excel，表示 Excel 文件。
- template: 定义了 Excel 文件的 HTML 模板，包含了必要的 XML 命名空间声明和表格结构。 charset=UTF-8 保证中文内容正常显示。
- base64: 将字符串转换为 Base64 编码。
- format: 使用传入的上下文对象替换模板中的占位符。
- table: 接收 HTML 表格的 ID 或元素本身。
- name: 接收导出的 Excel 文件名。
- a: 创建一个 <a> 元素，用于触发下载。
- a.href: 设置 <a> 元素的 href 属性为包含表格数据的 Data URI。
- a.download: 设置 <a> 元素的 download 属性为指定的文件名，浏览器会使用该文件名保存文件。
- a.click(): 模拟点击 <a> 元素，触发下载。
使用示例
假设你的 HTML 中有一个 ID 为 “myTable” 的表格，你可以这样调用 tableToExcel 函数：
<!DOCTYPE html> <html> <head> <title>Export to Excel</title> </head> <body> <table id="myTable"> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>30</td> </tr> <tr> <td>Jane Smith</td> <td>25</td> </tr> </tbody> </table> <button onclick="tableToExcel('myTable', 'MyExcelFile')">Export to Excel</button> <script> function tableToExcel(table, name) { var uri = 'data:application/vnd.ms-excel;base64,'; var 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"><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><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><body><table>{table}</table></body></html>'; var base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))); }; var format = function (s, c) { return s.replace(/{(w+)}/g, function (m, p) { return c[p]; }); }; if (!table.nodeType) table = document.getElementById(table); var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }; var a = document.createElement('a'); a.href = uri + base64(format(template, ctx)); a.download = name + '.xls'; // 设置下载的文件名 a.click(); // 触发下载 } </script> </body> </html>
点击 “Export to Excel” 按钮后，将会下载一个名为 “MyExcelFile.xls” 的 Excel 文件。
注意事项
- 兼容性: 这种方法在现代浏览器中工作良好。 对于旧版本的浏览器，可能需要使用 Flash 或其他插件来实现导出功能。
- 数据量: 对于非常大的表格，这种方法可能会导致性能问题，因为整个表格数据会被编码为 Base64 字符串。 在这种情况下，考虑使用服务器端解决方案来生成 Excel 文件。
- 样式: 这种方法只会导出表格的结构和数据，不会保留表格的样式（例如颜色、字体等）。 如果需要保留样式，则需要使用更复杂的库，例如 xlsx 或 exceljs。
- 文件名后缀: 虽然这里使用了 .xls 后缀，但实际生成的是 HTML 格式的 Excel 文件。 现代版本的 Excel 能够正确打开这种文件。 如果需要生成真正的 .xlsx 文件，则需要使用专门的 Excel 文件生成库。
总结
通过修改 JavaScript 函数，我们可以轻松地将 HTML 表格导出为 Excel 文件，并自定义文件名。 这种方法简单易用，适用于小型表格数据的导出。 对于大型表格或需要更多功能的场景，建议使用更专业的 Excel 文件生成库或服务器端解决方案。
相关标签：
javascript excel java html js node 浏览器 app office win 点击事件 JavaScript html 命名空间 format xml 字符串 对象 事件 href table excel