QRCode.js 生成二维码插件(vue2)

1 npm 或者 引入

npm install --save qrcode

或

2. 引入

import QRCode from 'qrcodejs2'  // 引入qrcode

3.页面

4.调用传内容

// 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("二维码的内容");  // 生成另外一个二维码
}

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

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)            // 触发点击事件
}