VUE的QRCode二维码生成并点击下载

首先得安装qrcodejs2

yarn add qrcodejs2 

然后在需要的页面引入

import QRCode from 'qrcodejs2' // 引入qrcode
export default {
  name: 'qRCode',
  components: { QRCode },
  ....
}

这里是将二维码以弹窗的形式展现给用户
主页面：调用封装好的二维码组件

html:引用
    <code-view ref="codeView"></code-view>
  <script>
    import codeView from '@/views/store/pages/storeMessage/components/code'
  export default {
	methods:{
		//调用注册的二维码组件的公共方法
		handleCode(){
		var params ={
			name:'二维码测试',
			url:"xxxx"
			}
			this.$refs.codeView._getQrocde(params)
		}
	}
  }
   </script>

二维码组件

<template>
  <div>
    <a-modal
      v-model="visible"
      @ok="handleOk"
      destroyOnClose
      title="二维码生成"
      okText="下载"
      cancelText="取消"
      width="300px"
    >
      <div id="qrcode" ref="qrcode"></div>
    </a-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import QRCode from 'qrcodejs2' // 引入qrcode
// Vue.use(QRCode)
export default {
  name: 'qRCode',

  data() {
    return {
      visible: false,
      params:{},
    }
  },

  components: { QRCode },
  methods: {
    _getQrocde(info) {
      this.visible = true
      this.params = info
      this.$nextTick(function () {
        //生成二维码
        this.qrcode(info)
      })
    },
    

    handleCancel() {
      this.visible = false
    },

    qrcode(info) {
      let that = this
      let qrcode = new QRCode('qrcode', {
        width: 200,
        height: 200, // 高度
        text: JSON.stringify(info), // 二维码内容
        // logoSrc:`@/assets/logo.png`
      })
    },

    handleOk() {
      // //找到canvas标签
      let myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
      let img = document.getElementById('qrcode').getElementsByTagName('img')
      // // //创建一个a标签节点
      let a = document.createElement('a')
      // //设置a标签的href属性（将canvas变成png图片）
      let imgURL = myCanvas[0].toDataURL('image/jpg')
      let 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)
        }
        var blob = new Blob([u8arr])
        window.navigator.msSaveOrOpenBlob(blob, this.params.name + '.' + 'png')
      } else if (ua.indexOf('Firefox') > -1) {
        //火狐兼容下载
        let blob = this.base64ToBlob(imgURL) //new Blob([content]);
        let 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 = myCanvas[0].toDataURL('image/png').replace('image/png', 'image/octet-stream')
        a.href = img.src
        //设置下载文件的名字
        a.download = `${this.params.name}_二维码`
        //点击
        a.click()
      }
    },

    //base64转blob
    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="less">
#qrcode {
  display: flex;
  justify-content: center;
  img {
    width: 132px;
    height: 132px;
    background-color: #fff; //设置白色背景色
    padding: 6px; // 利用padding的特性，挤出白边
  }
}
</style>