欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery.qrcode 生成二维码,并使用 jszip、FileSaver 下载 zip 压缩包至本地。

程序员文章站 2022-03-28 20:00:52
生成二维码 生成压缩包下载 Html: 思路:根据用户勾选的数据内容,分别根据数ID 、标题等生成 对应的数据连接 url 、图片名称。 ......
  • 生成二维码
  1. 引用 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 }
  • 生成压缩包下载
  1. 引用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 }