前端如何用JS将表格数据导出为Excel文件？

前端导出Excel表格数据并不是一个高深操作，它的本质是借助浏览器生成文件的能力，把内存中的数据序列化成Excel可以打开的内容，再通过下载行为落到本地。整个过程不需要后端参与，也不必让用户安装Office插件。接下来会从文件生成和下载的底层原理讲起，逐步给出可以直接运行的代码示例。

基于Blob的原生导出方案

导出逻辑的核心是 Blob 和 <a> 元素的 download 属性。Blob 可以承载二进制或文本数据，URL.createObjectURL 会为这段数据生成一个临时的对象地址，把这个地址赋给动态创建的 <a> 元素的 href，再调用 click 方法触发下载。下载结束后通过 URL.revokeObjectURL 释放内存，避免页面长时间占用资源。这套流程完全依赖浏览器自身能力，不需要任何第三方库。

为了导出 Excel 可以识别的内容，可以构造 HTML 表格字符串，然后声明 MIME 类型为 application/vnd.ms-excel。虽然浏览器保存的文件扩展名是 .xls，其本质仍是一个 HTML 文档，但 Excel 打开时能解析出表格结构。下面这个函数接收 <table> 元素的 id 和文件名，用 outerHTML 拿到表格结构，拼上完整 HTML 头部，再交给 Blob 下载。

function exportTableToExcel(tableId, fileName) {
    var table = document.getElementById(tableId);
    var html = table.outerHTML;
    var fullHtml = '<html><head><meta charset="UTF-8"></head><body>' + html + '</body></html>';
    var blob = new Blob([fullHtml], { type: 'application/vnd.ms-excel' });
    var link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = fileName + '.xls';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
}

这个方法的优点是零依赖、实现简单，很适合内部管理后台、临时导出当前页面表格等场景。不过它也有限制：Excel 打开这种文件时可能会提示格式与扩展名不一致，点击是即可正常查看。另外样式支持较弱，无法生成多工作表，公式和复杂格式基本不可用。如果数据来自 JSON 而不是现成的 <table> 元素，可以先手动拼接表格字符串再导出，或者使用下一节的 SheetJS 方案。

使用 SheetJS 导出标准 xlsx

SheetJS 是社区使用非常广泛的前端 Excel 处理库，官方包名通常写作 xlsx，同时支持浏览器和 Node 环境，能读写 xlsx、xls、csv 等多种格式。在前端导出场景里，最常用的几个 API 是 XLSX.utils.json_to_sheet、XLSX.utils.book_new、XLSX.utils.book_append_sheet 和 XLSX.write。引入官方 CDN 或通过 npm 安装后，全局会暴露 XLSX 对象。

下面的例子把 JSON 数组转换成标准 .xlsx 文件。函数接收数据数组，每个对象的键会作为表头。生成的文件类型声明为 application/vnd.openxmlformats-officedocument.spreadsheetml.sheet，这是 Office 2007 之后 Excel 文件的 MIME 类型。代码里使用 XLSX.write 生成 array 类型数据，手动包装成 Blob 再触发下载，这样能更清楚地看到完整链路。

function exportJsonToExcel(data, fileName) {
    var worksheet = XLSX.utils.json_to_sheet(data);
    var workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
    var excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    var blob = new Blob([excelBuffer], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    });
    var link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = fileName + '.xlsx';
    link.click();
    URL.revokeObjectURL(link.href);
}

SheetJS 生成的是真正意义的 xlsx 文件，能用 WPS、Microsoft Excel、Google Sheets 正常打开。它支持多工作表、公式、单元格格式、列宽等高级特性，数据源既可以是 JSON 数组，也可以直接通过 XLSX.utils.table_to_sheet 从页面表格转换。由于 xlsx 底层使用 zip 压缩，大数据量导出时文件体积也明显小于 HTML 方案。如果需要更精细的控制，比如设置每列宽度，可以在工作表对象上追加 ['!cols'] 配置。

CSV 导出与方案对比

CSV 并不是真正的 Excel 文件，但几乎所有表格软件都能打开它。纯文本结构让 CSV 生成速度很快，文件体积小，非常适合数据量较大或者只需要导出纯数据、不关心格式的场景。前端生成 CSV 时有两个容易忽略的问题：中文乱码和字段转义。中文乱码通常可以通过在字符串最前面加上 BOM 标记 \uFEFF 解决，这样 Excel 和 WPS 会按 UTF-8 解析；字段转义则是为了避免内容里的逗号或引号破坏列结构。

下面的函数接收行数组，自动取第一条数据的键作为表头。如果某个字段是字符串并且包含逗号、引号或换行，需要用双引号包裹，并把内部引号替换为两个引号。返回的 CSV 字符串加上 BOM 后，再通过 Blob 下载为 .csv 文件。

function exportToCsv(rows, fileName) {
    var header = Object.keys(rows[0]).join(',');
    var body = rows.map(function(row) {
        return Object.keys(row).map(function(key) {
            var value = row[key];
            if (typeof value === 'string' && (value.indexOf(',') > -1 || value.indexOf('"') > -1 || value.indexOf('\n') > -1)) {
                value = '"' + value.replace(/"/g, '""') + '"';
            }
            return value;
        }).join(',');
    }).join('\n');
    var csv = '\uFEFF' + header + '\n' + body;
    var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    var link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = fileName + '.csv';
    link.click();
    URL.revokeObjectURL(link.href);
}

三种方案各有适用边界。原生 HTML 方案没有依赖，但格式支持有限；SheetJS 功能最完整，但需要引入额外库；CSV 性能最好，却不适合有复杂格式需求的报表。实际项目中可以先评估导出内容是否需要样式或多工作表，再决定采用哪种实现。另需注意移动端浏览器对 download 属性的支持差异，尤其是 iOS Safari 可能不会直接触发下载，必要时可以结合 FileSaver 之类的兼容层处理。

最后需要提醒的是，上述下载逻辑都依赖浏览器对 Blob 和 URL.createObjectURL 的支持，现代浏览器基本没有兼容性问题。导出内容如果包含用户输入，建议对特殊字符做过滤或转义，避免公式注入风险。掌握这几种方式后，大多数前端导出 Excel 的需求都能找到合适的落地路径。

前端导出ExcelJavaScript导出表格Blob导出修改时间：2026-10-06 06:04:33