在前端使用XLSX处理Excel (antd环境)

前端处理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处理也有这问题，希望有大神能指导一下