使用SheetJS(xlsx.js)读取50MB-1GB大体积Excel文件的问题

针对50MB以上Excel文件读取时XLSX.read()阻塞页面的问题，可通过以下几种方案解决：

1. 改用Web Worker异步解析，避免阻塞主线程 #

同步解析大文件会占用主线程导致页面无响应，把解析逻辑移到Web Worker中，让后台线程处理数据，主线程保持可交互状态。

实现步骤： #

• 新建Worker文件（比如excel-parser.worker.js）：

importScripts('xlsx.full.min.js'); // 请确保已引入xlsx完整版本库文件

self.onmessage = function(e) {
  const { data, opts } = e.data;
  try {
    const workbook = XLSX.read(data, opts);
    // 只返回需要的工作表数据，减少线程间传输量
    const result = {};
    workbook.SheetNames.forEach(name => {
      result[name] = XLSX.utils.sheet_to_json(workbook.Sheets[name]);
    });
    self.postMessage({ success: true, data: result });
  } catch (err) {
    self.postMessage({ success: false, error: err.message });
  }
};

• 主线程代码：

function parseLargeExcel(file, opts = {}) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = function(e) {
      const worker = new Worker('excel-parser.worker.js');
      worker.postMessage({ data: e.target.result, opts });
      worker.onmessage = function(msg) {
        worker.terminate();
        if (msg.data.success) resolve(msg.data.data);
        else reject(new Error(msg.data.error));
      };
      worker.onerror = function(err) {
        worker.terminate();
        reject(err);
      };
    };
    reader.readAsArrayBuffer(file); // 用ArrayBuffer格式读取，比base64更高效
  });
}

// 使用示例
document.getElementById('file-input').addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file) return;
  try {
    const data = await parseLargeExcel(file, { type: 'array' });
    console.log('解析完成', data);
    // 此处添加业务逻辑处理
  } catch (err) {
    console.error('解析失败', err);
  }
});

2. 优化解析配置，减少内存占用 #

如果不需要读取整个文件，可通过配置项限制解析范围，大幅降低内存消耗：

• 指定只读取需要的工作表：opts.sheets = ['Sheet1', 'Sheet3']
• 只读取前N行数据：opts.sheetRows = 1000
• 跳过公式、样式等非必要解析：opts.cellFormula = false; opts.cellStyles = false

示例：

const opts = {
  type: 'array',
  sheets: ['核心数据'], // 仅读取指定工作表
  sheetRows: 5000, // 仅读取前5000行
  cellFormula: false,
  cellStyles: false
};
const workbook = XLSX.read(data, opts);

3. 流式分片解析（针对超大型文件） #

如果Web Worker仍无法处理（比如文件超过100MB），可以结合FileReader的切片功能，配合xlsx的流式API增量解析，避免一次性加载全部数据。

注意： #

此方法仅支持XLSX/XLSM/XLSB格式，旧版XLS文件无法流式解析，且需要使用xlsx完整版本库。

核心逻辑示例：

async function streamParseExcel(file) {
  const chunkSize = 10 * 1024 * 1024; // 10MB分片大小
  const totalChunks = Math.ceil(file.size / chunkSize);
  const parser = XLSX.stream.from_chunks();
  
  for (let i = 0; i < totalChunks; i++) {
    const start = i * chunkSize;
    const end = Math.min(start + chunkSize, file.size);
    const chunk = file.slice(start, end);
    
    // 读取分片为ArrayBuffer
    const arrayBuffer = await new Promise((res, rej) => {
      const reader = new FileReader();
      reader.onload = () => res(reader.result);
      reader.onerror = rej;
      reader.readAsArrayBuffer(chunk);
    });
    
    parser.write(new Uint8Array(arrayBuffer));
  }
  
  parser.end();
  
  // 收集解析结果
  const result = {};
  for await (const row of parser) {
    const sheetName = row.sheet;
    if (!result[sheetName]) result[sheetName] = [];
    result[sheetName].push(row);
  }
  
  return result;
}

// 使用示例
streamParseExcel(file).then(data => {
  console.log('流式解析完成', data);
}).catch(err => {
  console.error('解析失败', err);
});

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