使用qrCode,循环多项数据,生成二维码(A4 可打印)

网上很多的教程,看起来就像是简单地复制粘贴,基本都是说单个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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值