- 生成二維碼
- 引用 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 }