第一段引用上面的摘要：
本文档旨在提供一个使用 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 文件生成库或服务器端解决方案。
相关标签：
评论（已关闭）
评论已关闭