react 讀取excel中的內容並解析成json格式的

引用xlsx庫來完成這個功能
下載庫:npm下載可能會報錯,用yarn正常

npm install xlsx --save
//or
yarn add xlsx

模塊導入:

import XLSX from 'xlsx';

基礎代碼:

 <input type="file" onChange={this.HandleImportFile} />

處理邏輯:

HandleImportFile = (e) => {
    let { files } = e.target
    // 獲取文件名稱
    let name = files[0].name
    // 獲取文件後綴
    let suffix = name.substr(name.lastIndexOf("."));

    let reader = new FileReader();
    reader.onload = (event) => {
      try {
        // 判斷文件類型是否正確
        if (".xls" != suffix && ".xlsx" != suffix) {
          message.error("選擇Excel格式的文件導入!");
          return false;
        }

        let { result } = event.target
        // 讀取文件
        let workbook = XLSX.read(result, { type: 'binary' });
        let data = []
        // 循環文件中的每個表
        for (let sheet in workbook.Sheets) {
          if (workbook.Sheets.hasOwnProperty(sheet)) {
            // 將獲取到表中的數據轉化爲json格式
            data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
          }
        }

        console.log(data)

      } catch (e) {
        message.error('文件類型不正確!');
      }

    }
    reader.readAsBinaryString(files[0]);
  }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章