当前位置：首页 > news >正文

前端读取本地项目中 public/a.xlsx 文件中的数据 vue3

news 来源：原创 2025/5/21 9:52:42

前端读取本地项目中 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，确保文件可以下载在这里插入图片描述