vue项目生成二维码功能使用QRCode

1，导入第三方插件

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: {  
   // 生成二维码 that.Url是生成二维码的链接
    useqrcode() {
    var that = this
      var canvas = document.getElementById('canvas')
      // 去掉qrcode的边框（建议留1px；否则浏览器识别有些困难）
      QRCode.toCanvas(canvas, that.Url, { 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()
    }
  },