利用qrcode.js生成二维码，并点击按钮下载二维码图片（亲测可用）

最新推荐文章于 2025-05-19 19:21:36 发布

一朵小浪花儿

最新推荐文章于 2025-05-19 19:21:36 发布

阅读量8.1k

点赞数 8

CC 4.0 BY-SA版权

文章标签： js html javascript vue.js reactjs

本文链接：https://blog.csdn.net/spray_wave/article/details/108474555

本文介绍了一种使用HTML、CSS和JavaScript生成二维码的方法，并提供了下载二维码图片的功能。通过qrcode.js库，可在网页上动态生成指定内容的二维码，再通过img标签获取二维码的src属性，最后利用a标签实现图片的自动下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说，先上代码（复制即用）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码</title>
    <style>
        body{
            padding:0;
            margin:0;
            width: 100vw;
            height: 100vh;
        }
        #qrCode{
            position: absolute;
            margin:auto;
            left:0;
            right:0;
            top:0;
            bottom:0;
            width:300px;
            height: 300px;
        }
    </style>
</head>



<!-- 以下是正文 -->


<body>
    <div id="qrCode"></div>
    <button> downLoad </button>
</body>

<!-- 引入qrcode，可以先去菜鸟教程上下载 -->

<script src="./plug/qrcode.min.js">  </script>
<script>
    const qrcode = new QRCode("qrCode", {
        text: "http://www.runoob.com",
        width: 128,
        height: 128,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });

    const qrCode = document.querySelector("#qrCode")
    const img = qrCode.querySelector("img")
    let imgSrc = ""
    img.onload=()=>{//注意这里一定要在img.onload()中取src，否则取到为null
        imgSrc = qrCode.querySelector("img").src
    }
    
    //这里是使用img获取src，也可以使用canvas,在此先将其注释掉
    // const canvas = document.getElementsByTagName("canvas")[0].toDataURL("image/png")


    document.getElementsByTagName("button")[0].addEventListener("click",()=>{
        const alink = document.createElement("a")
        alink.setAttribute("href",imgSrc)//如果使用canvas，那么把imgSrc改为canvas
        alink.download="qrCode.png"
        alink.click()
    })
</script>
</html>

接下来分段讲解：

一、首先是HTML标签

    <div id="qrCode"></div>
    <button> downLoad </button>

二、利用qrcode生成二维码

    const qrcode = new QRCode("qrCode", {//这个qrCode是承载二维码元素的id
        text: "http://www.runoob.com",//二维码的内容也可以是段文本
        width: 128,//宽
        height: 128,//高
        colorDark : "#000000",//前景色
        colorLight : "#ffffff",//背景色
        correctLevel : QRCode.CorrectLevel.H //容错
    });

然后打开浏览器调试可以发现，element变成了这样，多了一个canvas和img标签，其中canvas还是display：none，你把它打开会发现两个一模一样的二维码
在这里插入图片描述

三、取二维码地址下载图片

可以用img取

	const qrCode = document.querySelector("#qrCode")
    const img = qrCode.querySelector("img")
    let imgSrc = ""
    img.onload=()=>{//注意这里一定要在img.onload()中取src，否则取到为null
        imgSrc = qrCode.querySelector("img").src
    }

也可以用canvas取

const canvas = document.getElementsByTagName("canvas")[0].toDataURL("image/png")

四、添加点击事件，下载逻辑

	document.getElementsByTagName("button")[0].addEventListener("click",()=>{
        const alink = document.createElement("a")
        alink.setAttribute("href",imgSrc)//如果使用canvas，那么把imgSrc改为canvas
        alink.download="qrCode.png"
        alink.click()
    })