一、安装二维码插件
npm i arale-qrcode
二、示例
# html
<template>
<div ref="qrcode"></div>
</template>
# js
import AraleQRCode from 'arale-qrcode'
# 方法
createRcode() {
let qrcode = new AraleQRCode({
"render": "png", // 生成的类型 'svg' or 'table'
"text": `11231231231231231231212312二维码内容`, // 需要生成二维码的链接
"size": 160 // 生成二维码大小
});
this.$refs.qrcode.appendChild(qrcode)//显示二维码
//
this.cavasToImg(qrcode)
}
//转图片地址 和 图片地址转文件 方法
cavasToImg(qrcode) {
let src = qrcode.toDataURL("image/png");//转地址
let blob = this.dataURLtoBlob(src);//转blob
let file = this.blobToFile(blob, `文件名称.png`);//转文件
},
dataURLtoBlob(dataurl) {
let arr = dataurl.split(","),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
// 将blob转换为file
blobToFile(theBlob, fileName) {
theBlob.lastModifiedDate = new Date(); // 文件最后的修改日期
theBlob.name = fileName; // 文件名
return new File([theBlob], fileName, { type: theBlob.type, lastModified: Date.now() });
},