网站备案多个域名备案单上填几个,dw网页制作超链接,网络系统建设与运维职业技能等级证书,秦皇岛开发区前端读取本地项目中 public/a.xlsx 文件中的数据 vue3 项目中需要在 Vue3 项目中读取 public/a.xlsx 文件#xff0c;可以使用 fetch API 来获取文件内容
一、安装 xlsx
首先#xff0c;你需要安装 xlsx 库#xff1a;
npm install xlsx二、在需要用的页面里引入xlsx
im…前端读取本地项目中 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确保文件可以下载
