使用qrCode，循环多项数据，生成二维码（A4 可打印）

最新推荐文章于 2023-05-17 10:15:26 发布

Siyuan_95

最新推荐文章于 2023-05-17 10:15:26 发布

阅读量2.0k

点赞数 2

文章标签： web qrcode

本文链接：https://blog.csdn.net/Siyuan_95/article/details/103255698

版权

网上很多的教程，看起来就像是简单地复制粘贴，基本都是说单个dom节点生成二维码，这样过于简单。

需求是要循环数据，将生成内容插入到节点中。最主要的地方，是在于，qrCode,无法在没有dom结构的情况下生成二维码，因此要分两个步骤

首先先根据我们数据的多少，来创建DOM节点，将二维码的容器先制作好，

再用循环的方式，将二维码的数据插入进去。

qrCode需要id为每个容器辨识身份，所以我们直接用下标作为id，
如果是对象数组，你需要先JSON.stringify()你的数据才行，
当你用对象数组来存储数据，大部分情况下，会报错，因为内容过长，此时我们需要用另一个版本的qrCode

可以下载修复的版本，亲测有效！
github地址：https://github.com/KeeeX/qrcodejs

这里只是提供了一种可以让多个数据循环的生成二维码的方法

到最后，项目需求，需要在A4纸上打印，这个也是个坑，我就图懒省事儿，直接固定了容器的大小，以及二维码的大小，这样在打印的时候，才能最好的展示布局，不会乱。

（代码中的state，是为了控制不同状态下的二维码的背景。这一点，不需要的可以对应的修改。）

效果详情，点击打印可以直接调起浏览器的打印（如果需要背景，在打印页面的更多设置里，选中背景图形即可。
页面效果

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>打印</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        body{width: 210mm;padding: 5mm;}
        ul,li{list-style: none;padding: 0;margin: 0;}
        .qrBox {overflow: hidden;width:100%;}
        .qrBox li {float: left;width: 40mm;height: 40mm;margin: 5mm; margin-bottom:8mm;}
        .qrBg {width: 100%;height: 100%; position: relative;}
        .qrBg img{width:18mm;height: 18mm;position: absolute;left: 28%;top: 22%;}
        .qrbg1{background: url('./qrbg.png');background-size: 100% 100%;}
        .qrbg2{background: url('./countBack.png');background-size: 100% 100%;}

        input{width: 80px;height: 40px;}
    </style>
</head>

