引用xlsx庫來完成這個功能
下載庫:npm下載可能會報錯,用yarn正常
npm install xlsx --save
//or
yarn add xlsx
模塊導入:
import XLSX from 'xlsx';
基礎代碼:
<input type="file" onChange={this.HandleImportFile} />
處理邏輯:
HandleImportFile = (e) => {
let { files } = e.target
// 獲取文件名稱
let name = files[0].name
// 獲取文件後綴
let suffix = name.substr(name.lastIndexOf("."));
let reader = new FileReader();
reader.onload = (event) => {
try {
// 判斷文件類型是否正確
if (".xls" != suffix && ".xlsx" != suffix) {
message.error("選擇Excel格式的文件導入!");
return false;
}
let { result } = event.target
// 讀取文件
let workbook = XLSX.read(result, { type: 'binary' });
let data = []
// 循環文件中的每個表
for (let sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
// 將獲取到表中的數據轉化爲json格式
data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
}
}
console.log(data)
} catch (e) {
message.error('文件類型不正確!');
}
}
reader.readAsBinaryString(files[0]);
}