登录
首页 >  文章 >  前端

HTML表格导出Excel如何重命名？

时间：2025-10-05 12:18:34 290浏览 收藏

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《HTML 表格导出 Excel 如何改名？》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！


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

本文将介绍如何通过 JavaScript 修改将 HTML 表格导出为 Excel 文件时的默认文件名。我们将提供修改后的代码示例，并详细解释如何利用 标签的 download 属性来实现自定义文件名下载，从而避免文件总是以 "download.xls" 命名的困扰。

在 Web 开发中，经常需要将 HTML 表格导出为 Excel 文件。常见的实现方式是利用 data:application/vnd.ms-excel;base64 URI scheme 来模拟文件下载。然而，默认情况下，导出的文件名通常为 "download.xls"，这在实际应用中往往不够灵活。本文将详细介绍如何修改 JavaScript 代码，以便在导出 Excel 文件时自定义文件名。

修改 JavaScript 代码

核心在于使用 标签的 download 属性。该属性允许我们指定下载文件的名称。以下是修改后的 JavaScript 代码：

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(); // 触发下载
}

代码解释：

  1. 创建 元素： var a = document.createElement('a'); 创建一个新的 元素，用于触发下载。
  2. 设置 href 属性： a.href = uri + base64(format(template, ctx)); 将 元素的 href 属性设置为包含 Excel 数据的 Data URI。
  3. 设置 download 属性： a.download = name + '.xls'; 这是关键的一步。download 属性指定了下载文件的名称。这里使用了传入的 name 参数，并追加了 .xls 扩展名。
  4. 触发 click 事件： a.click(); 模拟点击 元素，从而触发下载。

使用示例

假设你的 HTML 表格的 ID 为 "myTable"，并且你想将导出的 Excel 文件命名为 "SalesReport"。你可以这样调用 tableToExcel 函数：

<button onclick="tableToExcel('myTable', 'SalesReport')">导出 Excel</button>

注意事项

总结

通过使用 标签的 download 属性，我们可以轻松地在导出 HTML 表格到 Excel 文件时自定义文件名。这种方法简单易用，并且在大多数现代浏览器中都能正常工作。希望本文能够帮助你解决导出 Excel 文件时文件名的问题。

理论要掌握，实操不能落！以上关于《HTML表格导出Excel如何重命名？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

前往漫画官网入口并下载 ➜
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>