方法一: 当后端直接返回文件下载路径给你时
.项目中需要用到文件下载功能,查了资料发现需要用到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" :underline="false" style="margin-left:15px">
<el-button size="mini" type="warning">软件下载</el-button>
</el-link>
</div>
在el-button的外面套了一层el-link,如下图,可以正常下载
以下是el-link文字链接的属性
2020/8/13----
新增方法二: 当后端返回文件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);
},