vue 二维码生成与下载

 实现效果：

1.安装

npm install --save qrcode

2.引入

<el-button type="primary" style="float:right" @click="downLoad">立即下载</el-button>

import QRCode from 'qrcodejs2'

  data() {
    return {
      callUrl:'https://www.baidu.com/'
    }
  },

created() {
    // 生成二维码图片（需要在dom生成之后再生成，否则会报错！！！）
    this.$nextTick(() => {
      this.generateQrcode()
    })
  },
methods: {
    //生成
    generateQrcode() {
      this.qrcode = new QRCode('qrcode', {
        width: 200,
        height: 200,
        text: this.callUrl // 二维码地址
      })
    },
    //下载
    downLoad() {
      const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
      const a = document.createElement('a')
      a.href = myCanvas[0].toDataURL('image/png')
      a.download = '二维码'
      a.click()
      this.$message({
        message: '正在进行下载保存，请稍后！',
        type: 'success'
      })
    }
  }