React JS中如何读取100万-500万行大型Excel并转JSON？

适合处理大型Excel的npm库 #

• exceljs：支持流式读取，无需一次性加载整个文件到内存，完美适配百万行级别的Excel文件，可逐行处理数据，从根源避免内存溢出问题。
• SheetJS (xlsx) 流式模式：你当前使用的xlsx库并非完全无法处理大数据集，只是之前的写法是一次性全量加载，改用其流式解析API即可应对大文件。
• csv-parser（搭配Excel转CSV）：若能先将Excel转换为CSV格式（后端处理或工具转换均可），csv-parser的流式处理效率极高，适合超大规模数据场景。

JavaScript处理大型Excel的最快方法 #

核心原则是流式处理+避免全量加载，核心技巧包括：

1. 选用流式解析库：优先选择支持逐行读取的库，控制内存占用，防止大文件导致的页面崩溃。
2. 逐行转换分批处理：不要一次性生成完整的JSON数组，逐行转换后分批处理（如分批存入后端、分批写入本地存储），降低内存压力。
3. Web Worker 离线处理：将Excel解析逻辑迁移至Web Worker，避免阻塞主线程，保证页面交互响应。
4. 优先使用XLSX格式：XLSX是基于XML的压缩格式，解析效率远高于旧版XLS格式。

代码实现示例 #

1. 使用exceljs流式读取（React） #

import './App.css';
import ExcelJS from 'exceljs';

function App() {
  const readLargeExcel = async (e) => {
    console.log("开始时间", new Date());
    const file = e.target.files[0];
    const workbook = new ExcelJS.Workbook();
    
    // 开启流式加载
    await workbook.xlsx.load(file.stream(), { streaming: true });

    const worksheet = workbook.getWorksheet(1);
    let processedCount = 0;
    const batchSize = 1000;
    let batchData = [];

    // 逐行处理，跳过表头
    worksheet.eachRow({ includeEmpty: false }, (row, rowNumber) => {
      if (rowNumber === 1) return;
      
      // 映射表头与行数据
      const rowObj = {};
      worksheet.getRow(1).eachCell((cell, colIndex) => {
        rowObj[cell.value] = row.getCell(colIndex + 1).value;
      });
      
      batchData.push(rowObj);
      processedCount++;

      // 分批处理，避免内存堆积
      if (batchData.length === batchSize) {
        console.log(`已处理${processedCount}条数据`);
        // 这里可添加分批操作，比如发送到后端
        // await fetch('/api/upload', { method: 'POST', body: JSON.stringify(batchData) });
        batchData = [];
      }
    });

    // 处理剩余的最后一批数据
    if (batchData.length > 0) {
      console.log(`已处理${processedCount}条数据（含最后一批）`);
      // await fetch('/api/upload', { method: 'POST', body: JSON.stringify(batchData) });
    }

    console.log("结束时间", new Date());
    console.log("总处理数据量", processedCount);
  };

  return (
    <div className="App">
      <input type={'file'} onChange={readLargeExcel} accept=".xlsx" />
    </div>
  );
}

export default App;

2. SheetJS (xlsx) 流式解析优化 #

如果不想更换库，可通过xlsx的rowCB回调实现流式处理：

import './App.css';
import * as XLSX from 'xlsx';

function App() {
  const readExcelStream = (e) => {
    console.log("开始时间", new Date());
    const file = e.target.files[0];
    const reader = new FileReader();
    
    reader.onload = (evt) => {
      const data = new Uint8Array(evt.target.result);
      const workbook = XLSX.read(data, { type: 'array' });
      const worksheet = workbook.Sheets[workbook.SheetNames[0]];
      
      const header = XLSX.utils.sheet_to_json(worksheet, { header: 1 })[0];
      let processedCount = 0;
      const batchSize = 1000;
      let batchData = [];

      // 逐行回调处理
      XLSX.utils.sheet_to_json(worksheet, {
        rowCB: (row) => {
          const rowObj = {};
          header.forEach((key, idx) => {
            rowObj[key] = row[idx];
          });
          
          batchData.push(rowObj);
          processedCount++;

          if (batchData.length === batchSize) {
            console.log(`已处理${processedCount}条数据`);
            // 分批操作逻辑
            // await fetch('/api/upload', { method: 'POST', body: JSON.stringify(batchData) });
            batchData = [];
          }
        }
      });

      // 处理剩余数据
      if (batchData.length > 0) {
        console.log(`已处理${processedCount}条数据（含最后一批）`);
        // await fetch('/api/upload', { method: 'POST', body: JSON.stringify(batchData) });
      }

      console.log("结束时间", new Date());
      console.log("总处理数据量", processedCount);
    };
    
    reader.readAsArrayBuffer(file);
  };

  return (
    <div className="App">
      <input type={'file'} onChange={readExcelStream} accept=".xlsx" />
    </div>
  );
}

export default App;

关键注意事项 #

• 内存管控：即使是流式处理，也不要将500万条JSON数据全部保留在内存中，务必分批处理、分批输出。
• 格式限制：尽量要求上传.xlsx格式文件，.xls格式解析效率低且内存占用更高。
• 线程优化：若处理超大规模文件（如500万行），建议用Web Worker封装解析逻辑，避免页面卡顿。

内容的提问来源于stack exchange，提问作者code_hr