vue - 生成二维码并下载

1、npm命令下载qrcode

npm install  qrcodejs2 --save

2、vue引入

import QRCode from 'qrcodejs2'

3、vue引入

<!-- 二维码 -->
    <div>
        <div style="width: 148px;">二维码</div>
        <div>
            <div id="qrcode"></div>
            <div>
                <el-button @click="downLoad" class="nowBtn">立即下载</el-button>
            </div>
        </div>
    </div>

4、在data中定义

data() {
        return {
                // 二维码
                qrCode: ''
               }
          }

5、在methods中

  methods: {

    downLoad() {
           let myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas');
           let a = document.createElement('a')
           a.href = myCanvas[0].toDataURL('image/png');
           a.download = '二维码';
           a.click()
           this.$message({
               message: "正在进行下载保存",
               type: 'success'
           })
    
    },
    
     getQrCode() {
          let qrcode = new QRCode('qrcode', {
              width: 132,
              height: 132,
              text: this.model.qrCode, // 二维码地址
              colorDark: "#000",
              colorLight: "#fff",
          })
      },
}