快捷導(dǎo)航

利用xlsx.js讀取excel文件的詳細(xì)過程

更新時間：2025年04月02日 08:26:29 作者：這個昵稱也不能用嗎？

如果你需要在瀏覽器端處理Excel文件,那么xlsx.js可能是一個不錯的選擇,這篇文章主要介紹了利用xlsx.js讀取excel文件的詳細(xì)過程,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、使用antd的Upload組件的【customRequest】方法。

互斥。此方法跟【onChange】方法互斥，即：不可同時出現(xiàn)。

調(diào)用次數(shù)不一樣。onChange方法會根據(jù)文件當(dāng)前的上傳狀態(tài)從而被調(diào)用多次（讀取中，上傳中，上傳失敗、上傳完成等）。
customRequest方法是自定義讀取和上傳的文件，因此，onChange方法的幾個狀態(tài)，【customRequest】方法默認(rèn)是沒有的，因此【customRequest】方法只會被調(diào)用1次

參數(shù)不一樣。onChange方法在讀取完成后，會拿到一個數(shù)據(jù)。這個數(shù)據(jù)是 antd組件處理過后的數(shù)據(jù)，包含了一些讀取狀態(tài)等其他屬性。（但是也無法直接看到文件里的內(nèi)容）。
【customRequest】方法拿到的file數(shù)據(jù)是未經(jīng)處理的，無法看到文件里的數(shù)據(jù)。

二. 如何讀取文件？

readAsBinaryString 方法：按字節(jié)讀取文件內(nèi)容，結(jié)果為文件的二進(jìn)制串。這個結(jié)果，會作為參數(shù) 傳遞給 fileReader的 onload方法（此方法會被逐漸廢棄。不推薦使用。）
readAsArrayBuffer 方法：同上，結(jié)果為ArrayBuffer （推薦使用）

數(shù)據(jù)轉(zhuǎn)化過程：

upload組件拿到的原始的文件數(shù)據(jù)(customRequest的參數(shù)file)
二進(jìn)制流 or ArrayBuffer 。readAsBinaryString的方式讀取后的數(shù)據(jù)為二進(jìn)制流。readAsArrayBuffer讀取出來的數(shù)據(jù)是ArrayBuffer
webhooks.里面是真?zhèn)€表的所有信息。
sheet。某個子表單的數(shù)據(jù)。里面是每個單元格的信息
sheet_to_json 方法將 sheet 轉(zhuǎn)成對象數(shù)組

import { read as xlsxRead, utils as xlsxUtils } from 'xlsx';
  
// 批量導(dǎo)入
  const customRequest = (files) => {
    const { file } = files;
        
    // step1 ：創(chuàng)建一個 fileReader對象
    const fileReader = new FileReader();
    
    // step2: onload方法是 讀完數(shù)據(jù)后 調(diào)用的方法。用來對讀取后的數(shù)據(jù)進(jìn)行一些處理
    fileReader.onload = (event: any) => {
      try {
        const { result } = event.target;
        console.log('event', event);
        // 1 以二進(jìn)制流方式（buffer方式）讀取得到整份excel表格對象,cellDates設(shè)為true，將讀取到的天數(shù)的時間戳轉(zhuǎn)為時間格式
        const workbook = xlsxRead(result, {
          type: 'binary',//?????? 如果readAsArrayBuffer方法讀取文件則type：'buffer'????
          cellDates: true,
        });
        console.log('workbook', workbook);
        // 2 遍歷每張工作表進(jìn)行讀?。ㄟ@里默認(rèn)只讀取第一張表）Sheets是個數(shù)組
        const { Sheets } = workbook;
        const sheet0 = Sheets[Object.keys(Sheets)[0]];
        console.log('sheet0', sheet0);
        // 4 利用 sheet_to_json 方法將 sheet 轉(zhuǎn)成 對象數(shù)組
        const fileData =  xlsxUtils.sheet_to_json(sheet0)

        // convertToData(fileData);
      } catch (e) {
        // 這里可以拋出文件類型錯誤不正確的相關(guān)提示
        message.error(formatMessage({ id: 'create_order.fileError' }));
      }
    };
// step3: 使用 readAsBinaryString、或者 readAsArrayBuffer 來讀取 文件。
    fileReader.readAsBinaryString(file);

  };