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