如何在将HTML表格导出到Excel时更改文件名？-html教程-PHP中文网

如何在将HTML表格导出到Excel时更改文件名？

DDD

发布： 2025-09-14 21:52:01

原创

906人浏览过

如何在将html表格导出到excel时更改文件名？

本文档详细介绍了如何在将HTML表格导出为Excel文件时，自定义下载的文件名。通过创建一个动态的 <a> 标签，并设置其 download 属性，可以轻松地控制导出Excel文件的名称，从而避免默认的 "download.xls" 命名方式。

实现原理

核心在于利用HTML5的 download 属性。这个属性允许我们指定下载链接的文件名。通过创建一个 <a> 标签，设置其 href 属性为包含Excel数据的Data URI，并设置 download 属性为期望的文件名，就可以实现自定义文件名下载。

具体步骤

创建 tableToExcel 函数： 该函数接收两个参数：table (HTML表格的ID或元素本身) 和 name (期望的文件名)。
构建 Data URI： 使用 data:application/vnd.ms-excel;base64,... 格式的Data URI来表示Excel数据。这部分代码与原始方案基本相同，负责将HTML表格转换为Excel可识别的格式。
创建 <a> 标签： 使用 document.createElement('a') 创建一个新的 <a> 标签。

立即学习“前端免费学习笔记（深入）”；
设置 href 属性： 将 <a> 标签的 href 属性设置为之前构建的Data URI。
设置 download 属性： 这是关键一步。将 <a> 标签的 download 属性设置为期望的文件名，例如 name + '.xls'。

图改改
在线修改图片文字

455

查看详情
触发下载： 使用 a.click() 模拟点击 <a> 标签，从而触发下载。

示例代码

function tableToExcel(table, name) {
    var uri = 'data:application/vnd.ms-excel;base64,',
        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>',
        base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },
        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();
}

登录后复制

使用方法

引入代码： 将上述 JavaScript 代码添加到你的 HTML 文件中（<script> 标签内）。

调用函数： 在需要导出表格时，调用 tableToExcel 函数，并传入表格的 ID 和期望的文件名。

<button onclick="tableToExcel('myTable', '导出数据')">导出Excel</button>
<table id="myTable">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

登录后复制

在这个例子中，点击“导出Excel”按钮会将 ID 为 myTable 的表格导出为名为 "导出数据.xls" 的 Excel 文件。

注意事项

兼容性： download 属性是 HTML5 的特性，在一些老旧浏览器中可能不支持。可以考虑使用 polyfill 来提供兼容性支持。
文件名编码： 确保文件名使用安全的编码方式，避免出现乱码问题。
安全性： 由于 Data URI 包含表格的完整数据，请注意不要将敏感数据暴露在客户端代码中。
文件类型： 导出的文件本质上是 HTML 格式的 Excel 文件，在某些情况下可能存在兼容性问题。如果需要生成真正的 .xlsx 文件，建议使用服务器端技术或专门的 JavaScript 库。
表格样式： 导出的 Excel 文件可能会丢失部分表格样式。如果需要保留更复杂的样式，需要使用更高级的 Excel 生成库。