vue中点击按钮下载文件的实现方式
作者：橘哥哥
这篇文章主要介绍了vue中点击按钮下载文件的实现方式,具有很的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue点击按钮下载文件
方法一
当后端直接返回文件下载路径给你时
项目中需要用到文件下载功能，查了资料发现需要用到a标签的特性，但是这边需要用到点击按钮下载，懒得写样式
于是用了以下代码：
<div class="btns">
<el-button size="mini" type="primary" @click="$router.push(`/portal/${item.id}/detail`)">查看软件</el-button>
<el-link target="_blank" :href="item.sourceUrl | filterUrl" rel="external nofollow" :underline="false" style="margin-left:15px">
<el-button size="mini" type="warning">软件下载</el-button>
</el-link>
</div>
在el-button的外面套了一层el-link，
如下图，可以正常下载
以下是el-link文字链接的属性
新增方法二
当后端返回文件UID给你是时
有时候，后端接口返回的是文件的uid，需要调用接口获取文件的相关信息
返回值如下图
此处如果用第一种方法肯定不行，于是做如下处理
handLoad(uid){ //handload可以绑到下载按钮上,点击按钮时调用此方法
//此方法根据自己项目来的,getFileInfoByUid是项目接口,根据项目自行调整
getFileInfoByUid(uid).then(res=>{
//res就是上图的返回值,然后调用下面的download方法
this.download(res.name,res.originalPath)
})
},
download(name,url){
const ele = document.createElement('a');
ele.setAttribute('href', this.$options.filters['filterUrl'](url));
//this.$options.filters['filterUrl']是调用全局过滤器,filterUrl是你自己项目main.js里面定义的过滤器
ele.setAttribute('download',name);
ele.style.display = 'none';
document.body.appendChild(ele);
ele.click();
document.body.removeChild(ele);
},
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。