React中使用SheetJS读取大型XLSX文件如何获取最后100行数据

你当前的代码存在3个核心问题，是导致读取异常、页面崩溃的原因：

• API调用错误：浏览器端解析ArrayBuffer格式的文件数据应该用XLSX.read()，XLSX.readFile是Node.js环境专属方法，浏览器端调用会存在兼容问题。
• 配置逻辑完全相反：sheetRows: 100参数的作用是从工作表第一行开始，仅读取前100行内容，加了这个配置你根本拿不到文件末尾的行数据。
• range硬编码失效：1048576是XLSX格式单工作表的理论最大行号，不是你当前上传文件的实际有效数据末尾行号，直接用这个值作为读取起点，会把该位置到文件末尾的所有空行、冗余脏数据全部解析出来，内存占用过高直接导致页面崩溃。

核心逻辑是先解析工作表的实际有效数据范围，计算出最后100行的准确位置，再定向读取目标范围的数据，从根源上避免冗余数据解析。
完整可运行代码如下：

const handleFile = async(e) => {
  const file = e.target.files[0];
  if (!file) return;
  const data = await file.arrayBuffer();
  // 读取文件时不要加sheetRows限制，先拿到完整的表结构元数据
  const workbook = XLSX.read(data, { type: 'array' });
  const worksheet = workbook.Sheets[workbook.SheetNames[0]];

  // 解析当前工作表真实的有效数据范围
  const validRange = XLSX.utils.decode_range(worksheet['!ref']);
  const lastRowIndex = validRange.e.r; // 有效数据最后一行的索引（从0开始计数）
  // 计算读取起始位置：取最后100行，文件总行数不足100时从第一行开始读
  const startRowIndex = Math.max(0, lastRowIndex - 99);
  // 构造目标读取范围：列范围保持和原表一致，行范围为计算出的最后100行
  const readRange = {
    s: { r: startRowIndex, c: validRange.s.c },
    e: { r: lastRowIndex, c: validRange.e.c }
  };

  // 仅解析目标范围内的数据
  const jsonData = XLSX.utils.sheet_to_json(worksheet, {
    raw: false,
    range: readRange,
    defval: '' // 空单元格赋值为空字符串，避免出现undefined导致后续渲染报错
  });

  setChartData(jsonData);
}

适配表头场景的补充调整 #

如果你的工作表第一行是固定表头，需要把表头和最后100行数据一起返回，只需要调整起始行计算逻辑即可：

// 表头固定在第0行的场景：数据行从第1行开始算，取最后100条数据
const dataStartRow = Math.max(1, lastRowIndex - 99);
const readRange = {
  s: { r: 0, c: validRange.s.c }, // 从第0行（表头）开始读
  e: { r: lastRowIndex, c: validRange.e.c }
};

如果是超过100MB的超大型XLSX文件，可以把解析逻辑放到Web Worker中执行，避免主线程阻塞导致页面卡顿。

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