antd+react excel导入

(1):页面按钮部分代码

<div style={{ marginTop: 5 }}>
                                <Tooltip placement="topLeft" title="仅支持 .xlsx、.xls 格式的文件">
                                    <Button onClick={this.uploadFile}>
                                        <Icon type="arrow-up" />
                                        批量发货
                            </Button>
                                </Tooltip>
                                <input type='file' key={inputKey} accept='.xlsx, .xls' onChange={this.onImportExcel} hidden ref="inputFile" />
</div >

(2):调用的两个方法

 //表格导入  批量发货
    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 数据
               *****此处写需要上传的地址,即:接受数据的地方**************
            } catch (e) {
                // 这里可以抛出文件类型错误不正确的相关提示
                message.error('文件类型不正确!');

            }
            this.setState({
                inputKey: Math.random()
            })
        };
        // 以二进制方式打开文件
        fileReader.readAsBinaryString(files[0]);
    }

    //点击buttom触发input type="file"的点击事件
    uploadFile = () => {
        this.refs.inputFile.click();
    }

(3):注意:处理页面用户不刷新页面时,一直可以上传文件,添加了inputKey

 this.state = {
        inputKey: Math.random(),//导入
    }

(4):引入文件

import * as XLSX from 'xlsx';

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值