JavaScript 导出 HTML 表格到 Excel 并自定义文件名-html教程-PHP中文网

JavaScript 导出 HTML 表格到 Excel 并自定义文件名

心靈之曲

发布： 2025-09-14 20:59:00

原创

942人浏览过

javascript 导出 html 表格到 excel 并自定义文件名

第一段引用上面的摘要：

本文档旨在提供一个使用 JavaScript 将 HTML 表格导出为 Excel 文件，并允许用户自定义文件名的解决方案。通过修改现有的 tableToExcel 函数，我们可以创建一个可复用的方法，方便地将网页上的表格数据导出为 Excel 格式，并根据需要设置不同的文件名，避免默认的 "download.xls" 命名。

实现方法

核心在于修改原有的 tableToExcel 函数，使其创建一个 <a> 标签，并将数据 URI 设置为 href 属性，同时设置 download 属性为期望的文件名。通过程序触发该链接的点击事件，从而实现下载。

以下是修改后的 tableToExcel 函数：

立即学习“Java免费学习笔记（深入）”；

酷表ChatExcel

北大团队开发的通过聊天来操作Excel表格的AI工具

查看详情

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 文件生成库。