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

   // 下载二维码
    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
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值