如何将HTML表格导出到Excel并自定义文件名
在前端开发中，经常会遇到需要将页面中的HTML表格数据导出为Excel文件的需求，同时用户往往希望导出的文件能够使用自定义的文件名，而不是默认生成的名称。本文将介绍几种常见的实现方案，帮助开发者完成这一功能。
方案概述
实现HTML表格导出到Excel并自定义文件名，核心思路是：先获取表格的HTML内容，将其转换为Excel可识别的格式，再通过动态创建下载链接的方式触发文件下载，在下载过程中指定自定义的文件名。常见的实现方式有两种：基于TableExport库的实现和原生JavaScript实现。
方案一：使用TableExport库实现
TableExport是一个轻量级的前端库，专门用于实现HTML表格导出为多种格式（包括Excel、CSV、TXT等）的功能，并且支持自定义导出文件名，使用方式非常简单。
引入依赖
首先在页面中引入TableExport库及其依赖的FileSaver.js和xlsx库，示例引用地址如下：
https://www.ipipp.com/tableexport/tableexport.min.js
https://www.ipipp.com/filesaver/filesaver.min.js
https://www.ipipp.com/xlsx/xlsx.min.js
实现代码
假设页面中有一个id为targetTable的HTML表格，我们需要将其导出为Excel文件，并且自定义文件名为"用户数据表.xlsx"，代码如下：
// 获取目标表格元素
const table = document.getElementById('targetTable');
// 初始化TableExport实例，配置导出格式和文件名
const exportInstance = new TableExport(table, {
// 指定导出格式为xlsx（Excel格式）
formats: ['xlsx'],
// 自定义导出的文件名，不需要加后缀，库会自动添加
filename: '用户数据表',
// 可选配置：是否显示导出按钮
exportButtons: true
});上述代码中，filename配置项就是用来设置导出文件的名称，库会自动根据选择的格式添加对应的后缀，比如这里选择xlsx格式，最终导出的文件就是"用户数据表.xlsx"。
方案二：原生JavaScript实现
如果不想引入第三方库，也可以使用原生JavaScript实现该功能，核心是通过Blob对象处理表格内容，再手动触发下载并指定文件名。
实现步骤
获取HTML表格的innerHTML内容，拼接Excel格式所需的XML头信息
将拼接后的内容转换为Blob对象，指定对应的MIME类型
动态创建a标签，设置href为Blob对象的URL，设置download属性为自定义文件名
触发a标签的点击事件完成下载，最后移除创建的a标签
实现代码
同样以id为targetTable的表格为例，导出为自定义文件名的Excel文件，代码如下：
function exportTableToExcel(tableId, fileName) {
// 获取表格元素
const table = document.getElementById(tableId);
if (!table) {
console.error('未找到对应的表格元素');
return;
}
// 获取表格的HTML内容
let tableHTML = table.outerHTML;
// 拼接Excel格式的XML头信息，确保Excel能正确识别内容
const excelHTML = `
<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">
<head>
<meta charset="UTF-8">
<!--[if gte mso 9]>
<xml>
<x:ExcelWorkbook>
<x:ExcelWorksheets>
<x:ExcelWorksheet>
<x:Name>${fileName}</x:Name>
<x:WorksheetOptions>
<x:DisplayGridlines/>
</x:WorksheetOptions>
</x:ExcelWorksheet>
</x:ExcelWorksheets>
</x:ExcelWorkbook>
</xml>
<![endif]-->
</head>
<body>
${tableHTML}
</body>
</html>
`;
// 创建Blob对象，指定MIME类型为Excel格式
const blob = new Blob([excelHTML], {
type: 'application/vnd.ms-excel;charset=utf-8'
});
// 创建下载链接
const downloadLink = document.createElement('a');
// 生成Blob对象的URL
const url = URL.createObjectURL(blob);
downloadLink.href = url;
// 设置下载的文件名，包含.xlsx后缀
downloadLink.download = `${fileName}.xls`;
// 将a标签添加到页面中
document.body.appendChild(downloadLink);
// 触发点击事件完成下载
downloadLink.click();
// 释放URL对象，移除a标签
URL.revokeObjectURL(url);
document.body.removeChild(downloadLink);
}
// 调用函数，导出表格，自定义文件名为"员工信息表"
exportTableToExcel('targetTable', '员工信息表');上述代码中，download属性就是用来指定下载文件的名称，这里直接将自定义的文件名赋值给该属性，即可实现导出时更改文件名的效果。需要注意的是，这种原生方式生成的Excel文件后缀为.xls，兼容性更好，如果需要生成.xlsx格式，可以结合xlsx库处理内容。
注意事项
如果使用原生方式导出，表格中的特殊字符（如
<,>, &）需要进行转义，避免生成的Excel文件格式错误自定义文件名时，尽量避免使用特殊字符（如/, \, :, *, ?, ", <, >, |等），否则可能导致下载失败
第三方库方案的兼容性更好，支持更复杂的表格样式和数据处理，原生方案更轻量，适合简单场景使用
总结
无论是使用第三方库还是原生JavaScript，实现HTML表格导出到Excel并自定义文件名的核心都是：在处理导出逻辑时，通过对应的配置项或者download属性指定自定义的文件名。开发者可以根据项目的实际需求，选择合适的实现方案。