vue引用qrcodejs2生成、下载二维码、复制到剪贴板

使用的vue2.x版本，UI框架为ant design vue 1.X版本

1.场景：页面需要展示二维码并且需要下载二维码的功能

效果图：

引用插件：

yarn add qrcodejs2@0.0.2

template标签内容

 <div class="qrcodeDownLoad">
      <div class="qrcode" ref="qrcodeFile" :id="'qrcode_' + qcCodeKey"></div>
      <a-button type="primary" class="downLoadbtn" @click="downloadCode"> 下载二维码 </a-button>
 </div>

script标签内容

<script>
import QRCode from 'qrcodejs2'
export default {
	data(){
		reture{
		      //处理二维码下载缓存的问题
      		  qcCodeKey: new Date(),
		      //分享
		      shareForm: {
		        //是否加密
		        passWordVal: 'false',
		        //文件分享的链接
		        shareName: '',
		        //提示
		        message: '',
		        //是否显示二维码
		        isQRCodeShow: true,
		        //抬头
		        title: '',
		        //格式
		        suffix: '',
		      }
		}
	},
	created(){
		this.$nextTick(() => {
          this.qcCodeKey = +new Date()
          this.creatQrCode(this.shareForm.shareName)
        })
	}
	methods:{
		    // 保存下载二维码
		    downloadCode() {
		      const qrcode = document.querySelector(`#qrcode_${this.qcCodeKey}`)
		      const canvas = qrcode.querySelector('canvas')
		      const imgurl = canvas.toDataURL('image/jpeg')
		      const a = document.createElement('a')
		      a.href = imgurl
		      a.download = this.shareForm.title + '-二维码.png' // 图片名称
		      a.click()
		    },
	        //生成二维码
		    creatQrCode(path) {
		      //销毁二维码 innerHTML = ''（这里也可以加个if判断this.$refs.qrcodeFile!=undefined）
		      this.$refs.qrcodeFile.innerHTML = ''
		      this.qrcodeImg = new QRCode(this.$refs.qrcodeFile, {
		        text: path, // 需要转换为二维码的内容
		        width: 180,				//宽度
		        height: 180,			//高度
		        colorDark: '#000000',	//二维码方块颜色
		        colorLight: '#ffffff',  //背景颜色
		        correctLevel: QRCode.CorrectLevel.Q,  //容错率：L M Q H 依次递减
		      })
		    }
	}
}
</script>

注意点:

1.correctLevel 容错率：L M Q H 依次递减,并且二维码方块密度越高
2.二维码高度宽度不能太低，不然二维码里内容太多展示不下，会报错qrcode length overflow (1632>1056),解决方法为：提供correctLevel 容错率，以及二维码宽度高度给更大一些
3.下载二维码需要给div赋值动态的key，不然会下载缓存里的二维码数据

2.复制到剪贴板

引用插件：

yarn add clipboard@2.0.11

template标签内容

 <div class="qrcodeDownLoad">
      <a-button
            type="primary"
            class="tag-read"
            style="left: 10px"
            :data-clipboard-text="shareForm.shareName"
            @click="btnCopyShare"
          >
            复制链接
          </a-button>
 </div>

script标签内容

<script>
import Clipboard from 'clipboard'
export default {
	data(){
		reture{
		      //分享
		      shareForm: {
		        //是否加密
		        passWordVal: 'false',
		        //文件分享的链接
		        shareName: '',
		        //提示
		        message: '',
		        //是否显示二维码
		        isQRCodeShow: true,
		        //抬头
		        title: '',
		        //格式
		        suffix: '',
		      }
		}
	},
	methods:{
	       //复制链接按钮
		    btnCopyShare() {
		      var clipboard = new Clipboard('.tag-read')
		      clipboard.on('success', (e) => {
		        this.$message.success('复制到剪贴板成功!')
		        // 释放内存
		        clipboard.destroy()
		      })
		      clipboard.on('error', (e) => {
		        // 不支持复制
		        this.$message.error('该浏览器不支持自动复制')
		        // 释放内存
		        clipboard.destroy()
		      })
		    }
	}
}
</script>