欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-26 17:21:36
前端生成二维码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

相关标签: Web前端 前端