介绍
SheetJS js-xlsx 是一款能够读写多种格式表格的插件,浏览器支持良好,并且能在多个语言平台上使用
GitHub地址GitHub - SheetJS/js-xlsx: SheetJS Community Edition -- Spreadsheet Toolkit
1.选用xlsx组件
npm install xlsx --save
如果安装失败,删除package.lock文件,再执行npm相关命令。
2.在页面中导入xlsx
import *as XLSXfrom 'xlsx';
3.编写相关方法
onImportExcel = file => {
let data = [];// 存储获取到的数据
// 通过FileReader对象读取文件
const fileReader =new FileReader();
fileReader.readAsBinaryString(file); //二进制
fileReader.onload = event => {
try {
const {result } = event.target;
// 以二进制流方式读取得到整份excel表格对象
const workbook = XLSX.read(result, {type:'binary' });
// 遍历每张工作表进行读取(这里默认只读取第一张表)
for (const sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
// 利用 sheet_to_json 方法将 excel 转成 json 数据
data =data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
// break; // 如果只取第一张表,就取消注释这行
}
}
console.log(data);
}catch (e) {
// 这里可以抛出文件类型错误不正确的相关提示
console.log('文件类型不正确');
return;
}
};
}
4.react中组件调用
<Form.Item label="报表上传">
<Upload name="excel" action="" listType="text" accept="file" beforeUpload={this.onImportExcel} showUploadList={true}>
<Button>
<Icon type="upload" />点击上传报表
</Button>
</Upload>
</Form.Item>