当前位置: 首页 > 工具软件 > jsqrcode > 使用案例 >

js通过QRCode生成二维码并下载

刁跃
2023-12-01
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

 类似资料: