jQuery.qrcode 生成二维码,并使用 jszip、FileSaver 下载 zip 压缩包至本地。
- 生成二维码
- 引用 jquery.qrcode.js ;连接:https://files.cnblogs.com/files/kitty-blog/jquery.qrcode.js 、https://files.cnblogs.com/files/kitty-blog/jquery.qrcode.min.js
1 /** 2 * 生成二维码 3 * @param {string} url 二维码url 4 * @param {string } picName 图片名称 5 */ 6 function create_QR(url, picName) { 7 //jquery.qrcode.js 插件生成二维码 8 $('#qrcodeid').qrcode({ 9 width: 140, 10 height: 140, 11 render: "canvas", //设置渲染方式 table canvas 12 typeNumber: -1, //计算模式 13 correctLevel: 0,//纠错等级 14 background: "#ffffff",//背景颜色 15 foreground: "#000000",//前景颜色 16 text: url //链接(http开头的,自动跳状态链内容)或者文字 17 }); 18 var len = $('#qrcodeid').find("canvas").length; 19 //给当前生成的canvas 添加data-picname 作为下载后的图片名称(.png类型图片) 20 $($('#qrcodeid').find("canvas")[len - 1]).data().picname = picName; 21 }
- 生成压缩包下载
- 引用jszip.js 和 FileSaver.js 连接:https://files.cnblogs.com/files/kitty-blog/jszip.js、https://files.cnblogs.com/files/kitty-blog/jszip.min.js、https://files.cnblogs.com/files/kitty-blog/FileSaver.js
1 /**下载二维码压缩包 */ 2 function download() { 3 //创建压缩包对象 jszip.js 4 var zip = new JSZip(); 5 //获取到所有已经生成好的二维码 6 var canvases = $("#qrcodeid").find('canvas'); 7 $.each(canvases, function (i, item) { 8 var imgData = item.toDataURL('image/png').split('base64,')[1]; 9 var picName = $(item).data().picname; 10 zip.file(picName, imgData, { base64: true }); 11 }); 12 //下载压缩包 13 zip.generateAsync({ type: "blob" }).then(function (content) { 14 // see FileSaver.js 15 saveAs(content, "二维码.zip"); 16 }); 17 //移除掉loading 18 setTimeout(function () { 19 $('#downloadLabel').removeClass("whirl standard"); 20 }, 1500); 21 }
Html:
1 <div id="qrcodeid" class="hidden qr_area"> 2 </div>
思路:根据用户勾选的数据内容,分别根据数ID 、标题等生成 对应的数据连接 url 、图片名称。
1 /** 2 * 点击下载 3 * @param {string} checkBoxName 复选框的name 4 */ 5 6 function download_data_check(checkBoxName) { 7 //check 是否选中需要生的二维码 8 var _checkedAll = $("input[name=" + checkBoxName + "]:checked"); 9 if (_checkedAll.length === 0) { 10 baseAlert("warning", "请选择需要下载的内容"); 11 return false; 12 } 13 //添加loading 14 $('#downloadLabel').addClass("whirl standard"); 15 //获取到需要的数据信息 16 $.each(_checkedAll, function (i, item) { 17 var id = $(item).val(); 18 var title = $(item).data().title; 19 var author = $(item).data().author; 20 getQR_info(id, title, author); 21 }); 22 //开始下载压缩包 23 download(); 24 }
1 /** 2 * 下载二维码 3 * @param {int} id 数据ID 4 * @param {string} title 标题 5 * @param {string} author 作者 6 */ 7 function getQR_info(id, title, author) { 8 //二维码链接 9 var url = window.location.origin + '/WX/Inscription/Detail/' + id; 10 //图片名称 png类型 11 var pic = title + author + '.png'; 12 //生成二维码 13 create_QR(url, pic); 14 }
转载于:https://www.cnblogs.com/kitty-blog/p/9583303.html
jQuery.qrcode 生成二维码,并使用 jszip、FileSaver 下载 zip 压缩包至本地。相关推荐
- 使用jquery.qrcode生成二维码(转)
jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单: 1.首先在页面中加入jquery库文件和qrcode插件. 代码 <script type=& ...
- 使用jquery.qrcode生成二维码
1.首先在页面中加入jquery库文件和qrcode插件. <script type="text/javascript" src="jquery.js"& ...
- 使用jQuery的插件qrcode生成二维码(静态+动态生成)及常见问题解决方法
使用jQuery的插件qrcode生成二维码(静态+动态生成)及常见问题解决方法 参考文章: (1)使用jQuery的插件qrcode生成二维码(静态+动态生成)及常见问题解决方法 (2)https: ...
- C# 利用QRCode生成二维码图片
网上生成二维码的组件是真多,可是真正好用的,并且生成速度很快的没几个,QRCode就是我在众多中找到的,它的生成速度快.但是网上关于它的使用说明,真的太少了,大都是千篇一律的复制粘贴.这是本要用它做了 ...
- 关于QRCode生成二维码(背景图、Logo)
关于QRCode生成二维码的代码 /// <summary> /// 创建二维码 /// </summary> /// <param name="QRStrin ...
- php使用Qrcode生成二维码
php使用Qrcode生成二维码 首先检查php.ini Gd 库要打开 use QrCode; //控制器引用public function index(){include 'phpqrcode.p ...
- 用ThoughtWorks.QRCode生成二维码时出现“索引超出了数组界限”的错误
用ThoughtWorks.QRCode生成二维码时出现"索引超出了数组界限"的错误 字符串较长的情况下,用ThoughtWorks.QRCode生成二维码时出现"索引超 ...
- qrcode 生成二维码,带logo 带文字描述
qrcode 生成二维码 1.引入 pom.xml 2. ResourceRenderer 3. QRCodeUtil 4. QRCodeController 5. HTML 6. 测试 1.引入 p ...
- C语言使用QRcode生成二维码
C语言使用QRcode生成二维码的简单操作 首先需要QRcode源码包 可以参考这位大神的文章: https://blog.csdn.net/qq_21475601/article/details/7 ...
- qr-code 生成二维码
1.下载: composer require endroid/qr-code php: >=7.2 2.新建Qrcodes.php二维码生成类 use Endroid\QrCode\ErrorC ...
最新文章
- oracle分页性能不同,oracle高效分页
- Kotlin系列之类和属性
- sort and uniq
- 【转】Thunderbird中配置签名
- Java:使用SingletonStream获得性能
- React开发(267):ant design upload简单上传
- vs2010帮助文件安装完全攻略
- 【2019第十届蓝桥杯省赛C/C++B组题解】(非官方题解)
- macbook 放flash发烫,转html5
- Java的Interrupt与线程中断
- [转]vc6如何设置Unicode字符集
- 大数据——Python数据爬取
- 墨刀怎么注册_墨刀的使用
- 如何获取QQ邮箱授权码?
- 半年损失超20亿美元,区块链安全赛道被资本疯抢
- Python编程从入门到实践 -----第4章、操作列表(课后习题答案)
- 生成PDF文件方案--学习中
- ubuntu:下载ubuntu内核
- MSDN如何找到和打开
- 教资考试中计算机知识常考点,教师资格证笔试:初中美术必背考点汇总(3)...
热门文章
- JAVA中两个数组比较可以使用Arrays.equals()
- 使用内存映射提高BufferedRandoAccessFile性能(测试可用)
- 我的压缩软件选择:7zip软件+Zip格式
- 梦记录:1204(梦到观世音菩萨像)
- 上班时间应该包含交通时间
- 吾是否有“受迫害妄想症”之反省
- VS找不到System.Web.Extensions.dll的解决办法
- 如何判断NSMutableDictionary是否有某个key
- 格力可以考虑收购一个手机品牌
- ios 获取最后一个cell_ios – UICollectionView estimatedItemSize – 最后一个单元格未对齐...