qrcodejs2打开弹窗时将链接转化为二维码与带logo版本并提供下载

qrcodejs2

1.安装qrcodejs2

2.在使用页面中引入

import QRCode from "qrcodejs2";

 3.在组件中注册(Vue2项目)

  components: {
    QRCode,
  },

4.在data中定义qrcode，以及方法中使用

    showCode(row) {
      this.dialogVisible = true;
      this.$nextTick(() => {  需要nextTick否则获取不到div
        let qrcode = new QRCode(this.$refs.qrCode, {
          // text: 'xxxx', // 需要转换为二维码的内容
          text: row.url, // 需要转换为二维码的内容(后端返回的链接)
          width: 100,
          height: 100,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
      });
    },
    qrCodeHandleClose() { 弹窗关闭清空，否则会出现多个
      document.getElementById("qrCode").innerHTML = "";
      this.dialogVisible = false;
    },

       //下载二维码
        downloadCode(row) {
            this.productCode(row.miniUrl)  //下载二维码的地址
            this.$nextTick(() => {
                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的单击事件
            })
        },

5.页面结构如下

 <el-dialog
      title="渠道二维码"
      :modal-append-to-body="false"
      :visible.sync="dialogVisible"
      :before-close="qrCodeHandleClose"
      width="20%"
      custom-class="dialog-code"
      center
      :show-close="false"
    >
      <div id="qrCode" ref="qrCode"></div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="qrCodeHandleClose">关闭</el-button>
      </span>
    </el-dialog>

 页面效果图：

二维码带图标

 //生成二维码
        productCode(miniUrl) {
            this.$nextTick(() => {
                let div = document.createElement('div');// 创建一个div,用来生成二维码
                let qrcode = new QRCode(div, { // 第一个入参是组件id
                    text: miniUrl, // 生成二维码的文本
                    width: 300,
                    height: 300,
                    colorDark: '#000000', // 二维码色
                    colorLight: '#ffffff', // 背景色
                    correctLevel: QRCode.CorrectLevel.H // 容错等级，H是heigh，最高，所以二维码看起来很密
                })
                let logo = new Image();
                logo.crossOrigin = 'Anonymous';
                logo.src = require("@/assets/mofond-center.png") // 填入你本地log图片
                // 生成log图
                logo.onload = () => {
                    let container = this.$refs.qrcode;
                    // 获取页面上的div,可以使用document.querySelector()等等方法,不类推了
                    if (container.innerHTML != "") {
                        // 获取页面div , 有则清空已存在的
                        container.innerHTML = ""
                    }
                    let qrImg = qrcode._el.getElementsByTagName('img')[0]; // 获取二维码
                    let canvas = qrcode._el.getElementsByTagName('canvas')[0]; // 获取canvas
                    let ctx = canvas.getContext("2d");
                    ctx.drawImage(logo, 300 * 0.5 - 55, 300 * 0.5 - 55, 100, 100); // 写入log
                    qrImg.src = canvas.toDataURL();
                    container.appendChild(qrcode._el);
                    console.log(this.$refs.qrcode, 'this.$refs.qrcode');
                    this.$nextTick(() => {
                        var canvasData = this.$refs.qrcode.children[0].children[1]
                        var a = document.createElement("a");
                        var event = new MouseEvent("click"); // 创建一个单击事件
图片直接src,canvas需要toDataURL
                        a.href = canvasData.src;
                        a.download = "drcQrcode";
                        a.dispatchEvent(event); // 触发a的单击事件
                    })

                }

            })

        },
        //下载二维码
        downloadCode(row) {
            this.productCode(row.miniUrl)
            // 下载二维码
        },