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;