vue实现qrcode下载二维码

后台返回：

1，npm命令下载qrcode

(1)在项目文件夹中

npm install --save qrcode

(2)或在全局中安装

npm install -g qrcode

2，引入

import QRCode from 'qrcodejs2'  // 引入qrcode

3，在HTML中引入

		<!-- 二维码 -->
    <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: {
	// 获取
    getDeviceInfo() {
    	this.getQrCode();
	}
	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",
          })
      },
}