javascript在浏览器端导出excel文件通常使用sheetjs（js-xlsx）结合filesaver.js实现，该方案适用于数据量不大、格式简单的场景，能直接在客户端将json数据转换为.xlsx文件并触发下载，无需后端参与，提升响应速度并减轻服务器压力；但对于大数据量或复杂格式（如图表、宏、多工作表样式）需求，则可能面临内存占用高、ui阻塞等问题，此时应考虑后端导出或采用web workers分线程处理以优化性能，同时可通过分页、数据过滤或混合策略平衡用户体验与系统负载，sheetjs还支持通过操作单元格对象设置样式、列宽、合并单元格、添加公式及多工作表管理，满足多数前端导出的定制化需求，最终方案选择需综合数据规模、复杂度、性能和安全性权衡。
JavaScript 导出 Excel 文件，通常我们会在浏览器端借助一些成熟的库来完成，比如
SheetJS
js-xlsx
.xlsx
在浏览器端，要实现 JavaScript 导出 Excel 文件，最常见的做法就是利用
SheetJS
// 假设你的数据是这样的
const data = [
{ "姓名": "张三", "年龄": 30, "城市": "北京" },
{ "姓名": "李四", "年龄": 25, "城市": "上海" },
{ "姓名": "王五", "年龄": 35, "城市": "广州" }
];
// 引入 SheetJS 和 FileSaver.js (通常通过CDN或npm安装)
// <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
// <script src="https://unpkg.com/file-saver@2.0.5/dist/FileSaver.min.js"></script>
function exportToExcel(jsonData, fileName = '导出数据.xlsx') {
// 1. 创建一个工作表
// XLSX.utils.json_to_sheet 可以将 JSON 数组转换为工作表
const ws = XLSX.utils.json_to_sheet(jsonData);
// 2. 创建一个工作簿
// 工作簿是Excel文件的顶层结构，可以包含多个工作表
const wb = XLSX.utils.book_new();
// 3. 将工作表添加到工作簿中，并命名为 "Sheet1"
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
// 4. 将工作簿写入二进制数据
// type: 'array' 表示输出为字节数组
const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
// 5. 使用 FileSaver.js 保存文件
// new Blob([wbout], {type: 'application/octet-stream'}) 创建一个二进制大对象
// saveAs() 触发下载
saveAs(new Blob([wbout], { type: 'application/octet-stream' }), fileName);
}
// 调用示例
// exportToExcel(data);这段代码展示了核心流程：数据转工作表，工作表加到工作簿，然后工作簿导出为文件。这里用到了
FileSaver.js
在决定Excel导出方案时，前端导出和后端导出是两种截然不同的路径，各自有其适用场景和优缺点。
前端导出，就像我们上面看到的，它最大的优势在于“即时性”和“无服务器压力”。数据直接在用户的浏览器里处理、生成并下载，整个过程不占用服务器资源，对于中小规模的数据导出，响应速度非常快。想象一下，用户点击一个按钮，文件立刻就下来了，这种体验是很流畅的。而且，它能减少服务器的负载，对于高并发的系统来说，这一点尤其重要。但它的缺点也很明显，浏览器毕竟是客户端环境，内存和CPU资源有限，如果数据量特别大（比如几十万行），或者需要复杂的格式、图表、宏等，前端处理起来就可能变得非常慢，甚至导致浏览器崩溃。另外，一些非常复杂的Excel特性，前端库可能支持不完善，或者实现起来非常麻烦。
后端导出则完全不同。数据在服务器端处理，服务器通常有更强大的计算能力和内存资源，可以轻松处理海量数据。对于需要从数据库查询大量数据、进行复杂计算、生成复杂报表（包含多张工作表、复杂的样式、图表、数据透视表等）的场景，后端导出是更稳妥的选择。服务器端有更丰富的库和工具（如 Java 的 Apache POI、Python 的 openpyxl、Node.js 的 exceljs 等），能更全面、更精确地控制Excel的各种高级特性。它的缺点是，每次导出都需要向服务器发送请求，服务器处理完成后再将文件返回给客户端，这会增加服务器的负载，并且网络传输也需要时间，用户可能需要等待。如果导出频率高、数据量大，服务器的压力就会比较大。
所以，选择哪种方式，其实是基于“需求”和“资源”的平衡。如果只是简单的列表导出，数据量不大，前端导出无疑是高效便捷的选择。但如果涉及到大数据量、复杂报表、安全性要求高（不希望原始数据在前端完全暴露）或者需要与其他后端系统深度集成，那么后端导出才是更合适的方案。有时候，甚至可以考虑混合方案：小数据量前端直接导出，大数据量则提示用户转为后台异步生成。
前端导出Excel在数据量不大时表现出色，但一旦数据规模上升，比如达到几万甚至几十万行，性能问题就会凸显出来。最直接的瓶颈是内存消耗和UI阻塞。
首先是内存。JavaScript处理大型数组或对象时，这些数据会直接占用浏览器进程的内存。
SheetJS
其次是UI阻塞。JavaScript是单线程的，当执行像
XLSX.write()
针对这些问题，有一些优化策略可以尝试：
分批处理与数据流（Streaming）：
SheetJS
json_to_sheet
Web Workers：这是前端处理耗时任务的利器。Web Worker允许JavaScript在后台线程中运行，不会阻塞主线程。你可以将数据转换和Excel文件生成（
XLSX.utils.json_to_sheet
XLSX.write
FileSaver.js
// 假设这是你的 worker.js 文件内容
// importScripts('https://unpkg.com/xlsx/dist/xlsx.full.min.js'); // Worker中引入SheetJS
// onmessage = function(e) {
// const { jsonData, fileName } = e.data;
// const ws = XLSX.utils.json_to_sheet(jsonData);
// const wb = XLSX.utils.book_new();
// XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
// const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
// postMessage({ wbout: wbout, fileName: fileName }); // 将结果传回主线程
// };
// 主线程代码
// const worker = new Worker('worker.js');
// worker.onmessage = function(e) {
// const { wbout, fileName } = e.data;
// saveAs(new Blob([wbout], { type: 'application/octet-stream' }), fileName);
// // 导出完成，隐藏加载动画等
// };
// worker.postMessage({ jsonData: largeData, fileName: 'large_data.xlsx' });这种方式能显著改善用户体验，但并不能解决内存消耗的根本问题。
数据过滤与分页：如果用户只需要导出部分数据，可以提供筛选或分页功能，只导出当前显示的数据，或者让用户选择导出范围，减少单次导出的数据量。
告知用户等待或提供后端导出选项：对于特别大的数据量，坦诚地告诉用户导出可能需要一段时间，并显示加载动画。更负责任的做法是，当数据量超过某个阈值时，直接提示用户“数据量较大，请使用后台导出功能”或“请联系管理员获取完整数据”，将任务转交给服务器端处理。这是一种务实且对用户友好的策略，避免了前端强行处理超出其能力范围的任务。
仅仅导出纯粹的数据表格，很多时候是远远不够的。实际业务中，我们经常需要对Excel文件进行复杂的定制，比如设置单元格样式、调整列宽、合并单元格、添加公式，甚至在一个文件中包含多个工作表。
SheetJS
单元格样式和格式：
SheetJS
s
font
fill
border
alignment
numFmt
// 示例：设置表头加粗，并设置数字格式
const ws = XLSX.utils.json_to_sheet(jsonData);
// 假设第一行是表头
const range = XLSX.utils.decode_range(ws['!ref']);
for (let C = range.s.c; C <= range.e.c; ++C) {
const cell = ws[XLSX.utils.encode_cell({r:0, c:C})]; // 获取表头单元格
if (cell) {
cell.s = { // 设置样式
font: { bold: true, color: { rgb: "FF0000" } }, // 红色加粗字体
alignment: { horizontal: "center" } // 居中对齐
};
}
}
// 设置某一列为货币格式
// 假设 '金额' 列是第三列 (索引为2)
for (let R = range.s.r + 1; R <= range.e.r; ++R) { // 从第二行开始
const cell = ws[XLSX.utils.encode_cell({r:R, c:2})]; // 假设 '金额' 在第三列
if (cell && cell.t === 'n') { // 确保是数字类型
cell.s = { numFmt: '"¥"#,##0.00' }; // 货币格式
}
}通过直接修改
ws
调整列宽和行高： 工作表对象（
ws
!cols
ws['!cols'] = [
{ wch: 15 }, // 第一列宽度15个字符
{ wch: 10 }, // 第二列宽度10个字符
{ wch: 20 } // 第三列宽度20个字符
];
// 类似地，`!rows`可以设置行高，但使用较少。合并单元格： 工作表对象（
ws
!merges
{s: {r: 开始行, c: 开始列}, e: {r: 结束行, c: 结束列}}ws['!merges'] = [
{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } } // 合并第一行前三列 (A1:C1)
];
// 注意：合并单元格后，数据通常只放在合并区域的左上角单元格中。添加公式： 你可以在单元格中直接写入公式字符串，并将其类型设置为
'f'
// 在某个单元格写入公式，例如 D2 = SUM(A2:C2)
const formulaCell = { f: 'SUM(A2:C2)' };
XLSX.utils.sheet_add_aoa(ws, [[formulaCell]], {origin: 'D1'}); // 添加到D1位置
// 或者直接修改现有单元格
// ws['D2'] = { t: 'f', f: 'SUM(A2:C2)' };多工作表（Multiple Sheets）： 在一个Excel文件中包含多个工作表非常常见。
SheetJS
wb
const wb = XLSX.utils.book_new();
// 第一个工作表
const ws1_data = [{ id: 1, name: '产品A' }, { id: 2, name: '产品B' }];
const ws1 = XLSX.utils.json_to_sheet(ws1_data);
XLSX.utils.book_append_sheet(wb, ws1, "产品列表"); // 命名为 "产品列表"
// 第二个工作表
const ws2_data = [{ orderId: 'O1', amount: 100 }, { orderId: 'O2', amount: 200 }];
const ws2 = XLSX.utils.json_to_sheet(ws2_data);
XLSX.utils.book_append_sheet(wb, ws2, "订单明细"); // 命名为 "订单明细"
// ... 更多工作表通过这些API的组合运用，即便在前端，也能构建出相当复杂的Excel文件，满足大部分业务场景的定制化需求。不过，越复杂的定制，代码量和理解成本也越高，这也是需要权衡的地方。
以上就是js 怎样导出Excel文件的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
860
收藏
