实现原理
图片或二维码在页面上都是通过img标签显示
通过Dom操作获取到页面上要下载的图片的src，便可以通过虚拟a标签的点击事件，完成下载！
<div class="channelQrcode"> <vue-qr :bgSrc="config.bgSrc" :colorDark="config.colorDark" :colorLight="config.colorLight" :dotScale="config.dotScale" :logoScale="config.logoScale" :logoSrc="config.logoSrc" :margin="config.margin" :size="config.size" :text="config.value" > </vue-qr> </div> <el-button size="small" type="primary" @click="downloadImg">下载</el-button>
downloadImg() { var oQrcode = document.querySelectorAll('.channelQrcode img') var url = oQrcode[0].src var a = document.createElement('a') var event = new MouseEvent('click') // 自定义下载后图片的名称 a.download = '二维码' a.href = url a.dispatchEvent(event) },
