前端处理excel我们要用到XLSX这个组件，它的github地址是https://github.com/SheetJS/js-xlsx。
使用前可以通过npm安装：
npm install xlsx其他安装方式请参考github主页。
安装后在页面引入
import XLSX from 'xlsx';
antd的文件上传组件是Upload，把他引入
import {Button, Upload, Tooltip } from 'antd';
假设我们通过一个按钮把excel文件导入：
<Upload {...uploadprops}>
<Tooltip title='导入excel文件'>
<Button type="primary" >
<Icon type="upload" /> 导入
</Button>
</Tooltip>
</Upload>Upload的参数列表uploadprops我们要定义一下：
const uploadprops = {
// 这里我们只接受excel2007以后版本的文件，accept就是指定文件选择框的文件类型
accept: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
name: 'file',
headers: {
authorization: 'authorization-text',
},
showUploadList: false,
// 把excel的处理放在beforeUpload事件，否则要把文件上传到通过action指定的地址去后台处理
// 这里我们没有指定action地址，因为没有传到后台
beforeUpload: (file, fileList) => {
var rABS = true;
const f = fileList[0];
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
if (!rABS) data = new Uint8Array(data);
var workbook = XLSX.read(data, {
type: rABS ? 'binary' : 'array'
});
// 假设我们的数据在第一个标签
var first_worksheet = workbook.Sheets[workbook.SheetNames[0]];
// XLSX自带了一个工具把导入的数据转成json
var jsonArr = XLSX.utils.sheet_to_json(first_worksheet, {header:1});
// 通过自定义的方法处理Json，比如加入state来展示
handleImpotedJson(jsonArr.slice(1));
};
if (rABS) reader.readAsBinaryString(f); else reader.readAsArrayBuffer(f);
return false;
}
};
这样，当通过浏览器的文件选择框选择了文件后，就会进入beforeUpload事件开始执行我们的代码。
有一个问题是：有时候XLSX不能确定最后一条记录，已经扫描完了还要继续走。所以扫描出来的数组末尾有空元素，需要过滤掉
我估计是excel可以设置数据边界，因为java使用后台工具POI处理也有这问题，希望有大神能指导一下
