利用xlsx.js读取excel文件的详细过程

作者：小积木时间：2026-10-31 20:07:04浏览：335

本文详细介绍如何使用xlsx.js结合antd Upload组件的customRequest方法读取Excel文件。重点解析FileReader的readAsArrayBuffer与readAsBinaryString方法差异，以及通过xlsxUtils.sheet_to_json将二进制数据转换为对象数组的完整流程，帮助开发者实现高效的Excel数据解析。

目标：解析Excel文件。

一、应用antd Upload组件的【customRequest】接口。

互斥。此接口与【onChange】接口互斥，即：不可同时存在。

调用频次差异。onChange接口依据文件当前上传状态被多次触发（涵盖读取中、上传中、上传失败、上传完成等阶段）。 customRequest接口用于自定义文件读取与上传逻辑，故onChange接口涉及的多个状态，【customRequest】接口默认不具备，因此【customRequest】接口仅触发1次。

参数差异。onChange接口在读取结束后，返回一个数据对象。该数据由antd组件处理后生成，包含读取状态等附加属性。（但无法直接获取文件内部内容）。【customRequest】接口接收的file数据为原始未处理状态，无法直接查看文件内容。

一、应用antd Upload组件的【customRequest】接口。

二. 文件读取实现？

一、应用antd Upload组件的【customRequest】接口。

readAsBinaryString 接口：按字节读取文件内容，返回结果为文件的二进制字符串。该结果将作为参数传入 fileReader的 onload接口（此接口逐渐被废弃，不推荐使用）。
readAsArrayBuffer 接口：同上，返回结果为ArrayBuffer （推荐使用）。

数据转换流程：

upload组件获取的原始文件数据(customRequest接口的参数file)。
二进制流或 ArrayBuffer 。通过readAsBinaryString方式读取后的数据为二进制流。通过readAsArrayBuffer读取出的数据是ArrayBuffer。
webhooks.包含整个表格的所有信息。
sheet。特定子表单的数据。包含每个单元格的信息。
sheet_to_json 接口将 sheet 转换为对象数组。

import { read as xlsxRead, utils as xlsxUtils } from 'xlsx';
  
// 批量导入
  const customRequest = (files) => {
    const { file } = files;
        
    // step1 ：创建一个 fileReader对象
    const fileReader = new FileReader();
    
    // step2: onload方法是 读完数据后 调用的方法。用来对读取后的数据进行一些处理
    fileReader.onload = (event: any) => {
      try {
        const { result } = event.target;
        console.log('event', event);
        // 1 以二进制流方式（buffer方式）读取得到整份excel表格对象,cellDates设为true，将读取到的天数的时间戳转为时间格式
        const workbook = xlsxRead(result, {
          type: 'binary',//🐷🐷🐷 如果readAsArrayBuffer方法读取文件则type：'buffer'🐷🐷
          cellDates: true,
        });
        console.log('workbook', workbook);
        // 2 遍历每张工作表进行读取（这里默认只读取第一张表）Sheets是个数组
        const { Sheets } = workbook;
        const sheet0 = Sheets[Object.keys(Sheets)[0]];
        console.log('sheet0', sheet0);
        // 4 利用 sheet_to_json 方法将 sheet 转成 对象数组
        const fileData =  xlsxUtils.sheet_to_json(sheet0)

        // convertToData(fileData);
      } catch (e) {
        // 这里可以抛出文件类型错误不正确的相关提示
        message.error(formatMessage({ id: 'create_order.fileError' }));
      }
    };
// step3: 使用 readAsBinaryString、或者 readAsArrayBuffer 来读取 文件。
    fileReader.readAsBinaryString(file);

  };