在前端生成二维码下载

效果展示

完整代码

<template>
  <div class="ypl-flex">     
    <div class="invitePosterPage flex">
      <button @click="downLoad">下载二维码</button>
      <img v-if="posterDataUrl" :src="posterDataUrl" class="poster-bg" alt="二维码"/>
      <div v-else id="poster" class="flex-row" style="position: relative">
        <canvas class="qr" id="qrCode-canvas"></canvas>
      </div>
    </div>
  </div>
</template>
 
<script>
import QRCode from 'qrcode'
import html2canvas from 'html2canvas'
export default {
  data () {
    return {
      posterDataUrl:'',
      id:6,
      name:'testQRCode'
    }
  },
  
  async mounted () {
      // this.createQRCode()
  },
    
  methods: {
    createQRCode () {
      //先用 QRCode 生成二维码 canvas，然后用 html2canvas 合成图片并转成 base64 显示出来
      let canvas = document.getElementById('qrCode-canvas')
      // this.id.toString(): 二维码的内容部分要是字符串格式
      QRCode.toCanvas(canvas, this.id.toString(), (error) => {
        if (error) {
          console.log(error)
        } else {
          //qrcode 生成的二维码会带有一些默认样式，需要调整下
          canvas.style.width = '200px'
          canvas.style.height = '200px'
          let poster = document.getElementById('poster')
          html2canvas(poster).then(canvas => {
            this.posterDataUrl = canvas.toDataURL()
          })
        }
      })
    },
    downLoad(){
      this.createQRCode()
      const canvas=document.getElementById('qrCode-canvas')
      this.downLoadImage(canvas);
    },
    //被调用的方法
    downLoadImage(canvas) {
      var a = document.createElement("a")
      a.href = canvas.toDataURL()
      // 下载后的名字
      a.download = this.name
      a.click();
    }
  }
}
</script>