React JS中iOS Safari无法通过Base64下载PDF文件的问题

问题原因 #

iOS Safari（尤其是15.7.2这类旧版本）对直接通过data URI触发下载的支持存在限制，同时若你之前的Blob转换逻辑有误，也会导致全浏览器失效。

兼容各浏览器的实现方案 #

以下是经过验证的修正代码，针对iOS Safari做了特殊适配：

const handleDownload = (base64String) => {
  // 移除base64字符串的前缀（若API返回内容带前缀）
  const cleanBase64 = base64String.replace(/^data:application\/pdf;base64,/, '');
  
  // 将Base64字符串转换为Uint8Array
  const byteChars = atob(cleanBase64);
  const byteNumbers = new Array(byteChars.length);
  for (let i = 0; i < byteChars.length; i++) {
    byteNumbers[i] = byteChars.charCodeAt(i);
  }
  const byteArray = new Uint8Array(byteNumbers);
  
  // 创建PDF格式的Blob对象
  const pdfBlob = new Blob([byteArray], { type: 'application/pdf' });

  // 分浏览器处理下载逻辑
  if (window.navigator.msSaveOrOpenBlob) {
    // IE/Edge专属处理
    window.navigator.msSaveOrOpenBlob(pdfBlob, 'manual.pdf');
  } else if (typeof window.webkitURL !== 'undefined') {
    // iOS Safari及WebKit内核浏览器适配
    const blobUrl = window.webkitURL.createObjectURL(pdfBlob);
    const link = document.createElement('a');
    link.href = blobUrl;
    link.download = 'manual.pdf';
    
    document.body.appendChild(link);
    // 模拟真实鼠标点击事件，解决iOS Safari直接click无效问题
    const clickEvent = document.createEvent('MouseEvents');
    clickEvent.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
    link.dispatchEvent(clickEvent);
    
    document.body.removeChild(link);
    // 延迟释放Blob URL，避免iOS提前回收导致下载失败
    setTimeout(() => window.webkitURL.revokeObjectURL(blobUrl), 100);
  } else {
    // 其他现代浏览器
    const blobUrl = URL.createObjectURL(pdfBlob);
    const link = document.createElement('a');
    link.href = blobUrl;
    link.download = 'manual.pdf';
    
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    
    setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
  }
};

核心注意事项 #

• 必须在用户交互上下文执行：确保handleDownload是直接绑定在span的点击回调中，若涉及异步API请求，要保证请求完成后仍处于用户触发的交互上下文内（比如用Promise链式调用衔接）。
• 清理Base64前缀：若API返回的字符串包含data:application/pdf;base64,前缀，必须先移除，否则Blob转换会失败。
• 使用webkitURL：旧版iOS Safari仅支持window.webkitURL，不兼容标准URL对象。

Mac端Safari情况 #

Mac端Safari（尤其是新版本）对Blob下载的支持较好，上述代码同样能兼容；旧版Mac Safari可能存在类似iOS的限制，用该方案也能解决。

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