vue3 使用qrcodejs2-fix生成二维码并可下载保存

直接上代码

<template>
  	<el-button @click='setEwm'>打开弹框二维码</el-button>
 	<el-dialog v-model="isShow"  >
 		<div  id="qrCodeUrl" ref="qrCodeUrl"></div>
        <el-button type="primary" @click="saveCode()" >保存二维码</el-button>
     </el-dialog>
  </template>
   <script>
   import QRCode from 'qrcodejs2-fix';//需要下载 npm install -s qrcodejs2-fix
   export default {
   data(){
	return {
	   isShow:false,//默认不打卡弹框
	   qrCode:'',
	   QRCode:'',
	 }
   //生成二维码
   methods:{
   	//生成二维码
	setEwm(){
	 this.isShow=true;//打开遮罩层
	 this.QRCode= new QRCode(this.$refs.qrCodeUrl, {
		 text: this.qrCode, // 需要转换为二维码的内容
		 width: 260, // 二维码的宽度
	     height: 260, // 二维码的高度
	     colorDark: "#000000", 
	     colorLight: "#ffffff", 
		 correctLevel: QRCode.CorrectLevel.H, // 二维码的纠错水平
    })
    },
	// 保存二维码
	saveCode(name){
	  	//获取二维码中格式为imag的元素
	 	const nodeList = Array.prototype.slice.call(this.QRCode._el.children)
	 	const img = nodeList.find((item) => item.nodeName.toUpperCase() === 'IMG')	
		// 构建画布
		let canvas = document.createElement('canvas');
		canvas.width = img.width;
		canvas.height = img.height;
		canvas.getContext('2d').drawImage(img, 0, 0)
		// 构造url
		let url = canvas.toDataURL('image/png')
		const a = document.createElement("a")
		a.href = url
		a.download =`二维码.png`
		// 触发a链接点击事件，浏览器开始下载文件 
		a.click()
	}
	}
   }
  </script>