react 通过 xlsx导入excel数据

最新推荐文章于 2024-08-04 23:11:37 发布

爱lv行

最新推荐文章于 2024-08-04 23:11:37 发布

阅读量1.2k

点赞数

分类专栏：上传文件文章标签： excel

本文链接：https://blog.csdn.net/u013165804/article/details/103886747

版权

上传文件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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;