vue实现点击按钮下载文件功能


Posted in Javascript onOctober 11, 2019

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,如下图,可以正常下载

vue实现点击按钮下载文件功能

以下是el-link文字链接的属性

vue实现点击按钮下载文件功能

总结

以上所述是小编给大家介绍的vue实现点击按钮下载文件功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
Javascript模块化编程详解
Dec 01 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 #Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 #Javascript
JsonProperty 的使用方法详解
Oct 11 #Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 #Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 #Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 #Javascript
vue控制多行文字展开收起的实现示例
Oct 11 #Javascript
You might like
在PHP中执行系统外部命令
2006/10/09 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
python根据出生日期获得年龄的方法
2015/03/31 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
10个顶级Python实用库推荐
2021/03/04 Python
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
实习单位接收函
2014/01/11 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
揭牌仪式主持词
2014/03/19 职场文书
个人安全承诺书
2014/05/22 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
党员带头倡议书
2015/04/29 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
安全教育的主题班会
2015/08/13 职场文书