如何在JavaScript中高效读取XLSX首行提取列名

问题 #

处理1万+条记录的XLSX文件时，页面卡顿甚至无响应。当前通过input标签获取用户上传的File对象，用FileReader转为ArrayBuffer后，XLSX库会解析整个工作簿，即便只需要提取首行列名，也会加载全部数据导致内存占用过高。尝试使用sheetRows参数，但误以为该参数仅支持readFile（需要文件路径），不适用于前端上传场景。

原代码问题分析 #

原代码中XLSX.read(arrayBuffer, { type: 'array' })会完整解析整个工作簿，大文件下会消耗大量内存和CPU，引发页面卡顿。后续通过sheet_to_json指定range提取首行的操作，只是在全量解析后过滤数据，无法从根源解决性能问题。

解决方案 #

实际上XLSX.read方法同样支持sheetRows参数，设置sheetRows: 1即可仅解析工作簿的第一行数据，从根源减少内存占用。该参数适用于所有读取方式（包括ArrayBuffer、Uint8Array等），无需依赖文件路径。

优化后的核心逻辑：

• 调用XLSX.read时添加sheetRows: 1配置，仅加载第一行
• 直接从解析后的工作表中提取首行数据作为列名

优化后的代码 #

extractColumnsXlsx(file: File): Promise<string[]> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.readAsArrayBuffer(file);

    reader.onload = (event) => {
      const arrayBuffer = event.target?.result as ArrayBuffer;

      try {
        // 仅读取第一行数据，大幅降低内存占用
        const workbook = XLSX.read(arrayBuffer, { 
          type: 'array',
          sheetRows: 1 // 关键配置：只解析第一行
        });
        
        const firstSheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[firstSheetName];

        // 直接将首行转为数组，即为列名
        const columnNames = XLSX.utils.sheet_to_json(worksheet, { header: 1 })[0] as string[];
        
        if (columnNames) {
          console.log('Column Names:', columnNames);
          resolve(columnNames);
        } else {
          reject(new Error('未读取到列名'));
        }
      } catch (error) {
        reject(error);
      }
    };

    reader.onerror = (error) => reject(error);
  });
}

额外说明 #

• sheetRows参数指定的是解析的行数上限，设置为1时只会处理第一行（行索引从0开始）
• 如果需要保留原代码中对!ref的校验逻辑，也可以保留，但在sheetRows:1的情况下，!ref只会包含第一行的单元格范围，不会有性能问题
• 该方法适用于所有前端上传的XLSX文件场景，无需后端介入，完全在浏览器端处理

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