使用xlsx實現Excel導入

需求

• 實現在系統里批量導入數據，通過上傳一個excel文件，前端將文件處理為json數據發送給后端。（最好與后端定義好上傳的文件模板，方便處理數據）

實現

• 使用xlsx；
• xlsx的github地址：https://github.com/SheetJS/sheetjs；
• 適用於js、react、vue等項目。

代碼

• 實現導入Excel方法

function importsExcel(file: any) {
  //使用promise導入
  return new Promise((resolve, reject) => {
    // 獲取上傳的文件對象
    const { files } = file.target; //獲取里面的所有文件
    // 通過FileReader對象讀取文件
    const fileReader = new FileReader();

    fileReader.onload = (event) => {
      //異步操作  excel文件加載完成以后觸發
      try {
        const { result } = event.target as any;
        // 以二進制流方式讀取得到整份excel表格對象
        const workbook = XLSX.read(result, { type: "binary" });
        let data: any = []; // 存儲獲取到的數據
        // 遍歷每張工作表進行讀取
        for (const sheet in workbook.Sheets) {
          if (workbook.Sheets.hasOwnProperty(sheet)) {
            data = data.concat(
              // 將工作表轉換為json數據
              XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
            );
          }
        }
        resolve(data); //導出數據
      } catch (e) {
        // 這里可以拋出文件類型錯誤不正確的相關提示
        reject("失敗"); //導出失敗
      }
    };
    // 以二進制方式打開文件
    fileReader.readAsBinaryString(files[0]);
  });
}

• 頁面功能調用

    <input
        type="file"
        accept=".xls,.xlsx"
        onChange={(e) => {
          importsExcel(e).then(
            function (data) {
              console.log(data);
            },
            function (data) {
              console.log(data);
            }
          );
        }}
      />