如何纯前端实现文件下载

业务场景

有一个下载文件的功能，不引入后端资源，纯前端应该如何实现？

解决方案

在vue2或者vue3项目中，可以把文件放在 public 文件夹下，然后使用a标签进行文件下载。
如：我要下载的文件是模版.xlsx 。首先，我把这个文件直接放到了 public 文件夹里。然后，添加下面的代码，即可实现点击“下载模版”就下载文件的功能。

<template>
  <a
    href="/模版.xlsx"
    download
    >
    下载模板
  </a>
</template>

为什么 href 这样写就能获取到文件？

在 Vue CLI 项目中，public 文件夹中的文件可以直接通过相对路径进行访问。所以当你使用 /模板.xlsx 这样的路径时，Vue 会将其解析为项目根目录下的 public 文件夹中的 模板.xlsx 文件。
这是因为 Vue CLI 在构建项目时，会将 public 文件夹中的内容复制到最终的构建目录中（默认是 dist 文件夹）。因此，public 文件夹中的文件可以直接通过相对路径访问，而不需要经过额外的处理。

如果我把文件上传到别的服务器再下载行不行？

可以。但是可能会出现以下2个问题：

1. 在chrome浏览器，出现了文件被重命名的问题。
2. 在Edge 浏览器仲，会无视 download 属性自动打开 office 而不是下载文件。
   如果要解决这些问题，你可能需要在响应头增加Content-Disposition: Attachment来处理。