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 (

            <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;
發佈了143 篇原創文章 · 獲贊 14 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章