vue项目中使用qrcodejs生成二维码并下载

1.首先安装

npm install qrcodejs2 --save-dev

2.在需要使用的Vue页面或者js文件中导入

import QRCode from 'qrcodejs2'

3.页面里有个标签展示二维码

<template>
       <div id="qrcode" ref="qrcode" ></div>
</template>

方法区写事件：

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 // 容错等级，H是heigh，最高，所以二维码看起来很密
          })
        },
}

在需要用到的地方调用方法

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

/*this.$nextTick(function () { }); 用于延迟执行一段代码*/

点击下载二维码

	// 点击下载app二维码
    downloadE(name) {
      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的单击事件
    },
/*downloadE是博主的一个按钮事件，点击按钮下载*/

这样就下载好了！