//html代码 <template> <el-col :span="20" class="codesrc"> <img :src="'data:image/png;base64'+`,`+initdata.participantQRCode" alt=""> </el-col> <el-col :span="24" style="text-align: center;"> <el-button class="btnsty" sizi="mini" @click="copyText()">保存图片 </el-button> </el-col> </temlate>
js代码
<script> copyText() { let imgData ='data:image/png;base64,'+this.initdata.participantQRCode //let imgData ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAAFoAQAAAABSnlx4AAABe0lEQVR42u3aS5KEIAyA4bjyGBxVjsoxXMk0JpC22rJndmTqd2G17ecqPEJA6l8uQaPRaDQajUZH0YfYtdaaU3tMu8hW+t8bOpDW57K2Xw2et7Je3qKD6BblrWkNdZFFP361BnRM/erF0uBoCOiw2t7ktC/oqNpD3WBOvxy/0fPpnikdFn69fcur0PNpv1rkNdQj3g/rHfR82vputfzoXMa0Tj1yJnQoXfvixT+xnOlmREZPq9ubtWrk7dcZ/rEuRcfSvSu/fyyXYRkdQlu6tNrEKt4Q0n6bKaGn1RrqqlOs57/WJNBx9DmxdpjqR3kBHUdbVqS5ri1OF9V5jNLoEHoMwWNXZdTk9QU6jH6fYq0DV59nj4cqEXo2fan4VS8q+OYnOo7ulfiRGqk57vs8emrtu52pF42sCH8zu6IjaAt1lpH/lofIo2fWti41vcv3Mwvo6bSf9Cpdb76/gg6kPVPSUwhaJTp3VR7zKvRsmvPfaDQajUaj0f9G/wAuF0qW7lRCOwAAAABJRU5ErkJggg==";//这里放需要下载的base64 this.downloadFile('二维码.png', imgData); }, //下载 downloadFile(fileName, content) { let aLink = document.createElement('a'); let blob = this.base64ToBlob(content); //new Blob([content]); let evt = document.createEvent("HTMLEvents"); console.log("点击下载",evt) 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}); } </script>