vue中点击按钮下载文件的实现方式
更新时间：2023年10月24日 09:13:37 作者：橘哥哥
这篇文章主要介绍了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);
},
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue路由跳转传参数的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了Vue瀑布流插件的使用示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了vue.js源代码core scedule.js的学习笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
vue是一款流行的前端框架,其中很多操作都是基于数组进行的,这篇文章主要介绍了Vue将后端数据转成树形结构的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-06-06
不过 Vue 本身含有非常丰富的功能，要用 Vue 搭建完整的应用，仍然需要了解大量 Vue 设计概念和操作技巧。这篇文章主要介绍了Vue.js 十五分钟入门图文教程,需要的朋友可以参考下2018-09-09
vue2.0 better-scroll 实现移动端滑动的示例代码
本篇文章主要介绍了vue2.0 better-scroll 实现移动端滑动的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2018-01-01
Vue是人气爆棚且地表最强的JS（JavaScript）框架,祂允许我们构建动态交互式的Web App,然但是,和任何软件雷同,Vue App偶尔会遭遇内存泄漏,导致性能暴跌和意外行为,今天,我们将深入Vue App内存泄漏的原因,并探讨识别和修复这些问题的锦囊妙计2023-11-11
这篇文章主要介绍了Vue组件通信方法案例总结,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
vue.js使用v-pre与v-html输出HTML操作示例
这篇文章主要介绍了vue.js使用v-pre与v-html输出HTML操作,结合实例形式分析了vue.js基于v-pre与v-html属性输出HTML的具体操作技巧,需要的朋友可以参考下2018-07-07
当我们不想每次跳转路由都会重新加载页面时（重新加载页面很耗时）,就可以考虑使用keep-alive缓存页面了,这篇文章主要给大家介绍了关于vue3缓存页面keep-alive及路由统一处理的相关资料,需要的朋友可以参考下2021-10-10
最新评论