关于javascript:vue中使用a标签下载静态资源文件比如excelpdf等后端不参与

8次阅读

共计 1043 个字符，预计需要花费 3 分钟才能阅读完成。

平时咱们在我的项目中须要做下载文件的性能，比方下载 excel 表格、比方下载 pdf 文件、比方下载 word 文档，这样的性能，个别是后端做，即：后端返回一个流文件、或者返回一个 url 地址。

然而，实际上，前端也是能够做的。很简略，应用 a 标签的下载性能即可。不过要留神动态文件寄存的地位。

留神，前端做动态资源的下载适宜固定的数据，不和数据库交互的数据，比方 excel 模板、比方注意事项.docx 文档什么的。反之，后端做会更加适合。

在咱们做 vue 我的项目的 public 文件夹下新建 static 文件夹，这个文件夹寄存的咱们须要下载的动态资源文件，如下图，这里我寄存了一个 模板.xlsx 文件，待会须要下载这个文件。当然 static 文件夹寄存 pdf 文件、word 文件什么的都能够的。static 文件夹下也能够再建文件夹精细化寄存，只有 a 标签下载的时候门路对得上即可，这里不赘述。

留神，这里要在 public 文件夹中新建文件夹寄存动态资源，不能在 src 文件夹中新建文件夹寄存动态资源，因为 public 文件夹中的文件资源不会被 npm run build 打包编译。大家打包一下，就会发现 模板.xlsx 文件 是寄存在dist/static 文件夹 中

假如咱们是点击按钮下载动态资源，代码如下：

// html
<el-button type="primary" plain @click="frontDownload"> 本地下载 </el-button>

//js
frontDownload() {var a = document.createElement("a"); // 创立一个 <a></a> 标签
  a.href = "/static/ 模板.xlsx"; // 给 a 标签的 href 属性值加上地址，留神，这里是绝对路径，不必加 点.
  a.download = "下载啦"; // 设置下载文件的文件名
  a.style.display = "none"; // 障眼法藏起来 a 标签
  document.body.appendChild(a); // 将 a 标签追加到文档对象中
  a.click(); // 模仿点击了 a 标签，会触发 a 标签的 href 的读取，浏览器就会主动下载了
  a.remove(); // 一次性的，用完就删除 a 标签}