问题:
- vue项目开发中,接口返回Base64文件(一张图片),前端需要下载该图片。
解决:
let base64 ='data:image/png;base64,'+this.initData.code"; // 文件base64
this.downloadFile('小程序码.png', base64);
// 下载Base64文件
downloadFileByBase64(data, fileName) {
const blob = this.base64ToBlob(data);
const url = URL.createObjectURL(blob);
this.downloadFile(url, fileName)
},
// base64转blob
base64ToBlob(data) {
let arr = data.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bStr = window.atob(arr[1]);
let n = bStr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bStr.charCodeAt(n);
}
return new Blob([u8arr], {type: mime});
},
// 下载
downloadFile(url, fileName) {
const a = document.createElement("a");
a.setAttribute("href", url)
a.setAttribute("download", fileName)
a.setAttribute("target", "_blank")
let clickEvent = document.createEvent("MouseEvents");
clickEvent.initEvent("click", true, true);
a.dispatchEvent(clickEvent);
},