后端返回了一串base64的编码,用户点击下载的时候,前端如何将这个base64编码转为PNG格式图片,并实现下载?
后端返回的数据如下:
image:"iVBORw0KGgoAAAAN.....",
title:"ai_0001"
后端返回了一串base64的编码,用户点击下载的时候,前端如何将这个base64编码转为PNG格式图片,并实现下载?
后端返回的数据如下:
image:"iVBORw0KGgoAAAAN.....",
title:"ai_0001"
实测可以实现,但是需要知道文件的格式。
let base64Str = `换成base64`;
const base64ConvertFile = function (urlData, filename) { // 64转file
if (typeof urlData != 'string') {
return;
}
var arr = urlData.split(',')
var type = arr[0].match(/:(.*?);/)[1]
var fileExt = type.split('/')[1]
var bstr = atob(arr[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], 'filename.' + fileExt, {
type: type
});
};
function download(downfile) {
const tmpLink = document.createElement("a");
const objectUrl = URL.createObjectURL(downfile);
tmpLink.href = objectUrl;
tmpLink.download = downfile.name;
document.body.appendChild(tmpLink);
tmpLink.click();
document.body.removeChild(tmpLink);
URL.revokeObjectURL(objectUrl);
};
let fileObj = base64ConvertFile(base64Str, "filename.webp")
download(fileObj);
Base64转图片可以用 js 如何将base64编码转图片格式 这个问答里面的回答。
然后按照正常的 URL.createObjectURL(file)
方式下载文件就可以了。
写一个简单的 Demo:
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
function downloadImg(url, filename) {
const file = dataURLtoFile(url, filename)
const aTag = document.createElement('a')
const href = URL.createObjectURL(file)
aTag.download = file.name
aTag.href = href
aTag.click()
URL.revokeObjectURL(href)
}
本文参与了SegmentFault 思否面试闯关挑战赛,欢迎正在阅读的你也加入。
8 回答4.7k 阅读✓ 已解决
6 回答3.4k 阅读✓ 已解决
5 回答2.8k 阅读✓ 已解决
6 回答2.3k 阅读
5 回答6.3k 阅读✓ 已解决
4 回答2.3k 阅读✓ 已解决
8 回答3.6k 阅读
PC端:
需要将格式拼成这样的
picSrc的格式为: data:image/png;base64,XXXXXXXXXXXX