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

 /**

  * 生成二维码

  * @param {string} url 二维码url

  * @param {string } picName 图片名称

  */

 function create_QR(url, picName) {

     //jquery.qrcode.js 插件生成二维码

     $('#qrcodeid').qrcode({

         width: 140,

         height: 140,

         render: "canvas", //设置渲染方式 table canvas

         typeNumber: -1,  //计算模式

         correctLevel: 0,//纠错等级

         background: "#ffffff",//背景颜色

         foreground: "#000000",//前景颜色

         text: url //链接（http开头的，自动跳状态链内容）或者文字

     });

     var len = $('#qrcodeid').find("canvas").length;

     //给当前生成的canvas 添加data-picname 作为下载后的图片名称（.png类型图片）

     $($('#qrcodeid').find("canvas")[len - 1]).data().picname = picName;

 }

生成压缩包下载

引用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

 /**下载二维码压缩包 */

 function download() {

     //创建压缩包对象 jszip.js

     var zip = new JSZip();

     //获取到所有已经生成好的二维码

     var canvases = $("#qrcodeid").find('canvas');

     $.each(canvases, function (i, item) {

         var imgData = item.toDataURL('image/png').split('base64,')[1];

         var picName = $(item).data().picname;

         zip.file(picName, imgData, { base64: true });

     });

     //下载压缩包

     zip.generateAsync({ type: "blob" }).then(function (content) {

         // see FileSaver.js

         saveAs(content, "二维码.zip");

     });

     //移除掉loading

     setTimeout(function () {

         $('#downloadLabel').removeClass("whirl standard");

     }, 1500);

 }

Html:

 <div id="qrcodeid" class="hidden qr_area">

 </div>

思路：根据用户勾选的数据内容，分别根据数ID 、标题等生成对应的数据连接 url 、图片名称。

 /**

  * 点击下载

  * @param {string} checkBoxName 复选框的name

  */

 function download_data_check(checkBoxName) {

     //check  是否选中需要生的二维码

     var _checkedAll = $("input[name=" + checkBoxName + "]:checked");

     if (_checkedAll.length === 0) {

         baseAlert("warning", "请选择需要下载的内容");

         return false;

     }

     //添加loading

     $('#downloadLabel').addClass("whirl standard");

     //获取到需要的数据信息

     $.each(_checkedAll, function (i, item) {

         var id = $(item).val();

         var title = $(item).data().title;

         var author = $(item).data().author;

         getQR_info(id, title, author);

     });

     //开始下载压缩包

     download();

 }

 /**

  * 下载二维码

  * @param {int} id 数据ID

  * @param {string} title 标题

  * @param {string} author 作者

  */

 function getQR_info(id, title, author) {

     //二维码链接

     var url = window.location.origin + '/WX/Inscription/Detail/' + id;

     //图片名称 png类型

     var pic = title + author + '.png';

     //生成二维码

     create_QR(url, pic);

 }