文章导读

js中如何解析excel

站长 2025年8月15日 1

在javascript中解析excel文件最常用的库是sheetjs（xlsx），它支持多种格式并提供丰富的功能；2. 使用流程包括通过input元素获取文件、用filereader读取内容、调用xlsx.read解析为工作簿对象、再用xlsx.utils.sheet_to_json等方法转换为json或数组；3. 需注意日期类型在excel中以序列号存储，应配置celldates: true以自动转为date对象；4. 合并单元格仅保留左上角值，需通过!merges属性获取合并范围进行额外处理；5. 大文件解析可能导致页面卡顿，可使用web workers将解析任务移至后台线程避免阻塞ui；6. 应使用try-catch包裹解析逻辑以应对文件损坏或格式错误；7. 前端解析适合中小文件、需即时预览或保护隐私的场景，而后端解析更适合超大文件、复杂处理或批量导入；8. 性能优化包括按需加载工作表、选择高效库和合理转换数据结构。

在JavaScript中解析Excel文件，我们通常会借助一些成熟的第三方库。这些库能够帮助我们处理复杂的二进制数据，并将其转换为易于操作的结构化数据，比如JSON数组或二维数组，这在前端数据导入、预览等场景中非常实用。

解决方案

要实现在JS中解析Excel，最常用且功能强大的库莫过于SheetJS，也就是我们常说的

xlsx

库。它的使用流程大致是这样：

获取文件： 用户通常通过
```
<input type="file">
```
选择Excel文件。我们需要监听这个元素的
```
change
```
事件来获取文件对象。
读取文件内容： 使用
```
FileReader
```
API来异步读取文件的内容。通常会选择
```
readAsArrayBuffer
```
或
```
readAsBinaryString
```
方法，因为Excel文件本质上是二进制数据。
解析数据： 将
```
FileReader
```
读取到的数据（
```
ArrayBuffer
```
或
```
binary string
```
）传递给
xlsx
库的
```
read
```
方法。这个方法会返回一个Workbook对象，里面包含了所有工作表的数据。
提取所需数据： 从Workbook对象中，我们可以根据工作表名称或索引获取特定的工作表（Sheet），然后利用
xlsx
提供的工具函数（如
```
XLSX.utils.sheet_to_json
```
或
```
XLSX.utils.sheet_to_array
```
）将工作表数据转换为我们熟悉的JSON数组或二维数组。

这是一个简单的代码示例，演示了如何读取并解析用户选择的第一个Excel工作表：

