Vue之下载所有选中连接

最近在项目中有需求是要求能下载所有连接，当时是用.net的后台处理和jquery一起实现的。今天来看看怎么用Vue来实现这个。

效果图：

点击下载所有链接就会把勾选的记录里面的链接复制到剪切板，在迅雷或者其他下载软件即可一起下载。

实现思路：

如果有多少需要下载的链接就写对应的隐藏的文本框来记录下载链接，然后点击按钮则通过clipboard.js来实现把链接内容复制到剪切板。

每次勾选都把链接存进隐藏的文本框如果是取消勾选则需要去掉对应的链接。

所有代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>下载所有连接</title>
</head>
<script src="vue.min.js"></script>
<script src="clipboard.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<style type="text/css">
#test{text-align: center;margin:0 auto;}
#linkdiv{text-align: left;}
#linkdiv a{;}
table tr th{text-align: center}
</style>
<body><div id="test"><h1>vue之下载所有选中连接</h1><div id="linkdiv"><a href="javascript:void(0)" @click="selectAll(isSelectAll)"><span v-show="isSelectAll">取消</span><span v-show="!isSelectAll">全选</span></a><a href="javascript:void(0)" @click="copyLink1"  id='downLink1'>下载所有链接1</a><input type="hidden"  id="link1Input"  v-model="allLink1"/><a href="javascript:void(0)" id="downLink2" @click="copyLink2">下载所有链接2</a><input type="hidden" id="link2Input" v-model="allLink2"/></div><table class="table table-striped table-hover table-bordered"><thead><tr><th>勾选</th><th>名字</th><th>描述</th><th>下载链接1</th><th>下载链接2</th></tr></thead><tr v-for="item in dataList"><td><input type="checkbox" v-bind:checked="item.isSelect" @click="selectOne(item)" v-model="item.isSelect"/></td><td>{{item.name}}</td>  <td>{{item.test1}}</td> <td><a target="_bank" v-bind:href="item.link1">下载1</a></td>   <td><a target="_bank" v-bind:href="item.link2">下载2</a></td>   </tr></table></div>
</body>
<script >new Vue({el : "#test",data: {message: 'Copy These Text',allLink1:'',allLink2:'',dataList:[{isSelect:false,name:'测试例子1',test1:'123',link1:'http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg',link2:'http://img5.imgtn.bdimg.com/it/u=415293130,2419074865&fm=27&gp=0.jpg'},{isSelect:false,name:'测试例子2',test1:'456',link1:'http://img0.imgtn.bdimg.com/it/u=3972169330,4211815266&fm=27&gp=0.jpg',link2:'http://img3.imgtn.bdimg.com/it/u=2249893882,1165836821&fm=27&gp=0.jpg'},{isSelect:false,name:'测试例子3',test1:'789',link1:'http://img4.imgtn.bdimg.com/it/u=1645222675,1337033397&fm=27&gp=0.jpg',link2:'http://img0.imgtn.bdimg.com/it/u=889120611,3801177793&fm=27&gp=0.jpg'},],isSelectAll : false,},methods:{selectOne:function(item){if(item.isSelect!=true){this.allLink1 += item.link1 +"\n";this.allLink2 += item.link2 +"\n";}else{this.allLink1 = this.allLink1.replace(item.link1,"").replace("\n","");this.allLink2 = this.allLink2.replace(item.link2,"").replace("\n","");}},selectAll :function(isSelect){for (var i = 0, len = this.dataList.length; i < len; i++) {this.dataList[i].isSelect = !isSelect;}this.isSelectAll = !isSelect;},copyLink1 :function(){var url = this.allLink1;var clipboard = new ClipboardJS('#downLink1', {text: function() {return url;}});//成功回调clipboard.on('success', function(e) {alert("已将所有链接1存至剪切板,请用迅雷或者其他下载软件下载!");clipboard.destroy();});//失败回调clipboard.on('error', function(e) {// console.error('Action:', e.action);// console.error('Trigger:', e.trigger);});},copyLink2 :function(){var url = this.allLink2;var clipboard = new ClipboardJS('#downLink2', {text: function() {return url;}});//成功回调clipboard.on('success', function(e) { alert("已将所有链接2存至剪切板,请用迅雷或者其他下载软件下载!");clipboard.destroy();});}},computed :function(){}})
</script>
</html>

Vue之下载所有选中连接相关推荐

vue noVNC实现远程桌面连接
背景: 领导提出在vue前端打开远程桌面连接即电脑A通过浏览器页面访问电脑B. 一:noVnc是什么 noVNC是一个 HTML5 VNC 客户端,采用 HTML 5 WebSockets, Can ...
html5 长链接,Vue通过WebSocket建立长连接，连接
Vue通过WebSocket建立长连接,连接使用场景: 在项目开发中,后端需要处理一连串的逻辑,或者等待第三方的数据返回来进行处理之后在返回给前端,可能时间会很长,而且前端也不知道后端什么时候能处理 ...
vue中下载excel的使用，后端链接两种情况，一个是链接，一个是文件流
vue中下载excel使用一.这是第一种情况,后台链接地址返回的是一个url,这个时候我只要在导出按钮上绑定exportData()这个事件方法就好了 exportData() {this.time ...
vue实现下载EXCEL模板、导入EXCEL文件
vue实现下载EXCEL模板.导入EXCEL文件在项目中很常见需要先下载模板,根据模板导入下面展示一些下载模板代码片段. 需要有一个下载模板的接口,点击下载触发函数,调用接口,返回下载地址接口 ...
vue复选框选中一个全选中了
vue复选框选中一个全选中了在业务开发中,使用了checkbox-group组件,发现点击其中的一个选项后,所有数据都被选中了,取消也是全部取消了. 原因:绑定数据的时候,定义的是字符串,修改为数组 ...
vue的下载安装和使用
一.vue的下载 vue的下载安装的方式有多种,具体详情可以查看vue.js的官方文档:vue.js官方文档. 先写一种,其他的以后补充. 1.使用script标签的的方式引入vue.js 第一步:下 ...
vue，下载导出文件，开新窗口导出
vue,下载导出文件,开新窗口导出封装设置url参数方法 //设置url参数 //setUrlPrmt({'a':1,'b':2}) //显示 a=1&b=2 setUrlPrmt(obj ...
实现vue页面下载成word文档
首先需要两个js文件,jquery.wordexport.js 和 FileSaver.js,源码放在下面 // jquery.wordexport.jsif (typeof jQuery !== ' ...
vue接入下载文件接口
vue接入下载文件接口后端接口返回字节数组或者文件流返回下载的文件时,前端使用vue接入下载文件的方法如下: 前端部分 1.前端下载文件方法 // obj:后端返回的的字节数组或者文件流:name: ...

Vue之下载所有选中连接

Vue之下载所有选中连接

Vue之下载所有选中连接相关推荐

最新文章

热门文章