官网

https://github.com/davidshimjs/qrcodejs

1、引包

  1. npm install qrcodejs2 --save
  2. npm install --save html2canvas

2、引入

  1. import QRCode from 'qrcodejs2'
  2. import html2canvas from 'html2canvas'

3、生成二维码


tip：需要写一个定宽，不然生成图片会发生偏移和二维码不完整

  1.  <div class="qrcode-img">
  2.  <!-- <img src="../../assets/img/kyy/qrcode.jpg"> -->
  3.     <div ref="qr" />
  4.  </div>
  1. // 生成二维码
  2. bindQRCode () {
  3.   let t = this
  4.   // console.log(t.userInfo.account)
  6.   this.$nextTick(() => {
  7.     new QRCode(this.$refs.qr, {
  8.       // text: 'http://192.168.0.xx:8765/#/SignAgency?code=' + t.userInfo.account,
  9.       width: 200,
  10.       height: 200,
  11.       colorDark: '#333333', // 二维码颜色
  12.       colorLight: '#ffffff', // 二维码背景色
  13.       correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
  14.     })
  15.   }）
  16. }
  19. // 二维码生成后，执行生成图片并点击下载
  20.  download () {
  21.    html2canvas(this.$refs.qr, {
  22.      backgroundColor: null,
  23.      width: 189,
  24.      height: 189
  25.    }).then((canvas) => {
  26.      const imgData = canvas.toDataURL('image/jpeg')
  27.      console.log(imgData)
  28.      const link = document.createElement('a')
  29.      link.href = imgData
  30.      link.download = 'qrCode.jpg'
  31.      link.click()
  32.    })
  33.  }