vue-qr实现生成二维码并下载

最终效果展示

npm安装vue-qr

npm install vue-qr --save

vue-qr-npm官方链接

引入

import VueQr from 'vue-qr'

template部分

<el-dialog title="二维码" :visible.sync="qrdialogVisible" width="30%">
      <div class="qrcode">
        <vue-qr
          :backgroundColor="config.backgroundColor"
          :text="config.value"
          :logoScale="config.logoScale"
          :size="config.size"
          :margin="config.margin"
          :logoSrc="config.logoSrc"
        ></vue-qr>
        <el-button
          style="margin-top:50px;display:block"
          type="primary"
          round
          mini
          @click="downloadQrcode"
        >下载二维码</el-button>
      </div>
    </el-dialog>

data部分

data () {
    return {
      qrdialogVisible: false,
      config: {
        backgroundColor: "red", //背景色
        value: "http://www.baidu.com",  //欲编码的内容
        logoScale: 0.2, //用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale*(size-2*margin), 默认 0.2
        size: 200, //尺寸, 长宽一致, 包含外边距
        margin: 20,  //二维码图像的外边距, 默认 20px
        logoSrc: "../../static/medal.png"
      }
    }
  },

下载

downloadQrcode () {
      let myImg = document.querySelector(".qrcode img");
      let url = myImg.src;
      let a = document.createElement('a');
      a.href = url;
      a.download = '二维码'; //下载图名称
      a.click();
      this.$message({
        message: "下载成功",
        type: 'success'
      })
    }