document.getElementById('excelFile').addEventListener('change', function(e) {     const file = e.target.files[0];     if (!file) {         return;     }      const reader = new FileReader();     reader.onload = function(event) {         const data = new Uint8Array(event.target.result);         const workbook = XLSX.read(data, { type: 'array' });          // 假设我们只关心第一个工作表         const sheetName = workbook.SheetNames[0];         const worksheet = workbook.Sheets[sheetName];          // 将工作表数据转换为JSON数组         const jsonData = XLSX.utils.sheet_to_json(worksheet);         console.log('解析后的数据:', jsonData);          // 如果需要，也可以转换为二维数组，保留原始结构         // const rawData = XLSX.utils.sheet_to_array(worksheet, { header: 1 });         // console.log('原始二维数组:', rawData);     };     reader.readAsArrayBuffer(file); });

别忘了在你的项目中引入SheetJS库，可以通过CDN或者npm安装：

<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>

或者

npm install xlsx

然后

import * as XLSX from 'xlsx';

选择合适的Excel解析库：SheetJS (xlsx) 为何是首选？

在前端JavaScript生态里，要说解析Excel，SheetJS（也就是

xlsx

库）几乎是个绕不开的名字。我个人在处理这类需求时，几乎第一时间就会想到它。这并不是说没有其他选择，而是它实在太全面、太稳定了。

它的兼容性非常好。无论是新版的XLSX（Open XML格式）还是老旧的XLS格式，甚至是CSV，它都能处理得游刃有余。这对于我们实际工作中面对各种来源的文件来说，简直是福音。你不会想遇到一个文件，结果发现你的解析器不支持，那会很头疼。

功能深度足够。它不仅仅是能读数据，还能写数据，甚至能处理单元格的样式、合并单元格、公式等复杂情况。虽然我们多数时候只是为了读，但知道它有这些能力，心里会踏实很多。它的API设计也相对直观，虽然初看文档会觉得选项很多，但核心的读取和转换逻辑上手很快。

社区活跃度高，维护及时。这意味着遇到问题时，通常能找到解决方案，或者bug能得到及时修复。对于一个长期项目来说，选择一个有生命力的库至关重要。

当然，它也有一些小小的“个性”。比如，对于日期处理，Excel内部其实是把日期存成数字的（从1900年1月1日开始的天数），所以解析出来后，你可能需要手动转换一下。不过，

xlsx

库也提供了

cellDates: true

这样的选项来帮助我们直接获取日期对象，这倒是很贴心。

处理不同Excel数据类型和常见陷阱

Excel文件里的数据类型远比我们想象的要复杂。字符串、数字、布尔值这些是基础，但日期、时间、货币、百分比这些特殊格式，在Excel内部都有其特定的存储方式。

一个最常见的“坑”就是日期。正如前面提到的，Excel会将日期存储为一个序列号。如果直接解析，你可能会得到一串数字而不是日期字符串。解决办法是在

XLSX.read

或

XLSX.utils.sheet_to_json

时，传入

{ raw: false, cellDates: true }

这样的配置。

cellDates: true

会尝试将这些序列号转换为JavaScript的

Date

对象，而

raw: false

则会尝试保持单元格的格式化值，而不是原始值。这能省去很多后续手动转换的麻烦。

再来就是合并单元格。

xlsx

库默认解析时，合并单元格只会保留左上角那个单元格的值，其他合并区域的单元格会被视为空。如果你需要获取合并区域的完整信息，可能需要额外处理

workbook.Sheets[sheetName]['!merges']

这个属性，它记录了所有合并区域的范围。这确实需要一点额外的逻辑，但至少信息是可获取的。

处理大量数据时，性能是个绕不开的话题。如果Excel文件非常大（比如几十MB，包含几十万行），直接在浏览器主线程解析可能会导致页面卡顿甚至崩溃。这时候，Web Workers就成了救星。你可以把

FileReader

的读取和

XLSX.read

的解析操作放在Web Worker中执行，这样就不会阻塞UI线程，用户体验会好很多。将数据传递给Worker，Worker处理完再把结果传回来，整个过程对用户来说是无感的。

// main.js (在主线程) const worker = new Worker('excel.worker.js'); document.getElementById('excelFile').addEventListener('change', function(e) {     const file = e.target.files[0];     if (file) {         const reader = new FileReader();         reader.onload = function(event) {             worker.postMessage({ type: 'parseExcel', data: event.target.result });         };         reader.readAsArrayBuffer(file);     } });  worker.onmessage = function(event) {     if (event.data.type === 'excelParsed') {         console.log('Web Worker 解析后的数据:', event.data.jsonData);         // 在这里处理解析后的数据，更新UI等     } };  // excel.worker.js (在Web Worker中) // 注意：Worker中也需要引入xlsx库，例如通过importScripts importScripts('https://unpkg.com/xlsx/dist/xlsx.full.min.js');   self.onmessage = function(event) {     if (event.data.type === 'parseExcel') {         const data = new Uint8Array(event.data.data);         const workbook = XLSX.read(data, { type: 'array', cellDates: true });         const sheetName = workbook.SheetNames[0];         const worksheet = workbook.Sheets[sheetName];         const jsonData = XLSX.utils.sheet_to_json(worksheet);         self.postMessage({ type: 'excelParsed', jsonData: jsonData });     } };

文件损坏或者格式不正确的情况也得考虑。

XLSX.read

在遇到无法识别的文件时，可能会抛出错误。所以，用

try-catch

块来包裹解析逻辑是个好习惯，至少能给用户一个友好的提示，而不是让页面直接崩溃。

前端与后端解析Excel的场景考量与性能优化

选择在前端还是后端解析Excel，这真的得看具体需求和文件的特性。没有绝对的优劣，只有更适合的场景。

前端解析的优势与考量：

即时反馈： 用户上传文件后，浏览器端能立即解析并预览数据，用户体验会更好。比如，做个数据导入前的预览表格，前端解析就非常合适。
减轻服务器压力： 解析过程完全在用户浏览器进行，不占用服务器资源，对于高并发的场景尤其有利。
隐私敏感数据： 如果文件包含敏感信息，不希望上传到服务器，前端解析是唯一选择。
文件大小： 适合处理中小型Excel文件（比如几百KB到几MB），如果文件过大，就得考虑性能优化，比如前面提到的Web Worker。我个人经验是，超过10MB的文件，前端处理就得非常小心了，甚至可能考虑后端。

后端解析的优势与考量：

处理超大文件： 服务器通常有更强大的CPU和内存资源，能够轻松处理几十MB甚至上百MB的Excel文件。对于动辄数万、数十万行的数据，后端解析几乎是必然选择。
复杂数据处理与集成： 解析完的数据可能需要立即写入数据库、与其他系统集成或进行复杂的业务逻辑处理。这些操作在后端更方便、更安全。
安全性与稳定性： 后端环境通常更稳定，不易受用户浏览器环境差异的影响。同时，如果涉及到数据清洗、验证等严格的业务规则，放在后端处理更可靠。
批量导入： 当需要批量处理用户上传的大量Excel文件时，后端队列和异步处理机制会更有效率。

性能优化： 无论前端还是后端，优化思路其实有些共通之处：

选择高效的库：
xlsx
在JS生态里已经算很高效了。
按需加载： 如果Excel有很多工作表，但你只关心其中一两个，那么在解析时只处理你需要的部分，避免不必要的计算。
数据结构转换：
```
sheet_to_json
```
和
```
sheet_to_array
```
的性能差异不大，但通常
```
sheet_to_json
```
更符合我们处理数据的习惯。如果内存是瓶颈，可以考虑直接处理原始的单元格数据结构，而不是

评论（已关闭）

评论已关闭

Hello! 欢迎来到悠悠畅享网！