react如何实现Base64编码下载
使用React实现Base64编码下载
方法一：通过<a>标签触发下载
将Base64数据转换为Blob对象，生成临时URL并触发下载链接。以下代码展示了如何将Base64字符串转换为文件并下载：
const downloadBase64File = (base64Data, fileName, mimeType) => {
const byteCharacters = atob(base64Data.split(',')[1]);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += 512) {
const slice = byteCharacters.slice(offset, offset + 512);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, { 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);
};方法二：使用第三方库简化流程
对于更简洁的实现，可以使用file-saver库处理下载逻辑：
import { saveAs } from 'file-saver';
const downloadWithFileSaver = (base64Data, fileName) => {
const blob = b64toBlob(base64Data);
saveAs(blob, fileName);
};
const b64toBlob = (base64Data, contentType = '', sliceSize = 512) => {
const byteCharacters = atob(base64Data.split(',')[1]);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
byteArrays.push(new Uint8Array(byteNumbers));
}
return new Blob(byteArrays, { type: contentType });
};方法三：处理图片Base64下载
针对图片类型数据，可直接通过Canvas转换后下载：
const downloadBase64Image = (base64Data, fileName) => {
const link = document.createElement('a');
link.href = base64Data;
link.download = fileName || 'image.png';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};注意事项
- 确保Base64字符串包含正确的前缀（如
data:image/png;base64,） - 跨浏览器兼容性需测试，部分旧版本浏览器可能不支持Blob API
- 大文件下载建议分块处理避免内存问题
- 服务端生成的Base64需确保编码正确性
