vue3项目中使用qrcodejs2生成二维码并保存

1.npm install qrcodejs2 --save-dev

import QRCode from 'qrcodejs2' // 引入qrcode

import { ref, defineExpose, nextTick, getCurrentInstance, reactive, defineEmits } from 'vue'

//生成二维码

const { proxy } = getCurrentInstance()

let url = ref()

// 生成二维码

const creatQrCode = () => {

nextTick(async() => {

// new QRCode创建一个实例，第一个参数是承载二维码的元素，第二个参数是二维码配置信息

url = new QRCode(proxy.$refs.qrCodeUrl, {

text: dataList.logInCode, // 二维码承载信息

width: 100,

height: 100,

colorDark: '#000000',

colorLight: '#ffffff',

correctLevel: QRCode.CorrectLevel.H // 容错级别

})

await onCheck_scan()

})

}

// 保存二维码---------------------------------------------------------------------------------

const qrCodeUrl = ref()

const saveQRCode = () => {

var canvasData = qrCodeUrl.value.getElementsByTagName('canvas')

var a = document.createElement('a')

var event = new MouseEvent('click') // 创建一个单击事件

a.href = canvasData[0].toDataURL('image/png')

a.download = 'drcQrcode'

a.dispatchEvent(event)

}

const handleClose = () => {

proxy.$refs.qrCodeUrl.innerHTML = '' // 关闭弹窗清除上一次的二维码

}