react 經過 xlsx導入excel數據

import React, { Component } from 'react';

import { Button, Icon, message } from 'antd';

import * as XLSX from 'xlsx';

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) {

    // 這裏能夠拋出文件類型錯誤不正確的相關提示

    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;

模版