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

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

具体步骤

1. 创建 tableToExcel 函数： 该函数接收两个参数：table (HTML表格的ID或元素本身) 和 name (期望的文件名)。

2. 构建 Data URI： 使用 data:application/vnd.ms-excel;base64,... 格式的Data URI来表示Excel数据。这部分代码与原始方案基本相同，负责将HTML表格转换为Excel可识别的格式。

3. 创建 标签： 使用 document.createElement('a') 创建一个新的 标签。

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

4. 设置 href 属性： 将 标签的 href 属性设置为之前构建的Data URI。

5. 设置 download 属性： 这是关键一步。将 标签的 download 属性设置为期望的文件名，例如 name + '.xls'。

   

   Magician

   Figma插件，AI生成图标、图片和UX文案

   下载

6. 触发下载： 使用 a.click() 模拟点击 标签，从而触发下载。

示例代码

function tableToExcel(table, name) {
    var uri = 'data:application/vnd.ms-excel;base64,',
        template = '{table}',
        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. 引入代码： 将上述 JavaScript 代码添加到你的 HTML 文件中（

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

   导出Excel
   
       
   
           
   
               
   姓名
               
   年龄
           
       
       
   
           
   
               
   张三
               
   25
           
           
   
               
   李四
               
   30
           
       
   

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

注意事项

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

总结

通过使用 HTML5 的 download 属性，我们可以轻松地自定义 HTML 表格导出到 Excel 时的文件名。 这种方法简单易用，能够满足大部分基本需求。 对于更复杂的需求，可能需要考虑使用更专业的 Excel 生成库。