vue中使用qrcode动态生成二维码并下载,并解决多次生成二维码的问题
vue页面npmnpm install qrcodejs2import在所需页面导入import QRCode from ‘qrcodejs2’use生成二维码qrcode (url) {// 一定要加上document.getElementById("qrcode").innerHTML = "";,否则每点击一次按钮就会多一个二维码docum...
·
vue页面
npm
npm install qrcodejs2
import
在所需页面导入
import QRCode from ‘qrcodejs2’
use
生成二维码
qrcode (url) {
// 一定要加上document.getElementById("qrcode").innerHTML = "";,否则每点击一次按钮就会多一个二维码
document.getElementById("qrcode").innerHTML = "";
let qrcode = new QRCode('qrcode', {
width: 100, // 二维码宽度,单位像素
height: 100, // 二维码高度,单位像素
text: url // 生成二维码的链接
});
},
在mounted函数中执行,加上
this.$nextTick(() => {
that.qrcode(url)
})
点击下载二维码
// 点击下载app二维码
downloadAppCodeImg (name) {
var canvasData = this.$refs.qrcode.getElementsByTagName('canvas')
var a = document.createElement("a");
var event = new MouseEvent("click"); // 创建一个单击事件
a.href = canvasData[0].toDataURL("image/png");;
a.download = "drcQrcode";
a.dispatchEvent(event); // 触发a的单击事件
},
更多推荐
已为社区贡献1条内容
所有评论(0)