Vue.js项目从assets下载Excel文件报错，求可行解决方案

常见报错原因 #

直接用相对路径引用assets目录下的Excel文件时，webpack打包会对资源文件名做哈希处理，导致原路径失效；部分浏览器会直接打开Excel文件而非触发下载，也会造成“报错”的错觉。

解决方案 #

方案1：将文件放到public目录（最简单）

把template.xlsx移动到项目根目录的public文件夹下，修改<a>标签代码：

<template>
  <div class="row mt-5">
    <a href="/template.xlsx" download="template.xlsx">Download file</a>
  </div>
</template>

public目录下的文件会被直接复制到打包后的根目录，路径不会被修改；download属性可强制浏览器触发下载行为，而非打开文件。

方案2：通过import导入assets中的资源

若必须将文件放在assets目录，可通过import获取webpack处理后的正确路径：

<template>
  <div class="row mt-5">
    <a :href="excelUrl" download="template.xlsx">Download file</a>
  </div>
</template>

<script setup>
// 根据实际项目路径调整@的指向
import excelUrl from '@/assets/template.xlsx'
</script>

方案3：按钮触发Blob下载（适配后端接口返回文件流）

如果Excel文件是后端接口返回的文件流，可通过按钮点击动态创建下载链接：

<template>
  <div class="row mt-5">
    <button @click="downloadExcel">Download file</button>
  </div>
</template>

<script setup>
import axios from 'axios'

const downloadExcel = async () => {
  try {
    const res = await axios({
      url: '/api/your-download-api', // 替换为实际后端接口地址
      method: 'GET',
      responseType: 'blob' // 必须指定响应类型为blob
    })
    // 创建临时下载链接
    const blobUrl = window.URL.createObjectURL(new Blob([res.data]))
    const link = document.createElement('a')
    link.href = blobUrl
    link.download = 'template.xlsx'
    document.body.appendChild(link)
    link.click()
    // 清理临时资源
    window.URL.revokeObjectURL(blobUrl)
    document.body.removeChild(link)
  } catch (err) {
    console.error('下载失败:', err)
  }
}
</script>

内容的提问来源于stack exchange，提问作者user16365685