react如何实现base64下载
实现Base64下载的方法
在React中实现Base64下载可以通过创建Blob对象并结合URL.createObjectURL方法生成下载链接。以下是具体实现步骤：
创建Blob对象并生成下载链接
将Base64字符串转换为Blob对象，利用URL.createObjectURL生成临时链接，最后通过创建隐藏的<a>标签触发下载。
const downloadBase64File = (base64Data, fileName, mimeType) => {
const byteCharacters = atob(base64Data.split(',')[1]);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: mimeType });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
};使用示例
调用上述函数时传入Base64数据、文件名和MIME类型即可触发下载。
// 示例调用
const base64String = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...';
downloadBase64File(base64String, 'image.png', 'image/png');处理纯Base64字符串（无前缀）
如果Base64字符串不包含data:前缀，需要手动指定MIME类型：
const downloadRawBase64 = (base64Data, fileName, mimeType) => {
const byteCharacters = atob(base64Data);
// 其余代码与上述示例相同
};注意事项
- 确保Base64字符串格式正确，带有
data:前缀的字符串会自动提取MIME类型 - 下载完成后调用
URL.revokeObjectURL释放内存 - 对于大文件建议使用分块处理避免内存问题
- 部分浏览器可能需要用户交互（如点击事件）才能触发下载
这种方法适用于图片、PDF等各类文件的Base64下载场景。
