vue下载静态文件，无法从网站提取文件

如图所示，无法下载本地文件，先看代码:

const dowmTemplate = () => {
  // 创建一个隐藏的<a>标签
  const link = document.createElement('a')
  link.style.display = 'none'
  document.body.appendChild(link)

  // 设置文件的 URL 和名称
  link.setAttribute('download', '卡券发放模板.xlsx')
  link.setAttribute('href', './卡券发放模板.xlsx')

  // 模拟点击链接进行下载
  link.click()

  // 移除创建的<a>标签
  document.body.removeChild(link)
}

后面发现上href写错了。

修改后代码：

const dowmTemplate = () => {
  // 创建一个隐藏的<a>标签
  const link = document.createElement('a')
  link.style.display = 'none'
  document.body.appendChild(link)

  // 设置文件的 URL 和名称
  link.setAttribute('download', '卡券发放模板.xlsx')
  link.setAttribute('href', `/manage/tpl/卡券发放模板.xlsx?t=${Date.now()}`)

  // 模拟点击链接进行下载
  link.click()

  // 移除创建的<a>标签
  document.body.removeChild(link)
}

也可以：

const dowmTemplate = () => {
  const url = `/manage/tpl/卡券发放模板.xlsx?t=${Date.now()}`
  window.open(url)
}

在Vue中，Excel文件一般放在static文件夹中。

在Vue 2.0版本中，static文件夹与src文件同级。

在Vue 3.0版本中，static文件夹需要放在public文件目录下。

注意：引用路径必须使用英文，防止打包引用地址错乱导致下载失败。