jQuery.qrcode 生成二維碼，並使用 jszip、FileSaver 下載 zip 壓縮包至本地。

胡倩倩0903發表於2018-09-04
jQueryJS
  • 生成二維碼
  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 }

 

相關文章