vue+Qrcode实现动态生成二维码（图片格式，点击下载可保存本地）

Posted 2021-07-18 老张在线敲代码

1.首先安装插件依赖

npm install qrcodejs2 --save-dev 或者 yarn add qrcodejs2 --save-dev

2.安装完成之后在项目中引入

	import QRCode from 'qrcodejs2'

3.然后再页面中写个标签用来渲染他

<template>
         <div id="qrcode" ref="qrcode" @click="download"></div>
         //img标签会导致二维码渲染不到页面上，所以此处用了div
</template>

4.methods中写入函数

	showQrcode() {
          document.getElementById("qrcode").innerhtml = "";
          var qrcode = new QRCode('qrcode', { // 第一个参数是组件的id值
            text: '我是这个二维码的文本内容', // 生成二维码的文本
            width: 300,
            height: 300,
            colorDark: '#000000', // 二维码色
            colorLight: '#ffffff', // 二维码背景色
            correctLevel: QRCode.CorrectLevel.H // 容错等级
          })
        },

5.在mounted中调用此方法

this.$nextTick (function () {
     this.showQrcode();
})

6.最后在methods中写入一个下载事件

// 点击下载app二维码
download() {
     var canvasData = this.$refs.qrcode.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); // 触发a的单击事件
},