QRCode.js 是一个用于生成二维码的 js 库，原理是利用canvas绘制图片并插入dom
，用法很简单，如下;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery.min.js"></script>
<script src="js/qrcode.js"></script>
<body>
<div id="myQRCode"></div>
</body>
<script>
new QRCode('myQRCode',{
text: 'http://www.baidu.com',
width: 300,
height: 300,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
})
</script>
</html>
上面生成的是一个百度首页的二维码。
简单说明一下上面的参数：
'myQRCode' ： 二维码插入的元素id
text：二维码的内容，就是扫描二维码后发送的url
width：二维码的宽
height：二维码的高
colorDark：前景色
colorLight：背景色
correctLevel：容错等级，有QRCode.CorrectLevel.L/M/Q/H 四个级别
打印一个二维码：
function printQRCode() {
let str = document.getElementById('myQRCode').innerHTML
let newPage = window.open('打印页面','_blank')
newPage.document.write(str)
newPage.document.close()
newPage.print()
newPage.close()
}
批量生成并打印二维码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery.min.js"></script>
<script src="js/qrcode.js"></script>
<body>
<div id="myQRCode"></div>
<button onclick="printAllQRCode()">打印全部</button>
</body>
<script>
let list = []
let qrcodeArr = []
function create(obj) {
document.getElementById('myQRCode').innerHTML = ''
new QRCode('myQRCode',{
text: 'http://www.baidu.com' + obj.a,
width: 300,
height: 300,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
})
}
for(let i = 0; i < 10; i++){
let obj = {
a: i
}
list.push(obj)
}
function loop (i) {
if (i >= 10) {
return
}
create(list[i])
setTimeout(function () {
let str = document.getElementById('myQRCode').innerHTML
qrcodeArr.push(str)
i++
loop(i)
}, 100)
}
function printAllQRCode() {
let docStr = ''
let length = qrcodeArr.length
for (let i = 0; i < length; i++) {
docStr += qrcodeArr[i]
}
let newWindow = window.open('打印窗口', '_blank', 'width=' + (screen.availWidth - 10) + ',height=' + (screen.availHeight - 50) + ',scrollbars,resizable=yes,toolbar=no')
// 第三个参数需要设置，以保证可以打开一个新窗口而不是新标签页；不然 chrome 下会有bug （具体原因不知道，有大佬知道可以告诉一下）
newWindow.document.write(docStr)
newWindow.document.close()
setTimeout(function () { //二维码在网页绘制需要时间，尤其大批量，不加延迟会导致图片丢失
newWindow.print()
newWindow.close()
}, 100)
}
loop(0)
</script>
</html>
在new QRCode() 之后其实是在目标元素内生成了一个<canvas></canvas><img/>的代码块，此时 img 里面并没有 src 属性，貌似需要一定时间生成，所以如果立刻将 innerHTML 放入数组并不能获取到二维码。
因此，在批量生成二维码代码中，使用了递归以及定时器来实现二维码的获取。（我猜也可以创建不同的div去存放，不过工作量有些大，还有不采用for循环是因为定时器会打乱其执行顺序，难控制）
网友评论