react 通过 xlsx导入excel数据

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 (

            

支持 .xlsx、.xls 格式的文件

); } } export default Excel;

你可能感兴趣的:(上传文件)