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

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

霞舞

发布： 2025-09-14 21:26:00

原创

1030人浏览过

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

修改 HTML 表格导出 Excel 时的文件名

本文旨在解决将 HTML 表格导出为 Excel 文件时，默认文件名总是 "download" 的问题。通过修改 JavaScript 代码，利用 <a> 标签的 download 属性，允许用户自定义导出的 Excel 文件名。

核心思路：

核心在于创建一个 <a> 标签，设置其 href 属性为 Excel 数据的 Data URI，然后设置 download 属性为期望的文件名，最后模拟点击该链接，触发下载。

修改后的 JavaScript 代码：

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

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

登录后复制

代码解释：

a.download = name + '.xls';: 这行代码是关键。它创建了一个 <a> 标签，并将 download 属性设置为 name + '.xls'。name 参数是传递给 tableToExcel 函数的文件名，.xls 是 Excel 文件的扩展名。 download 属性告诉浏览器，当用户点击链接时，应该下载链接指向的资源，并使用指定的文件名。
a.click();: 这行代码模拟点击 <a> 标签，触发下载操作。

使用方法：

图改改

在线修改图片文字

455

查看详情

在 HTML 中，你可以使用一个按钮来触发导出功能：

<button onclick="tableToExcel('yourTableId', 'MyExcelFile')">导出到 Excel</button>

<table id="yourTableId">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>

登录后复制

将 yourTableId 替换为你的表格的 ID，MyExcelFile 替换为你想要的文件名。当点击按钮时，将会下载一个名为 MyExcelFile.xls 的 Excel 文件。

注意事项：