前端讀取本地項目中 public/a.xlsx 文件中的數據 vue3

項目中需要在 Vue3 項目中讀取 public/a.xlsx 文件，可以使用 fetch API 來獲取文件內容

一、安裝 xlsx

首先，你需要安裝 xlsx 庫：

npm install xlsx

二、在需要用的頁面里引入xlsx

import * as XLSX from 'xlsx';

三、讀取 Excel 文件

//在自己的方法里
try {// 使用 fetch API 獲取 public/a.xlsx 文件const response = await fetch("/abc/a.xlsx");// ！！！！！// ！！！！！！注意：這里/abc是因為我的項目里的vue.config.js配置了publicPath: "/abc",這里根據自己代碼的情況來寫本地路徑// ！！！！！const arrayBuffer = await response.arrayBuffer();// 使用 xlsx 解析 Excel 文件const workbook = XLSX.read(arrayBuffer, { type: "array" });const firstSheetName = workbook.SheetNames[0];const worksheet = workbook.Sheets[firstSheetName];// 將工作表轉換為 JSON 格式const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });// 更新 excelData 和 columnsexcelData.value = jsonData;columns.value = jsonData[0] || []; // 假設第一行是列名console.log(1, excelData.value);console.log(2, columns.value);} catch (error) {console.error("Error fetching or parsing Excel file:", error);}

注意：文件路徑/abc是因為我的項目里的vue.config.js配置了publicPath: “/abc”,這里根據自己代碼的情況來寫本地路徑
如果沒有特殊配置，const response = await fetch(‘/a.xlsx’)即可

如果讀取不出來，大多數情況是文件路徑問題，可以在瀏覽器中直接訪問 http://localhost:your-port/a.xlsx，確保文件可以下載