React上傳文件使用react-input-files讀取Excel js-xlsx

介紹

SheetJS js-xlsx 是一款能夠讀寫Excel的.xls、.xlsx格式表格的插件，瀏覽器支持良好，並且能在多個平台上使用，目前在github上有12602個star，在這邊的範例主要使用React，再加上SheetJS js-xlsx及react-input-files，讓你一個按鈕，簡單的實現直接選檔上傳。

使用

1. 安裝依賴

   進入項目文件夾，安裝xlsx與react-input-files

   npm install xlsx
   npm install react-input-files

2. 在專案中引入

   import XLSX from "xlsx";
   import InputFiles from "react-input-files";
   

3. 定義上傳InputFiles

   
     Upload
   

   accept 屬性定義了上傳文件支持的類型，onChange 操作中的 importExcel 方法定義了上傳文件時執行的操作。

4. 定義獲取和解析Excel物件的方法

   onImportExcel = files => {
     // 獲取上傳的文件對象
     //const { files } = file.target; // 通過FileReader對象讀取文件
     const fileReader = new FileReader();
     //console.log(fileReader);
     for (let index = 0; index < files.length; index++) {
         fileReader.name = files[index].name;
     }
     fileReader.onload = event => {
         try {
             // 判斷上傳檔案的類型 可接受的附檔名
             const validExts = new Array(".xlsx", ".xls");
             const fileExt = event.target.name;
   
             if (fileExt == null) {
                 throw "檔案為空值";
             }
   
             const fileExtlastof = fileExt.substring(fileExt.lastIndexOf("."));
             if (validExts.indexOf(fileExtlastof) == -1) {
                 throw "檔案類型錯誤，可接受的副檔名有：" + validExts.toString();
             }
   
             const { result } = event.target; // 以二進制流方式讀取得到整份excel表格對象
             const workbook = XLSX.read(result, { type: "binary" });
             let data = []; // 存儲獲取到的數據 // 遍歷每張工作表進行讀取（這裡默認只讀取第一張表）
             for (const sheet in workbook.Sheets) {
                 if (workbook.Sheets.hasOwnProperty(sheet)) {
                     // 利用 sheet_to_json 方法將 excel 轉成 json 數據
                     data = data.concat(
                         XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
                     ); // break; // 如果只取第一張表，就取消註釋這行
                 }
             }
             console.log(data);
         } catch (e) {
             // 這裡可以拋出文件類型錯誤不正確的相關提示
             alert(e);
             //console.log("文件類型不正確");
             return;
         }
     }; // 以二進制方式打開文件
     fileReader.readAsBinaryString(files[0]);
   };

相關連結:React讀取Excel js-xlsx 插件的使用