首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue-qr生成二维码并下载到本地【前端】

vue-qr生成二维码并下载到本地【前端】

作者头像
sinnoo
发布2021-07-29 12:13:40
9140
发布2021-07-29 12:13:40
举报
文章被收录于专栏:技术人生技术人生

效果图

下载插件

cnpm install --save vue-qr

vue中使用插件

1.我在使用中,引入了弹框展示

2.把二维码当做一个子组件,处理隐藏函数

<template>
  <van-overlay :show="show" @click="close">                                                                                                                                                               
    <div class="qr" @click.stop>
      <div class="close"><span @click="close"> X </span></div>
      <div class="title">{{ title }}</div>
      <div class="img">
        <vue-qr :logo-src="qr.logoSrc" :size="191" :margin="0" :auto-color="true" :dot-scale="1" :text="qr.appSrc" colorDark="#FFFFFF" colorLight="#01051A" />
      </div>
      <div class="footer">
        <div class="btn" @click="downs">
          <p>保存到本地</p>
        </div>
      </div>
    </div>
  </van-overlay>
</template>

下载事件

    downs() {
      const fileName = '1.png'
      let img = document.getElementById('qrcode').getElementsByTagName('img')[0].src

      let aLink = document.createElement('a')
      let blob = this.base64ToBlob(img)
      let evt = document.createEvent("HTMLEvents")
      evt.initEvent("click", true, true) // initEvent 不加后两个参数在FF下会报错  事件类型,是否冒泡,是否阻止浏览器的默认行为
      aLink.download = fileName
      aLink.href = URL.createObjectURL(blob);
      // aLink.dispatchEvent(evt);
      aLink.click()
    },
    //base64转blob                                                                                                                                                                                        
    base64ToBlob(code) {
      let parts = code.split(';base64,')
      let contentType = parts[0].split(':')[1]
      let raw = window.atob(parts[1])
      let rawLength = raw.length
      let uInt8Array = new Uint8Array(rawLength)
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i)
      }
      return new Blob([uInt8Array], {type: contentType})
    },

子组件所有源代码

<template>                                                                                                                                                                                                
  <van-overlay :show="show" @click="close">
    <div class="qr" @click.stop>
      <div class="close"><span @click="close"> X </span></div>
      <div class="title">{{ title }}</div>
      <div id="qrcode" class="img">
        <vue-qr :logo-src="qr.logoSrc" :size="191" :margin="0" :auto-color="true" :dot-scale="1" :text="qr.appSrc" colorDark="#FFFFFF" colorLight="#01051A" />
      </div>
      <div class="footer">
        <div class="btn" @click="downs">
          <p>保存到本地</p>
        </div>
      </div>
    </div>
  </van-overlay>
</template>

<script>
import VueQr from 'vue-qr'
export default {
  components: {
    VueQr
  },
  props: {
    show: { 
      type: Boolean,
      default: false
    },
    title: { 
      type: String,
      default: '出示给捐赠人,捐赠人扫描推广二维码,填写捐赠信息'
    }
  },
  data() {
    return {
      qr: {
        logoSrc: 'https://n1.51guanxuan.com/common/4817ba891b9d274201ae32fa98a2bbeb40db0228/200',
        appSrc: 'http://10.0.0.26:8080/temp.html?channel=jingrui&source=13#/donate/activity-home'
      }
    }
  },
  methods: {
    downs() {
      const fileName = '1.png'
      let img = document.getElementById('qrcode').getElementsByTagName('img')[0].src

      let aLink = document.createElement('a')
      let blob = this.base64ToBlob(img)
      let evt = document.createEvent("HTMLEvents")
      evt.initEvent("click", true, true) // initEvent 不加后两个参数在FF下会报错  事件类型,是否冒泡,是否阻止浏览器的默认行为
      aLink.download = fileName
      aLink.href = URL.createObjectURL(blob);
      // aLink.dispatchEvent(evt);
      aLink.click()
    },
    //base64转blob
    base64ToBlob(code) {
      let parts = code.split(';base64,')
      let contentType = parts[0].split(':')[1]
      let raw = window.atob(parts[1])
      let rawLength = raw.length
      let uInt8Array = new Uint8Array(rawLength)
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i)
      }
      return new Blob([uInt8Array], {type: contentType})
    },
    close() {
      this.$emit('closedialog')
    }
  }
}
</script>

<style lang="less" scoped>
.qr {
  width: 80%;
  height: 812px;
  background: #FFFFFF;
  border-radius: 20px;
  margin-left:10%;
  margin-top:40%;
  .img {
    padding:26px 20px;
    text-align:center;
  }
  .footer {
    margin-top:66px;
    padding-left:10%;
    height:100px;
    width: 100%;
    .btn {
      text-align:center;
      width: 90%;
      height: 94px;
      background: #FEDA00;
      border-radius: 61px;
      border: 5px solid #03134A;
      p{
        height:94px;
        line-height:94px;
        font-size: 32px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: rgba(1, 5, 26, 0.8);
      }
    }
  }
  .close{
    span{
      width:100px;
    }
    text-align: right;
    padding-top: 18px;
    padding-right: 50px;
    width: 100%;
    height: 54px;
    font-size: 32px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(1, 5, 26, 0.8);
  }
  .title{
    text-align: justify;
    padding: 26px 50px;
    width: 100%;
    height: 90px;
    font-size: 32px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(1, 5, 26, 0.8);
    line-height: 45px;
  }
}
</style>     
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档