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

转载于:https://www.cnblogs.com/kitty-blog/p/9583303.html

jQuery.qrcode 生成二维码,并使用 jszip、FileSaver 下载 zip 压缩包至本地。相关推荐

  1. 使用jquery.qrcode生成二维码(转)

    jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单: 1.首先在页面中加入jquery库文件和qrcode插件. 代码   <script type=& ...

  2. 使用jquery.qrcode生成二维码

    1.首先在页面中加入jquery库文件和qrcode插件. <script type="text/javascript" src="jquery.js"& ...

  3. 使用jQuery的插件qrcode生成二维码(静态+动态生成)及常见问题解决方法

    使用jQuery的插件qrcode生成二维码(静态+动态生成)及常见问题解决方法 参考文章: (1)使用jQuery的插件qrcode生成二维码(静态+动态生成)及常见问题解决方法 (2)https: ...

  4. C# 利用QRCode生成二维码图片

    网上生成二维码的组件是真多,可是真正好用的,并且生成速度很快的没几个,QRCode就是我在众多中找到的,它的生成速度快.但是网上关于它的使用说明,真的太少了,大都是千篇一律的复制粘贴.这是本要用它做了 ...

  5. 关于QRCode生成二维码(背景图、Logo)

    关于QRCode生成二维码的代码 /// <summary> /// 创建二维码 /// </summary> /// <param name="QRStrin ...

  6. php使用Qrcode生成二维码

    php使用Qrcode生成二维码 首先检查php.ini Gd 库要打开 use QrCode; //控制器引用public function index(){include 'phpqrcode.p ...

  7. 用ThoughtWorks.QRCode生成二维码时出现“索引超出了数组界限”的错误

    用ThoughtWorks.QRCode生成二维码时出现"索引超出了数组界限"的错误 字符串较长的情况下,用ThoughtWorks.QRCode生成二维码时出现"索引超 ...

  8. qrcode 生成二维码,带logo 带文字描述

    qrcode 生成二维码 1.引入 pom.xml 2. ResourceRenderer 3. QRCodeUtil 4. QRCodeController 5. HTML 6. 测试 1.引入 p ...

  9. C语言使用QRcode生成二维码

    C语言使用QRcode生成二维码的简单操作 首先需要QRcode源码包 可以参考这位大神的文章: https://blog.csdn.net/qq_21475601/article/details/7 ...

  10. qr-code 生成二维码

    1.下载: composer require endroid/qr-code php: >=7.2 2.新建Qrcodes.php二维码生成类 use Endroid\QrCode\ErrorC ...

最新文章

  1. oracle分页性能不同,oracle高效分页
  2. Kotlin系列之类和属性
  3. sort and uniq
  4. 【转】Thunderbird中配置签名
  5. Java:使用SingletonStream获得性能
  6. React开发(267):ant design upload简单上传
  7. vs2010帮助文件安装完全攻略
  8. 【2019第十届蓝桥杯省赛C/C++B组题解】(非官方题解)
  9. macbook 放flash发烫,转html5
  10. Java的Interrupt与线程中断
  11. [转]vc6如何设置Unicode字符集
  12. 大数据——Python数据爬取
  13. 墨刀怎么注册_墨刀的使用
  14. 如何获取QQ邮箱授权码?
  15. 半年损失超20亿美元,区块链安全赛道被资本疯抢
  16. Python编程从入门到实践 -----第4章、操作列表(课后习题答案)
  17. 生成PDF文件方案--学习中
  18. ubuntu:下载ubuntu内核
  19. MSDN如何找到和打开
  20. 教资考试中计算机知识常考点,教师资格证笔试:初中美术必背考点汇总(3)...

热门文章

  1. JAVA中两个数组比较可以使用Arrays.equals()
  2. 使用内存映射提高BufferedRandoAccessFile性能(测试可用)
  3. 我的压缩软件选择:7zip软件+Zip格式
  4. 梦记录:1204(梦到观世音菩萨像)
  5. 上班时间应该包含交通时间
  6. 吾是否有“受迫害妄想症”之反省
  7. VS找不到System.Web.Extensions.dll的解决办法
  8. 如何判断NSMutableDictionary是否有某个key
  9. 格力可以考虑收购一个手机品牌
  10. ios 获取最后一个cell_ios – UICollectionView estimatedItemSize – 最后一个单元格未对齐...