vue前端生成二维码，展示二维码并且下载

生成二维码

vue里有两种方式：qrcode、vue-qr

我这里使用的是第一种qrcode

一、安装

npm install --save qrcodejs2

二、引入

import QRCode from 'qrcodejs2'

<div class="qrcode" ref="qrCodeUrl" id="qrcode"></div>



creatQrCode () {
      return new QRCode(this.$refs.qrCodeUrl, {
        text: 'https://vant-ui.github.io/vant/v2/#/zh-CN/checkbox', // 需要转换为二维码的内容
        width: 132,
        height: 132,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },




mounted() {
    this.creatQrCode();
},

这样 我们的二维码就可以显示出来了

下载二维码

downCard () {
      // 先找到canvas节点下的二维码图片
      const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
      const img = document.getElementById('qrcode').getElementsByTagName('img')
      // 创建一个a节点
      const a = document.createElement('a')
      // 设置a的href属性将canvas变成jpg格式
      const imgURL = myCanvas[0].toDataURL('image/jpg')
      const ua = navigator.userAgent
      if (ua.indexOf('Trident') !== -1 && ua.indexOf('Windows') !== -1) { // IE内核 并且  windows系统 情况下 才执行;
        var bstr = atob(imgURL.split(',')[1])
        var n = bstr.length
        var u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        const blob = new Blob([u8arr])
        window.navigator.msSaveOrOpenBlob(blob, '下载' + '.' + 'jpg')
      } else if (ua.indexOf('Firefox') > -1) { // 火狐兼容下载
        const blob = this.base64ToBlob(imgURL); // new Blob([content]);
        const evt = document.createEvent('HTMLEvents');
        evt.initEvent('click', true, true); // initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
        a.download = ' '; // 下载图片名称，如果填内容识别不到，下载为未知文件，所以我这里就不填为空
        a.href = URL.createObjectURL(blob);
        a.dispatchEvent(new MouseEvent('click', {
          bubbles: true,
          cancelable: true,
          view: window
        }));
      } else { // 谷歌兼容下载
        img.src = myCanvas[0].toDataURL('image/jpg')
        a.href = img.src
        // 设置下载文件的名字
        a.download = this.rowInfo.title + '二维码';
        // 点击
        a.click();
        this.$message({
          message: '下载成功',
          type: 'success'
        });
      }
    },