效果图
下载插件
代码语言：javascript复制cnpm install --save vue-qrvue中使用插件
1.我在使用中，引入了弹框展示
2.把二维码当做一个子组件，处理隐藏函数
代码语言：javascript复制<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>下载事件
代码语言：javascript复制 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})
},子组件所有源代码
代码语言：javascript复制<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> 
