【React踩坑記四】React項目中引入並使用js-xlsx上傳插件(結合antdesign的上傳組件)

最近有一個前端上傳並解析excel/csv表格數據的需求。
於是在github上找到一個14K star的前端解析插件 github傳送門
官方也有，奈何實在太過於淺薄。於是做了以下整理，避免道友們少走一些彎路。

• 安裝依賴

yarn add xlsx //或 npm install xlsx

• 項目中引入

import * as XLSX from 'xlsx';

上傳組件（antdesign的上傳組件）

<Dragger name="file" accept={this.state.uploadInfo.suffix} beforeUpload={function(){return false;}} onChange={this.uploadFilesChange.bind(this)} showUploadList={false}>
   <p className="ant-upload-text">
     <span>點擊上傳文件</span>
     或者拖拽上傳
     </p>
 </Dragger>

上傳並解析

uploadFilesChange(file) {
      // 通過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) {
            let tempData = [];
            // esline-disable-next-line
            if (workbook.Sheets.hasOwnProperty(sheet)) {
              // 利用 sheet_to_json 方法將 excel 轉成 json 數據
              data[sheet] = tempData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
            }
          }
          //上傳成功啦,data為上傳后的數據
          console.log(data);
          // 最終獲取到並且格式化后的 json 數據
          message.success('上傳成功！')
        } catch (e) {
          // 這里可以拋出文件類型錯誤不正確的相關提示
          message.error('文件類型不正確！');
        }
      }
      // 以二進制方式打開文件
      fileReader.readAsBinaryString(file.file);
  }

效果如下：

這里有324.57GB的修仙資料。嘿嘿嘿你懂得。/手動狗頭

那么問題來了，如果你也想入坑前端或者學習更多技術，廣交天下朋友(基友)，認識更多有趣的靈魂的話，歡迎加入前端交流群鴨~

掃二維碼加為好友就完事了！安排~