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" :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);
},