1. 程式人生 > 其它 >前端上傳獲取excel檔案後,如何讀取excel檔案的內容

前端上傳獲取excel檔案後,如何讀取excel檔案的內容

1、安裝xlsx

npm install xlsx --save-dev

https://docs.sheetjs.com/

2、引入xlsx並封裝讀取excel方法

import * as XLSX from "xlsx";
/**
 * 讀取excel內容
 * @param {*} file
 * @returns
 */
export const readExcel = (file) => {
  return new Promise((resolve, reject) => {
    try {
      //獲取上傳物件
      const fileReader = new FileReader();
      fileReader.onload = (event) => {
        const fileData = event.target.result;
        //讀取excel檔案
        const workboot = XLSX.read(fileData, {
          type: "binary",
        });
        //暫預設讀取第一個Sheet
        let sheel0 = workboot.SheetNames[0];
        let blockArr = XLSX.utils.sheet_to_json(workboot.Sheets[sheel0]);
        resolve(blockArr);
      };
      fileReader.readAsBinaryString(file);
    } catch (e) {
      reject(e);
    }
  });
};

3、頁面引入方法,獲取excel內容

 <input class="uploadExcel" id="uploadExcel" type="file" @change="changeFile" accept=".xlsx">
const changeFile = async ()=>{
    let xlsx = file.target.files[0];
    if (!xlsx) return;
    const data = await readExcel(file);   //file指的是獲取的excel檔案物件,如e.file
    console.log(data);
}