实现点击下载文件（案例中是一个二维码）

   // 下载二维码
    downLoadQR () {
      var oQrcode = document.querySelector('#qrcode')
      // console.log("oQrcode", oQrcode);
      var url = oQrcode.src
      // console.log("src", url);
      var a = document.createElement('a')
      var event = new MouseEvent('click')
      // 下载图名字
      a.download = '人员注册二维码'
      // url
      a.href = url
      a.dispatchEvent(event)
    },

 

 以上是效果图！！！

 

     <vue-qr
                v-if="!qrShow"
                id="qrcode"
                style="width: 100%; height: 100%"
                :correct-level="3"
                :auto-color="false"
                :bg-src="qrCode.bgSrc"
                :logo-src="qrCode.logoSrc"
                :text="qrCode.codeUrl"
                :logo-margin="3"
                :size="qrCode.qrcodeSize"
              />
      <el-button size="small" type="primary" @click="downLoadQR"
              >下载二维码</el-button
            >
//
     import VueQr from "vue-qr";  //引入插件
//   数据绑定
      qrCode: {
        // 二维码
        shopId: "",
        logoSrc: require("@/assets/logo-images/logo3.png"), //二维码图标
        bgSrc: "",
        codeUrl: "http://www.baidu.com", //二维码跳转的地址
        qrcodeSize: 1600,  //二维码分辨率 越高越清晰
        qrcodeColor: "#313a90",
      },

依赖下载 

npm install vue-qr --save
或
yarn add vue-qr --save