利用xlsx.js讀取excel文件的詳細過程
需求:讀取一個excel文件。
一、 使用antd的Upload組件的 【customRequest】方法。
互斥。此方法跟【onChange】方法互斥,即:不可同時出現。
調用次數不一樣。onChange方法會根據文件當前的上傳狀態(tài)從而被調用多次(讀取中,上傳中,上傳失敗、上傳完成等)。
customRequest方法是自定義讀取和上傳的文件,因此,onChange方法的幾個狀態(tài),【customRequest】方法默認是沒有的,因此【customRequest】方法只會被調用1次參數不一樣。onChange方法在讀取完成后,會拿到一個數據。這個數據是 antd組件處理過后的數據,包含了一些讀取狀態(tài)等其他屬性。(但是也無法直接看到文件里的內容)。
【customRequest】方法拿到的file數據是未經處理的,無法看到文件里的數據。

二. 如何讀取文件?

- readAsBinaryString 方法:按字節(jié)讀取文件內容,結果為文件的二進制串。 這個結果,會作為參數 傳遞給 fileReader的 onload方法 (此方法會被逐漸廢棄。不推薦使用。)
- readAsArrayBuffer 方法:同上,結果為ArrayBuffer (推薦使用)
數據轉化過程:
- upload組件拿到的 原始的文件數據(customRequest的參數file)
- 二進制流 or ArrayBuffer 。readAsBinaryString的方式讀取后的數據為二進制流。readAsArrayBuffer讀取出來的數據是ArrayBuffer
- webhooks.里面是真?zhèn)€表的所有信息。
- sheet。某個子表單的數據。里面是每個單元格的信息
- sheet_to_json 方法將 sheet 轉成 對象數組
import { read as xlsxRead, utils as xlsxUtils } from 'xlsx';
// 批量導入
const customRequest = (files) => {
const { file } = files;
// step1 :創(chuàng)建一個 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);
};
最后
二進制的數據流解析后。長什么樣?

ArrayBuffer長什么樣子?如下圖。

到此這篇關于利用xlsx.js讀取excel文件的文章就介紹到這了,更多相關xlsx.js讀取excel文件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

