使用vue-qr生成二维码下载并添加文字实例

<template>
  <div>
    <a-modal :footer="null" title="" :visible="visible" :maskClosable="false" @cancel="handleCancel">
      <div class="con">
        <div id="qr-section" class="qr-section">
          <vue-qr ref="qrCode" :text="text" width="100" height="100" :logoSrc="logoPath"></vue-qr>
          <span class="num">{{ text }}</span>
        </div>
        <p class="download" @click="downloadFile">下载图片</p>
      </div>
    </a-modal>
    <!-- <canvas id="localcanvas" width="200px" height="200px"></canvas> -->
  </div>
</template>
<script>
// 组件
import VueQr from 'vue-qr'
import html2canvas from 'html2canvas'

// import logoImg from '../../../public/avatar2.jpg'
export default {
  name: 'Qrcode',
  components: {
    VueQr
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    text: {
      type: String,
      default: '111'
    }
  },
  data () {
    return {
      // logoPath: logoImg
      logoPath: require('../../../public/avatar2.jpg')
    }
  },
  // watch: {
  //   visible: {
  //     handler (val) {
  //       console.log(222, val)
  //     },
  //     deep: true
  //   }
  // },
  created () {},
  methods: {
    // 二维码
    downloadFile (url) {
      // const a = document.createElement('a') // 下载的文件名
      // a.download = '二维码' // url
      // // console.log(a)
      // a.href = this.$refs.qrCode.$el.src // 触发点击
      // a.click()
      // this.$emit('changeModel')
      window.pageYoffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
      const canvasBox = document.getElementById('qr-section')
      html2canvas(canvasBox).then(canvas => {
        const dataURL = canvas.toDataURL('image/jpg')
        // 下载
        this.downloadImage(dataURL)
      })
    },
    downloadImage (url) {
      const link = document.createElement('a') // 创建一个超链接对象实例
      link.href = url
      link.setAttribute('download', '截图.png')
      link.click()
      this.$emit('changeModel')
    },
    // 关闭弹窗二维码
    handleCancel (e) {
      this.$emit('changeModel')
    },
    downloadQR () {}
  }
}
</script>
<style lang="less" scoped>
.con {
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  img {
    width: 180px;
    height: 180px;
    // margin: 27px 68px 0;
  }
  .num {
    color: #2a3030;
    line-height: 21px;
    text-align: center;
    margin: 10px 0 26px;
  }
  .download {
    width: 110px;
    height: 40px;
    margin: 0 auto 6px;
    text-align: center;
    line-height: 40px;
    background: #00b4c4;
    border-radius: 8px;
    color: #ffffff;
  }
}
.qr-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  height: 210px;
  margin: 10px auto;
  span {
    margin: 0 !important;
    // visibility: hidden;
  }
}
/deep/.ant-modal {
  width: 364px !important;
  background: #ffffff;
  box-shadow: 0px 6px 40px 0px rgba(121, 161, 173, 0.2);
  border-radius: 20px;
  padding: 0;
  .ant-modal-content {
    border-radius: 20px;
  }

  // 弹窗内容
  // .ant-modal-body {
  //   padding: 10px;
  // }
}
</style>