layui实现二维码弹窗、并下载到本地的方法


Posted in Javascript onSeptember 25, 2019

在服务器端写好生成二维码的方法,在下面调用

具体实现方法如下,为了方便理解,直接附上源码,加上注释会更加容易理解吧

function share(vote_id){
 		//二维码生成链接
  var url = "{:U('Admin/Vote/logo')}?vote_id="+vote_id;
  //弹窗
  var index = layer.open({
  		//type:1 表示页面层
   type: 1,
   title: '分享二维码',
   //是否点击遮罩关闭
   shadeClose: true,
   //样式类名,可以自定义弹窗样式
   skin:'demo_share',
   //弹层外区域
   shade: 0.3,
   maxmin: false, //开启最大化最小化按钮
   //宽高
   area: ['480px','320px'],
   //内容
   content: "<img src='"+url+"' alt=''>",
   //弹窗下方的按钮
   btn:['<i class="layui-icon" style="margin-right: 10px;"></i>下载图片','取消','确定'],
   //绑定第一个按钮的点击事件
   btn1: function(index) {
				//下载图片到本地
    var a = document.createElement('a');
    var event = new MouseEvent('click');
    a.download = "分享投票二维码";
    a.href = url;
    a.dispatchEvent(event);
   }
  });

 }

若有问题或错误,请小伙伴们在下方留言评论

以上这篇layui实现二维码弹窗、并下载到本地的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery datepicker 使用方法
May 20 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
Vue.js中的computed工作原理
Mar 22 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
使用localStorage替代cookie做本地存储
Sep 25 #Javascript
JavaScript使用localStorage存储数据
Sep 25 #Javascript
Vue路由守卫之路由独享守卫
Sep 25 #Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 #Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 #Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 #Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 #Javascript
You might like
PHP与SQL注入攻击[二]
2007/04/17 PHP
深入理解PHP原理之异常机制
2010/08/21 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
javascript 计算两个整数的百分比值
2009/12/26 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
通过python检测字符串的字母
2020/02/18 Python
Django之腾讯云短信的实现
2020/06/12 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
初中生评语大全
2014/04/24 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
倡导文明标语
2014/06/16 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
单位工作证明范本
2015/06/15 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python