VUE生成二维码、且可以下载(Chrome、safari)可用
这几天需求需要做生成二维码的功能、试了很多组件、遇到无数坑、最终采用 qrious.
官网网站: https://www.npmjs.com/package/qrious
安装
npm install --save qrious
引用
import Qrious from 'qrious'
使用
生成二维码(base64),可以直接赋值给图片src使用
getQrCode (url) {
let qr = new Qrious({
value: url,
size: 500
})
let blobFile = dataURLtoBlob(qr)
blobToFile(blobFile, '二维码')
}
// base64转换成blob
dataURLtoBlob (dataurl) {
const parts = dataurl.split(';base64,')
const contentType = parts[0].split(':')[1]
const raw = window.atob(parts[1])
const rawLength = raw.length
const uInt8Array = new Uint8Array(rawLength)
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i)
}
return new Blob([uInt8Array], { type: contentType })
}
// 下载blob
blobToFile (theBlob, fileName) {
const blob = this.dataURLtoBlob(theBlob) // new Blob([content]);
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, fileName)
} else {
const link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = fileName
// 此写法兼容可火狐浏览器
document.body.appendChild(link)
const evt = document.createEvent('MouseEvents')
evt.initEvent('click', false, false)
link.dispatchEvent(evt)
document.body.removeChild(link)
}
}
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
评论已关闭