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 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
js实现登录验证码
Dec 22 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
微信小程序自定义弹出层效果
May 26 Javascript
使用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
德生PL330的评价与改造
2021/03/02 无线电
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
vue组件name的作用小结
2018/05/23 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
python批量实现Word文件转换为PDF文件
2018/03/15 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
Python命令行click参数用法解析
2019/12/19 Python
毕业大学生自荐信
2014/06/17 职场文书
部门2014年度工作总结
2014/11/12 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
工作检讨书范文
2015/01/23 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
公司规章制度范本
2015/08/03 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
讲解MySQL增删改操作
2022/05/06 MySQL