首页 > 文章 > 前端

JS导出Excel的几种实用方法

时间：2025-08-14 16:59:31 338浏览收藏

还在为JavaScript导出Excel而烦恼吗？本文详解JS导出Excel的几种方法，助你轻松应对各种场景。通常，前端会选择SheetJS结合FileSaver.js，实现客户端直接将JSON数据转换为.xlsx文件，无需后端参与，提升响应速度，减轻服务器压力。但面对大数据量或复杂格式，需考虑后端导出或Web Workers分线程处理，以优化性能。SheetJS支持操作单元格对象设置样式、列宽、合并单元格、添加公式及多工作表管理，满足定制化需求。最终方案需综合数据规模、复杂度、性能和安全性权衡。掌握这些技巧，让你的Excel导出功能更加高效、稳定！

JavaScript在浏览器端导出Excel文件通常使用SheetJS（js-xlsx）结合FileSaver.js实现，该方案适用于数据量不大、格式简单的场景，能直接在客户端将JSON数据转换为.xlsx文件并触发下载，无需后端参与，提升响应速度并减轻服务器压力；但对于大数据量或复杂格式（如图表、宏、多工作表样式）需求，则可能面临内存占用高、UI阻塞等问题，此时应考虑后端导出或采用Web Workers分线程处理以优化性能，同时可通过分页、数据过滤或混合策略平衡用户体验与系统负载，SheetJS还支持通过操作单元格对象设置样式、列宽、合并单元格、添加公式及多工作表管理，满足多数前端导出的定制化需求，最终方案选择需综合数据规模、复杂度、性能和安全性权衡。

js 怎样导出Excel文件

JavaScript 导出 Excel 文件，通常我们会在浏览器端借助一些成熟的库来完成，比如 SheetJS（也常被称为 js-xlsx），它能够直接在客户端生成 .xlsx 文件，省去了与后端交互的麻烦，对于一些数据量不大、格式要求不那么复杂的场景，这几乎是首选，而且用户体验也挺直接的。

在浏览器端，要实现 JavaScript 导出 Excel 文件，最常见的做法就是利用 SheetJS 这样的库。它能把前端的数据结构（比如数组或JSON对象数组）转换成Excel能识别的二进制格式，然后通过浏览器提供的下载能力，让用户直接保存文件。

// 假设你的数据是这样的
const data = [
  { "姓名": "张三", "年龄": 30, "城市": "北京" },
  { "姓名": "李四", "年龄": 25, "城市": "上海" },
  { "姓名": "王五", "年龄": 35, "城市": "广州" }
];

// 引入 SheetJS 和 FileSaver.js (通常通过CDN或npm安装)
// 
// 

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可能遇到的性能瓶颈与优化策略

前端导出Excel在数据量不大时表现出色，但一旦数据规模上升，比如达到几万甚至几十万行，性能问题就会凸显出来。最直接的瓶颈是内存消耗和UI阻塞。

首先是内存。JavaScript处理大型数组或对象时，这些数据会直接占用浏览器进程的内存。SheetJS在将数据转换为Excel二进制格式的过程中，也需要构建内存中的数据结构。当数据量过大，浏览器内存占用飙升，轻则导致页面卡顿，重则直接崩溃。

其次是UI阻塞。JavaScript是单线程的，当执行像XLSX.write()这样耗时较长的同步操作时，它会阻塞主线程，导致页面失去响应，用户会感觉浏览器“假死”了。

针对这些问题，有一些优化策略可以尝试：

分批处理与数据流（Streaming）：SheetJS本身在处理数据时，对于json_to_sheet这种方法，会一次性加载所有数据。对于超大数据量，可以考虑更底层的API，或者将数据分块，但客户端的内存限制依然存在。更实际的思路是，如果数据实在太大，就应该考虑将部分处理工作或全部处理工作交由后端完成，后端可以更好地利用数据流技术来避免一次性加载所有数据。

Web Workers：这是前端处理耗时任务的利器。Web Worker允许JavaScript在后台线程中运行，不会阻塞主线程。你可以将数据转换和Excel文件生成（XLSX.utils.json_to_sheet和XLSX.write）的逻辑放在Web Worker中执行。当Worker完成任务后，再将生成的二进制数据传递回主线程，然后由主线程调用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导出中的复杂格式、样式和多工作表需求？

仅仅导出纯粹的数据表格，很多时候是远远不够的。实际业务中，我们经常需要对Excel文件进行复杂的定制，比如设置单元格样式、调整列宽、合并单元格、添加公式，甚至在一个文件中包含多个工作表。SheetJS库提供了丰富的API来满足这些高级需求。

单元格样式和格式： 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'（formula）。

// 在某个单元格写入公式，例如 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文件，满足大部分业务场景的定制化需求。不过，越复杂的定制，代码量和理解成本也越高，这也是需要权衡的地方。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~