- 生成二维码
- 引用 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 }