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

问题形容

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

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

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

步骤

第一步，public文件夹下新建static文件夹寄存动态资源

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

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

第二步，模仿a标签下载文件即可

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

// 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标签
}

如果是后端返回文件地址的那种模式，a.href的值就是后端返回的地址

总结

上述代码便能够实现a标签拜访前端动态资源，并下载的性能。好忘性不如烂笔头，记录一下吧