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

Dnn012025-05-21 11:25

前端读取本地项目中 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 和 columns
    excelData.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，确保文件可以下载