526互联

vue 如何将链接或者文字通过qrcodejs2插件转为二维码

发布时间 2023-08-15 11:34:23作者: wjs0509

1、首先需要安装qrcodejs2插件

yarn add qrcodejs2

2、需在html里面定义一个用于渲染二维码的标签元素

<div ref="qrcode" style="display: none"></div>

3、开始处理转换

created() {
    const miniPath = window.location.origin + `/bank.html#/apply?bankCode=${this.$route.query.bankCode}&channelCode=${this.$route.query.channelCode}`;
    this.$nextTick(() => {
      this.qrcode(miniPath);
    });
  },
methods: {
    qrcode(text) {
      if (!text) return;
      this.$refs.qrcode.innerHTML = "";
      // eslint-disable-next-line no-unused-vars
      const qrcode = new QRCode(this.$refs.qrcode, {
        width: 200,
        height: 200, // 高度
        text: text, // 二维码内容
        render: "canvas", // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
      this.$nextTick(() => {
        setTimeout(() => {
          this.downImage();
        });
      });
    },

    downImage() {
      const canvas = this.$refs.qrcode.querySelector("canvas");
      const img = canvas.toDataURL("image/png");
      this.$refs.qrcode.innerHTML = "";
      this.qrcodeSrc = img;
    }
  },