使用QRCode生成二维码，并利用a标签的属性下载二维码

npm install qrcodejs2 --save

<template>
  <a-modal title="查看二维码"
           v-model="show"
           :centered="true"
           :maskClosable="false"
           :width="360"
           destroyOnClose
           @cancel="handleCancel">
        <a-row :gutter="24"
	           id="printContainer">
	      <h3 style="margin: 12px 36px;">培训名称：{{ trainName }}</h3>
	      <div id="qrcode"
	           ref="qrcode"></div>
	    </a-row>
	    <template slot="footer">
      <a-button type="primary"
                @click="hanleDown">下载</a-button>
      <a-button key="back"
                @click="handleCancel">关闭</a-button>
    </template>
  </a-modal>
</template>
           

<script>
import QRCode from 'qrcodejs2'
export default {
  props: ['visible', 'codeId', 'trainName'],
  data () {
    return {
      qrcode: ''
    }
  },
  computed: {
    show: {
      get: function () {
        return this.visible
      },
      set: function () { }
    }
  },
  watch: {
    // 生成二维码js必须在 this.$nextTick(function(){调用})或setTimeout(() => { 调用 }, 100)，是为了确保二维码容器DOM已经存在
    visible (newVisible) {
      if (newVisible) {
        this.$nextTick(function () {
          this.init()
        })
      }
    }
  },
  methods: {
    // 生成二维码
    init () {
      // 为了防止重复生成二维码，使用置空进行控制
      document.getElementById('qrcode').innerHTML = ''
      // 设置二维码内容  显示内容(text所指向内容)必须是UTF-8编码格式。
      const content = this.codeId + '_' + new Date().getTime()
      this.qrcode = new QRCode('qrcode', {
        width: 260,
        height: 260,
        colorDark: '#000',
        colorLight: '#fff',
        correctLevel: QRCode.CorrectLevel.L, // 容错率，L/M/H
        text: content
      })
    },
    handleCancel () {
      this.$emit('close')
    },
    // 下载二维码
    hanleDown () {
      const imgs = document.getElementById('qrcode').getElementsByTagName('img')
      const a = document.createElement('a')
      a.download = this.trainName + new Date().getTime() || '一期一档二维码'
      a.href = imgs[0].src
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    }
  }
}
</script>

<style scoped>
#qrcode {
  margin: 0 36px;
}
</style>

参考