html
<div v-show="false" id="qrcode"></div>
js
npm i qrcodejs2
import QRCode from 'qrcodejs2';
data:{
return:{
qrCode :null
}
}
download(params) {
const text = params+'动态解析内容'
if (this.qrCode) {
//单例 如果需要重复点击生成携带不同text内容的二维码,则需要通过这种方式
//先清除 然后在使用makeCode重新更换 text内容
//不然重复点击后下载的内容是最后一次点击的text,
this.qrCode.clear();
this.qrCode.makeCode(text);
} else {
this.qrCode = new QRCode('qrcode', {
width: 300,
height: 300,
text,
colorDark: '#000',
colorLight: '#fff'
});
}
console.log(url);
let myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas');
console.log(myCanvas, 'myCanvas');
let a = document.createElement('a');
a.href = myCanvas[0].toDataURL('image/png');
a.download = this.dialog.data.serverTypeName + '+' + row.activeProjectName;
a.click();
a = null;
},
单例 如果需要重复点击生成携带不同text内容的二维码,则需要通过这种方式
先清除 然后在使用makeCode重新更换 text内容
不然重复点击后下载的内容是最后一次点击的text,
这里还有一个注意的是,如果用草料二维码解析器解析不出text的话,
可能是因为width和height 大小不够的原因,设置大一点就好了
附上官网地址 https://github.com/davidshimjs/qrcodejs