项目中经常又这样的需求,要求将字符串生成二维码,并下载下来
一般分为 生成一个二维码展示并下载,对于这种你只需调用 qrcodejs2生成二维码就可以了 下载也是按钮触发
今天我们要说的是 批量下载,具体做法是
首先下载资源
npm install qrcodejs2 --save
在对于的文件中引入,在template中添加如下的html代码
<div id="qrcode" style="display:none"></div>
然后就是获得一个 数组字符串,就是需要生成二维码的字符串 弄成一个数组
let newArr = getNewArra()
for (let i = 0; i < newArr.length; i++) {
(function (code) {
new QRCode('qrcode', {
width: 200,
height: 200, // 高度
text: code, // 二维码内容
correctLevel: QRCode.CorrectLevel.H
})
downloadQrCode()
})(newArr[i])
}
function downloadQrCode () {
let myselfCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
let img = document.getElementById('qrcode').getElementsByTagName('img')
let ah = document.createElement('a')
let imgURL = myselfCanvas[0].toDataURL('image/jpg')
let u = navigator.userAgent
if (u.indexOf('Trident') !== -1 && u.indexOf('Windows') !== -1) {
let bstr = atob(imgURL.split(',')[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
let blob = new Blob([u8arr])
window.navigator.msSaveOrOpenBlob(blob, '二维码' + '.' + 'png')
} else if (u.indexOf('Firefox') > -1) {
let blob = base64ToBlob(imgURL)
let evt = document.createEvent('HTMLEvents')
evt.initEvent('click', true, true)
ah.download = ' '
ah.href = URL.createObjectURL(blob)
ah.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))
} else {
img.src = myselfCanvas[0].toDataURL('image/jpg')
ah.href = img.src
ah.download = '二维码图片'
ah.click()
}
}
// base64转blob
function base64ToBlob (code) {
let parts = code.split(';base64,')
let contentType = parts[0].split(':')[1]
let raw = window.atob(parts[1])
let rawLength = raw.length
let uInt8Array = new Uint8Array(rawLength)
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i)
}
return new Blob([uInt8Array], { type: contentType })
}
解释一下:可以将downloadQrCode()函数绑定到单独下载的按钮上去,这样就变成一个一个下载的
而 我是使用了匿名函数 一个一个的去生成二维码 并自动去调用下载。