<body>
    <div class="printPage">
        <input name="print" type="button" id="bt" value="点击打印" />
        <!--printstart-->
        <ul class="qrBox" id="qrBox">
        </ul>
        <!--printend-->
    </div>
    <script type="text/javascript" src="./jquery.min.js"></script>
    <script type="text/javascript" src="./qrcode.min.js"></script>

    <script type="text/javascript">
        //mock的数据 
        var msgList = [{
                state: '1',
                id: '1',
                name: '张晓明',
                num: '1909011001',
            },
            {
                state: '2',
                id: '2',
                name: '张晓明',
                num: '1909011002',
            },
            {
                state: '1',
                id: 3,
                name: '张晓明',
                num: '1909011003',
            },
            {
                state: '2',
                id: 4,
                name: '张晓明',
                num: '1909011004',
            },
            {
                state: '1',
                id: 5,
                name: '张晓明',
                num: '1909011005',
            },
            {
                state: '1',
                id: 6,
                name: '张晓明',
                num: '1909011006',
            },
            {
                state: '1',
                id: 7,
                name: '张晓明',
                num: '1909011007',
            },
            {
                state: '1',
                id: 8,
                name: '张晓明',
                num: '1909011008',
            },
            {
                state: '1',
                id: 9,
                name: '张晓明',
                num: '1909011009',
            },
            {
                state: '1',
                id: 10,
                name: '张晓明',
                num: '1909011010',
            },
            {
                state: '1',
                id: 11,
                name: '张晓明',
                num: '1909011011',
            },
            {
                state: '1',
                id: 12,
                name: '张晓明',
                num: '1909011012',
            },
            {
                state: '1',
                id: 13,
                name: '张晓明',
                num: '1909011013',
            },
            {
                state: '1',
                id: 14,
                name: '张晓明',
                num: '1909011014',
            },
            {
                state: '1',
                id: 15,
                name: '张晓明',
                num: '1909011015',
            },
            {
                state: '1',
                id: 16,
                name: '张晓明',
                num: '1909011016',
            },
            {
                state: '1',
                id: 17,
                name: '张晓明',
                num: '1909011017',
            },
            {
                state: '1',
                id: 18,
                name: '张晓明',
                num: '1909011018',
            },
            {
                state: '1',
                id: 19,
                name: '张晓明',
                num: '1909011019',
            },
            {
                state: '1',
                id: 20,
                name: '张晓明',
                num: '1909011020',
            },
            {
                state: '1',
                id: 21,
                name: '张晓明',
                num: '1909011021',
            },
            {
                state: '1',
                id: 22,
                name: '张晓明',
                num: '1909011022',
            },
            {
                state: '1',
                id: 23,
                name: '张晓明',
                num: '1909011023',
            },
            {
                state: '1',
                id: 24,
                name: '张晓明',
                num: '1909011024',
            },
            {
                state: '1',
                id: 25,
                name: '张晓明',
                num: '1909011025',
            },
            {
                state: '1',
                id: 26,
                name: '张晓明',
                num: '1909011026',
            },
            {
                state: '1',
                id: 27,
                name: '张晓明',
                num: '1909011027',
            },
            {
                state: '1',
                id: 28,
                name: '张晓明',
                num: '1909011028',
            },
            {
                state: '1',
                id: 29,
                name: '张晓明',
                num: '1909011029',
            },
            {
                state: '1',
                id: 30,
                name: '张晓明',
                num: '1909011030',
            },
            {
                state: '1',
                id: 31,
                name: '张晓明',
                num: '1909011031',
            },
            {
                state: '1',
                id: 32,
                name: '张晓明',
                num: '1909011032',
            },
            {
                state: '1',
                id: 33,
                name: '张晓明',
                num: '1909011033',
            },
            {
                state: '1',
                id: 34,
                name: '张晓明',
                num: '1909011034',
            },
            {
                state: '1',
                id: 35,
                name: '张晓明',
                num: '1909011035',
            },
            {
                state: '1',
                id: 36,
                name: '张晓明',
                num: '1909011036',
            },
            {
                state: '1',
                id: 37,
                name: '张晓明',
                num: '1909011037',
            },
            {
                state: '1',
                id: 38,
                name: '张晓明',
                num: '1909011038',
            },
            {
                state: '1',
                id: 39,
                name: '张晓明',
                num: '1909011039',
            },
        ]
        
        var qrBox = $('#qrBox');
        var html = '';
        //生成二维码
        function makeQR(arr) {
            if (arr.length) {
                for (let i = 0; i < arr.length; i++) {
                    html += '<li class="qr-item">';
                    if (arr[i].state == '1') {
                        html += '<div class="qrBg qrbg1" id=' + i + '>';
                    } else if (arr[i].state == '2') {
                        html += '<div class="qrBg qrbg2" id=' + i + '>';
                    }
                    html += '</div></li>'
                }
                qrBox.html(html);
                for (let j = 0; j < arr.length; j++) {
                    document.getElementById(j).innerHTML = ''; //置空
                    let contentStr = JSON.stringify(arr[j]); //二维码内容
                    let qrcode = new QRCode(document.getElementById(j), {
                        text:contentStr,
                        width: 190,
                        height: 190,
                        colorDark: "#000000",
                        colorLight: "#ffffff"
                    });
                }
            }
        }

        makeQR(msgList);

        // 调起打印
        $("#bt").click(function doPrint() {   
            var bdhtml=window.document.body.innerHTML;   
            var printstart="<!--printstart-->";   
            var printend="<!--printend-->";   
            prnhtml=bdhtml.substr(bdhtml.indexOf(printstart)+17 ,bdhtml.indexOf(printend));   
            window.document.body.innerHTML=prnhtml;  
            window.print();   
        });
    </script>
</body>

</html>

Siyuan_95

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用qrCode，循环多项数据，生成二维码（A4 可打印）

网上很多的教程，看起来就像是简单地复制粘贴，基本都是说单个dom节点生成二维码，这样过于简单。需求是要循环数据，将生成内容插入到节点中。最主要的地方，是在于，qrCode,无法在没有dom结构的情况下生成二维码，因此要分两个步骤首先先根据我们数据的多少，来创建DOM节点，将二维码的容器先制作好，再用循环的方式，将二维码的数据插入进去。qrCode需要id为每个容器辨识身份，所以我们直接用下...
复制链接

扫一扫