// 下载二维码
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