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

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值