vue引用插件生成二維碼

1、下載第三方插件qrcode

npm install --save qrcode

2、在文件中引入這個插件

import QRCode from  qrcode;

html：

 <div id='code'></div>
 <canvas id="canvas"></canvas>
 <el-button @click="uploadQR">下載二維碼</el-button>

methods: {  
   // 生成二維碼
    useqrcode() {
      var canvas = document.getElementById('canvas')
      // 去掉qrcode的邊框（建議留1px；否則瀏覽器識別有些困難）
      QRCode.toCanvas(canvas, that.Info.payUrl, { width: 500, height: 500, margin: 1 }, function(error) {
        if (error) console.error(error)
        console.log('success!')
      })
    },
    // 下載二維碼
    uploadQR() {
      var canvas = document.getElementById('canvas')
      var a = document.createElement('a')
      console.log(canvas)
      // console.log(canvas[0])
      a.href = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')
      a.download = '二維碼'
      a.click()
    }
  },