zoukankan      html  css  js  c++  java
  • jQuery.qrcode 生成二维码,并使用 jszip、FileSaver 下载 zip 压缩包至本地。

    • 生成二维码
    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          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 }
  • 相关阅读:
    【c/c++】#pragma的用法
    【c/c++】#pragma的用法
    【matlab】matlab中 mcc、mbuild和mex命令详解
    【codecs】数据流ES、PES、TS、PS简介
    【codecs】数据流ES、PES、TS、PS简介
    【SVAC】SVAC标准简介
    【python】Python实现SMTP发送邮件
    【c】#pragma once 与#ifndef的区别与作用
    【c】#pragma once 与#ifndef的区别与作用
    【Tools/PC】如何在一台电脑上实现双屏幕显示?
  • 原文地址:https://www.cnblogs.com/kitty-blog/p/9583303.html
Copyright © 2011-2022 走看看