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 事件对象属性小结
Apr 27 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
DWR中各种java方法的调用
May 04 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
使用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
Cannot modify header information错误解决方法
2008/10/08 PHP
2014过年倒计时示例
2014/01/31 PHP
PHP的拦截器实例分析
2014/11/03 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
pandas分组聚合详解
2020/04/10 Python
Python网页解析器使用实例详解
2020/05/30 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
生态学毕业生自荐信
2013/10/27 职场文书
数控专业自荐书范文
2014/03/16 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
检察院起诉意见书
2015/05/20 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
辩论赛新闻稿
2015/07/17 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
MySQL七种JOIN类型小结
2021/10/24 MySQL