Vue实现生成二维码功能和下载

参考了其他人的博客，自己改造了下 vue生成二维码图片并且下载图片到本地

// 我这里用的是element ui 对话框组件，触发可以写一个按钮设置showQrCode=true即可打开对话框。你们根据自己场景去处理
// template
<template>
   <el-dialog title="设备二维码" :visible.sync="showQrCode" width="360px">
      <qrcode :url="url"></qrcode>
   </el-dialog>
</template>

// script
<script>
import qrcode from '@/components/QrCode/index.vue'

export default {
  data() {
    return {
      showQrCode: false,
      url:'http://baidu.com'
  }
}
</script>

QrCode 组件自行放在components目录下

<template>
  <div class="container">
    <div id="qrcode"></div>
    <div class="qrcodeValue"> {{ url }}</div>
    <div class="qrcodeDownload">
      <el-button @click="download">下载二维码</el-button>
    </div>
  </div>
</template>

<script>

import QRCode from 'qrcodejs2'

export default {
  name: 'QrCode',
  mounted() {
    this.qrcode();
  },
  props: {
    width: {
      type: Number,
      default() {
        return 200
      }
    },
    height: {
      type: Number,
      default() {
        return 200
      }
    },
    // 二维码地址
    url: {
      type: String,
      default() {
        return ''
      }
    }
  },
  methods: {
    qrcode() {
      new QRCode('qrcode', {
        width: this.width,
        height: this.height,
        text: this.url,
        colorDark: "#000",
        colorLight: "#fff",
      })
    },
    download() {
      // 先找到canvas节点下的二维码图片
      const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
      const img = document.getElementById('qrcode').getElementsByTagName('img')
      // 创建一个a节点
      const a = document.createElement('a')
      // 设置a的href属性将canvas变成png格式
      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, '下载' + '.' + 'png')
      } 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.url + '_二维码';
        // 点击
        a.click();
      }
    },
    base64ToBlob(code) {
      let parts = code.split(';base64,');
      let contentType = parts[0].split(':')[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;
      let uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], {
        type: contentType
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.qrcodeValue {
  margin-top: 20px;
}

.qrcodeDownload {
  margin-top: 20px;
}
</style>