前端导出Excel表格的JavaScript方案_javascript数据处理-js教程-PHP中文网

前端导出Excel表格的JavaScript方案_javascript数据处理

夢幻星辰

发布： 2025-10-30 23:23:02

原创

514人浏览过

答案：前端导出Excel常用SheetJS生成XLSX文件或Blob构造CSV实现轻量导出，结合UI框架获取数据并触发下载，大数据量建议分页或服务端处理。

前端导出excel表格的javascript方案_javascript数据处理

前端导出 Excel 表格的需求在数据展示类项目中非常常见，比如后台管理系统、报表页面等。实现该功能的关键在于将前端的数据（如数组、JSON）转换为浏览器可下载的 Excel 文件。目前主流的 JavaScript 方案有多种，下面介绍几种实用且广泛使用的方案。

使用 SheetJS (xlsx.js) 生成 Excel 文件

SheetJS 是目前最流行的纯 JavaScript 库之一，支持读写多种电子表格格式，包括 XLSX、CSV 等，兼容性好，适合大多数前端项目。

基本使用步骤如下：

引入库：可通过 npm 安装或 CDN 引入
准备数据：将表格数据整理为二维数组或 JSON 格式
创建工作簿并添加工作表
生成文件并触发下载

示例代码：

import * as XLSX from 'xlsx';
<p>function exportToExcel(data, fileName = 'data.xlsx') {
// data 示例: [{ 姓名: '张三', 年龄: 25 }, { 姓名: '李四', 年龄: 30 }]
const worksheet = XLSX.utils.json_to_sheet(data);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
XLSX.writeFile(workbook, fileName);
}

登录后复制

该方法支持复杂结构，如多列头、合并单元格等，只需调整 worksheet 配置即可。

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

利用 Blob + download 模拟下载 CSV（轻量替代方案）

如果不需要真正的 .xlsx 格式，仅需简单导出为 Excel 可识别的 CSV 文件，可以使用原生 JavaScript 构造 Blob 实现，无需额外依赖。

CSV 在 Excel 中可以直接打开，适用于纯数据导出场景。

实现方式：

function exportToCSV(data, filename = 'data.csv') {
  if (!data || data.length === 0) return;
<p>const headers = Object.keys(data[0]);
const csvContent = [
headers.join(','),
...data.map(row => headers.map(header => <code>"${row[header]}"</code>).join(','))
].join('\n');</p><p>const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', filename);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}

登录后复制

注意添加 \uFEFF 以支持中文字符正确显示。