vue PC使用qrcode显示下载二维码（超详细）

vue PC使用qrcode显示下载二维码（超详细）

1.npm install --save qrcodejs2

2.安装成功后，页面引入import QRCode from “qrcodejs2”;

3.(1)设定点击事件

<el-button type=“primary” @click=“downloadQrcode()”>下载二维码

（2）写点击方法

GenerateQrcode(docInfo) {
console.log(docInfo);
let param = docInfo.orgCode + “/” + docInfo.userId;
this.qrcodeDialogFlag = true;
this.$nextTick(function() {
let parent = document.getElementById(“qrcode”);
let children = parent.getElementsByTagName(“img”);
if (children.length > 0) {
for (let i = 0; i < children.length; i++) {
parent.removeChild(children[i]);
}
}
this.qrcode(docInfo);
this.docInfo = docInfo;
});
},

（3）画二维码

qrcode(docInfo) {
console.log(docInfo);
let orgCode = docInfo.orgCode;
let userId = docInfo.userId;
let url = " "
console.log(url);
let qrcode = new QRCode(“qrcode”, {
width: 350,
height: 350,
text: url, // 二维码内容
render: “canvas”
});
},

（3）下载二维码

downloadQrcode() {
let docInfo = this.docInfo;
var url = document.querySelectorAll("#qrcode img")[0].src;
var a = document.createElement(“a”);
var event = new MouseEvent(“click”);
// 下载图名字
a.download = “医生：” + docInfo.name + “,工号：” + docInfo.jobNumber;
a.href = url;
// 合成函数，执行下载
a.dispatchEvent(event);
},

实现效果