QRCode.js 是一個(gè)用于生成二維碼的 js 庫(kù)另锋，原理是利用canvas繪制圖片并插入dom
评架，用法很簡(jiǎn)單丁眼，如下;
<!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>
上面生成的是一個(gè)百度首頁(yè)的二維碼。
簡(jiǎn)單說(shuō)明一下上面的參數(shù)：
'myQRCode' ： 二維碼插入的元素id
text：二維碼的內(nèi)容耸携，就是掃描二維碼后發(fā)送的url
width：二維碼的寬
height：二維碼的高
colorDark：前景色
colorLight：背景色
correctLevel：容錯(cuò)等級(jí)棵癣，有QRCode.CorrectLevel.L/M/Q/H 四個(gè)級(jí)別
打印一個(gè)二維碼：
function printQRCode() {
let str = document.getElementById('myQRCode').innerHTML
let newPage = window.open('打印頁(yè)面','_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')
// 第三個(gè)參數(shù)需要設(shè)置，以保證可以打開(kāi)一個(gè)新窗口而不是新標(biāo)簽頁(yè)夺衍；不然 chrome 下會(huì)有bug （具體原因不知道狈谊，有大佬知道可以告訴一下）
newWindow.document.write(docStr)
newWindow.document.close()
setTimeout(function () { //二維碼在網(wǎng)頁(yè)繪制需要時(shí)間，尤其大批量沟沙，不加延遲會(huì)導(dǎo)致圖片丟失
newWindow.print()
newWindow.close()
}, 100)
}
loop(0)
</script>
</html>
在new QRCode() 之后其實(shí)是在目標(biāo)元素內(nèi)生成了一個(gè)<canvas></canvas><img/>的代碼塊河劝，此時(shí) img 里面并沒(méi)有 src 屬性，貌似需要一定時(shí)間生成矛紫，所以如果立刻將 innerHTML 放入數(shù)組并不能獲取到二維碼赎瞎。
因此，在批量生成二維碼代碼中颊咬，使用了遞歸以及定時(shí)器來(lái)實(shí)現(xiàn)二維碼的獲取务甥。（我猜也可以創(chuàng)建不同的div去存放，不過(guò)工作量有些大喳篇，還有不采用for循環(huán)是因?yàn)槎〞r(shí)器會(huì)打亂其執(zhí)行順序敞临，難控制）
