React中将API返回的Base64转换为APK并下载的问题

你的核心问题在于APK文件体积通常远大于PDF，直接使用data URL会触发浏览器的大小限制或数据解析异常，同时部分细节处理不到位也会导致下载失败。以下是针对性的解决方案：

关键修正点 #

1. 优先用Blob处理二进制数据，替代data URL（大文件兼容性更好）
2. 确保Base64数据纯净，移除可能存在的前缀
3. 使用APK标准MIME类型提升兼容性
4. 清理DOM资源避免内存泄漏

修正后的代码 #

const downloadApp = async () => {
  try {
    const response = await userService.downloadMobileApp();
    let base64Data = response.data;
    
    // 移除API可能返回的data URL前缀（如果有）
    if (base64Data.startsWith('data:application/apk;base64,')) {
      base64Data = base64Data.split(',')[1];
    }

    // 将Base64转换为Blob对象
    const byteCharacters = atob(base64Data);
    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: 'application/vnd.android.package-archive' });

    // 创建并触发下载链接
    const downloadLink = document.createElement('a');
    const url = URL.createObjectURL(blob);
    downloadLink.href = url;
    downloadLink.download = 'randomAppName.apk';
    document.body.appendChild(downloadLink);
    downloadLink.click();

    // 清理资源
    document.body.removeChild(downloadLink);
    URL.revokeObjectURL(url);
  } catch (error) {
    console.error('下载失败:', error);
  }
};

额外检查项 #

如果你的请求基于axios，确保配置正确的响应类型，避免Base64数据被错误解析：

// userService中下载接口的配置示例
const downloadMobileApp = () => {
  return axios.get('/api/download-apk', {
    responseType: 'text' // 确保返回纯文本格式的Base64字符串
  });
};

若API返回的是原始二进制数据而非Base64，可直接跳过Base64转换步骤：

const response = await userService.downloadMobileApp();
const blob = new Blob([response.data], { type: 'application/vnd.android.package-archive' });
// 后续下载逻辑同上

内容的提问来源于stack exchange，提问作者OmarLittle