前端上傳獲取excel檔案後,如何讀取excel檔案的內容
阿新 • • 發佈:2022-12-11
1、安裝xlsx
npm install xlsx --save-dev
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); }