前端生成二维码qrcode.js，并下载

利用qrcode.js在前端生成二维码，并下载

一、引入js包

<script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>

二、html代码

<div id="qrcode"></div>

三、生成二维码

// ts中报QRCode未声明的错可以这样声明： declare var QRCode: any; 
function makeQRCode(qrCodeContent){
	var qrcode = new QRCode("test", {
    	text: qrCodeContent,   // 二维码内容
    	width: 128,  
    	height: 128,
    	colorDark : "#000000",  // 码的颜色
    	colorLight : "#ffffff",  // 码的背景色
    	correctLevel : QRCode.CorrectLevel.H  // 高度容错
	});
	// qrcode.clear(); // 可以清除二维码
	// qrcode.makeCode("二维码的内容");  // 生成另外一个二维码
}

四、利用超链接下载二维码（不支持跨域）

function downloadQRCode() {
  	const qrCodeDiv: any = document.getElementById('qrcode');  // 找到二维码div
    const url = qrCodeDiv.querySelector('canvas').toDataURL('image/png');          // 获取图片地址
  	const a = document.createElement('a');          // 创建一个a节点插入的document
    const handle = new MouseEvent('click')           // 模拟鼠标click点击事件
    a.download = this.qrCodename                  // 设置a节点的download属性值
    a.href = url;                                 // 将图片的src赋值给a节点的href
    a.dispatchEvent(handle)            // 触发点击事件
}

这样前端就生成二维码了。
如果对你有帮助可以👍+关注，我们一起学前端~~~

---

生成二维码的其他方法：
1、前端生成二维码（借助草料）
2、前端生成二维码@techiediaries/ngx-qrcode

本文地址：https://blog.csdn.net/Kindergarten_Sir/article/details/112565750