Vue项目中如何读取public目录下的xlsx文件？

架构老林

2026-6-25

浏览器环境读取public目录下XLSX文件的可行方案

浏览器端不允许直接通过文件路径读取服务器public目录的文件，XLSX.readFile()是Node.js环境专属API，在浏览器中调用必然触发权限报错。以下是两种可行的实现方式：

方式一：通过Fetch API获取静态资源后解析

将XLSX文件作为前端静态资源，通过HTTP请求获取后转为ArrayBuffer解析，这是浏览器环境最通用的方案：

async handleFile() {
  try {
    // 确保路径可通过HTTP访问：public目录下的文件直接写相对/绝对路径，地址栏输入该路径需能正常访问文件
    const response = await fetch('/xlsx/quiztemplate.xlsx');
    const arrayBuffer = await response.arrayBuffer();
    const workbook = XLSX.read(arrayBuffer, { type: 'array' });
    
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];
    const excelData = XLSX.utils.sheet_to_json(worksheet);
    console.log(excelData);
  } catch (error) {
    console.error('读取文件失败:', error);
  }
}

方式二：用户手动上传文件（业务允许时）

如果允许用户自行上传测验模板，可通过文件输入框接收文件，再用FileReader解析：

<input type="file" accept=".xlsx" id="quizTemplateInput">

document.getElementById('quizTemplateInput').addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file) return;
  
  const arrayBuffer = await file.arrayBuffer();
  const workbook = XLSX.read(arrayBuffer, { type: 'array' });
  
  const firstSheetName = workbook.SheetNames[0];
  const worksheet = workbook.Sheets[firstSheetName];
  const excelData = XLSX.utils.sheet_to_json(worksheet);
  console.log(excelData);
});