vue2在线生成二维码_vue2生成二维码-CSDN博客

亲情提示：如果可以让后端生成就让后端生成实在不行再前端解决（分享方法只是为了让你快点下班不是为了让你能者多劳）

创建

npm install qrcodejs2  
pnpm install qrcodejs2 

<div ref="qrcode" id="myQrCode" class="qrImg" style="display: flex;align-items: center;justify-content: center;"></div>

import QRCode from 'qrcodejs2'

data:{
  qrcode: '',
}

submitCode() {
  <!-- 每次生成前先清除二维码 -->
  if (this.$refs.qrcode) {
    this.qrcode = '';
    this.$refs.qrcode.innerHTML = ''; // 清除二维码方法
  }
  try {
        getPayMerchantQrCode({
          merchantId: this.zfbId,
          channelId: 1,
          totalAmount: this.zfbForm.price,
          subject: this.zfbForm.subject,
        }).then((res) => {
          this.$message.success("生成成功");
          this.zfbOpen = false
          this.skmOpen = true
          this.$nextTick(() => {
            // 这里生成最新的二维码照片渲染
            this.qrcode = new QRCode(this.$refs.qrcode, {
              width: 300,  // 二维码宽度 （不支持100%）
              height: 300, // 二维码高度（不支持100%）
              text: res.data.qrCode, // 后端返回的二维码地址，这里暂时写死
              render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
            });
          })
        });
      } catch (error) {
        console.log(error)
      }
}

下载

downLoadQrcode() {
    let img = document.getElementById("myQrCode").getElementsByTagName['img'][0] // 获取二维码图片标签
    let canvas = document.createElement('canvas') // 创建画布
    canvas.width = img.width
    canvas.height = img.height
    let ctx = canvas.getContext('2d')
    ctx.drawImage(img, 0, 0)
    let tempUrl = canvas.toDataURL('image/png') // 画布生成base64格式图片
    // 创建a标签，模拟点击下载
    let a = document.createElement('a')
    a.setAttribute('download','我的二维码.png')
    a.style.display = 'none'
    a.href = tempUrl
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
}