问题描述

平常我们在项目中需要做下载文件的功能，比如下载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 = “下载啦.xlsx”; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可 a.style.display = “none”; // 障眼法藏起来a标签document.b【我爱线报网】ody.appendChild(a);// 将a标签追加到文档对象中 a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了 a.remove(); // 一次性的，用完就删除a标签 }

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

总结

上述代码便可以实现a标签访问前端静态资源，并下载的功能。好记性不如烂笔头，记录一下吧

给力项目：线报网会员可免费下载 加入会员
友情提醒： 请尽量登录购买，防止付款了不发货！
QQ交流群：226333560 站长微信：qgzmt2

温馨提示：本站提供的一切软件、教程和内容信息都来自网络收集整理，仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负，版权争议与本站无关。用户必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！