vue项目中使用qrcodejs2生成二维码以及下载

本文主要记录如果生成二维码以及下载和qrcodejs2的参数详解
官方文档：https://www.npmjs.com/package/qrcodejs2

1.安装qrcodejs2

npm install qrcodejs2 

2.引入

import QRCode from "qrcodejs2";

3.标签

<div id="myQrCode" ref="myQrCode"></div>

4.生成

generateCode() {
    document.getElementById("myQrCode").innerHTML = "";//每次生成的时候清空内容，否则会叠加，二维码背景色透明会一目了然
    try {
        const qrcode = new QRCode("myQrCode", {
            width: 200, //宽度
            height: 200, // 高度
            text: "https://xxx.com/mobile/demo" // 二维码内容
        });
    } catch (e) {
        console.log(e);
    }
}

5.下载

downLoadQrcode() {
    let img = document.getElementById("myQrCode").getElementsByTagName['img'][0] // 获取二维码图片标签
    let canvas = document.createElement('canvas') // 创建画布
    canvas.width = img.width
    canvas.height = img.height
    let ctx = canvas.getContext('2d')
    ctx.drawImage(img, 0, 0)
    let tempUrl = canvas.toDataURL('image/png') // 画布生成base64格式图片
    // 创建a标签，模拟点击下载
    let a = document.createElement('a')
    a.setAttribute('download','我的二维码.png')
    a.style.display = 'none'
    a.href = tempUrl
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
}

6.参数详解

new QRCode(element, options)

名称	说明
element	生成二维码元素实例或者该元素的id
options	参数配置

options参数：

名称	默认值	说明
width	256	图像宽度
height	256	图像高度
text		二维码内容
render	‘canvas’	设置渲染方式（有两种方式 table和canvas）
typeNumber	4	未知
colorDark	“#000000”	前景色
colorLight	“#ffffff”	背景色
correctLevel	QRCode.CorrectLevel.L	容错级别，可设置为：QRCode.CorrectLevel.L；QRCode.CorrectLevel.M；QRCode.CorrectLevel.Q；QRCode.CorrectLevel.H；从上至下生成码密度越来越高L - M - Q - H

API：

名称	说明
makeCode(text)	设置二维码内容
clear()	清除二维码。（仅在不支持 Canvas 的浏览器下有效）