rendering

Download the plugin

cnpm install --save vue-qr
Copy the code

Use plug-ins in VUE

1. I introduced the pop-up display in use

2. Treat the QR code as a child component and handle the hidden function

<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 > save to a local < / p > < / div > < / div > < / div > < / van - overlay > </template>Copy the code

Download the event

    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})
    },
Copy the code

Subcomponent all source code

<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 = "# 01051 a" / > < / div > < div class = "footer" > < div class = "BTN" @ click = "downs" > < p > save to a local < / 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'}}}, the 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 ") Whether to block the default browser behavior alink.download = fileName alink.href = url.createObjecturl (blob); // aLink.dispatchEvent(evt); Click ()}, //base64 to 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>Copy the code