import React, { Component } from 'react';
import { Button, Icon, message } from 'antd';
import * as XLSX from 'xlsx';
let styles = {
'file-uploader':'height:30px',
'upload-text':'height:30px',
'upload-tip':'display:block'
}
class Excel extends Component {
onImportExcel = file => {
const { files } = file.target;
// 通過FileReader對象讀取文件
const fileReader = new FileReader();
fileReader.onload = event => {
try {
const { result } = event.target;
// 以二進制流方式讀取得到整份excel表格對象
const workbook = XLSX.read(result, { type: 'binary' });
// 存儲獲取到的數據
let data = [];
// 遍歷每張工作表進行讀取(這裏默認只讀取第一張表)
for (const sheet in workbook.Sheets) {
// esline-disable-next-line
if (workbook.Sheets.hasOwnProperty(sheet)) {
// 利用 sheet_to_json 方法將 excel 轉成 json 數據
data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
// break; // 如果只取第一張表,就取消註釋這行
}
}
// 最終獲取到並且格式化後的 json 數據
message.success('上傳成功!')
console.log(data);
} catch (e) {
// 這裏可以拋出文件類型錯誤不正確的相關提示
console.log(e, 'eeee')
message.error('文件類型不正確!');
}
};
// 以二進制方式打開文件
fileReader.readAsBinaryString(files[0]);
}
render() {
return (
<div>
<Button >
<Icon type='upload' />
<input className={styles['file-uploader']} type='file' accept='.xlsx, .xls' onChange={this.onImportExcel} />
<span className={styles['upload-text']}>上傳文件</span>
</Button>
<p className={styles['upload-tip']}>支持 .xlsx、.xls 格式的文件</p>
</div >
);
}
}
export default Excel;
react 通過 xlsx導入excel數據
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.