问题描述
平常我们在项目中需要做下载文件的功能,比如下载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.body.appendChild(a); // 将a标签追加到文档对象中
a.click(); // 模拟点击了a标签,会触发a标签的href的读取,浏览器就会自动下载了
a.remove(); // 一次性的,用完就删除a标签
}
如果是后端返回文件地址的那种形式,a.href的值就是后端返回的地址
总结
上述代码便可以实现a标签访问前端静态资源,并下载的功能。好记性不如烂笔头,记录一下吧
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。