vue--base64文件下载和显示
//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>
浙公网安备 33010602011771号