web端生成二维码并下载到本地（带源码）

最新推荐文章于 2021-03-12 22:40:55 发布

原创最新推荐文章于 2021-03-12 22:40:55 发布 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#生成二维码 #下载二维码

大前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何利用jQuery插件生成二维码，并通过a标签的download属性将二维码图片下载到本地。首先选择合适的二维码生成插件，如http://www.jq22.com/jquery-info294。其次，使用jQuery方法生成二维码，指定渲染方式、尺寸及内容。最后，通过jQuery获取Canvas元素，将其转换为PNG格式，绑定到a标签上，实现下载功能。

首先选择相应二维码生成插件
我们这里使用这个插件http://www.jq22.com/jquery-info294

第二步生成二维码

jQuery('#showQRCode').qrcode({
    render: "canvas", //也可以替换为table
    width: 300,
    height: 300,
    text: "QR-code"
});

第三步下载到本地
下载文件我们需要借助 a标签的download属性
实现方式是先通过jquery找到Canvas画板，将其中的二维码转成png格式存入imgData，然后通过a标签绑定下载

<a href="" download="QR.png"  id="d-QR">下载</a >

var imgData = $("canvas")[0].toDataURL('png');
$("#d-QR").attr("href",imgData);

最后我们点击a标签，就可以将二维码下载到本地了