使用react-pdf生成的PDF在新标签页打开后点击下载出现‘检查网络连接’错误

可能原因（排除onClick冲突后） #

• Blob URL 生命周期与垃圾回收问题
  浏览器生成的Blob URL仅在关联的Blob对象存在于内存中时有效。当新标签页打开PDF后，原页面的组件如果发生卸载、状态更新，或者浏览器触发垃圾回收销毁了Blob实例，新标签页里的PDF虽然已加载到渲染器内存中能正常显示，但点击下载时浏览器会尝试重新请求Blob URL，此时URL已失效，就会抛出类似网络错误的提示。
  排查/解决：可以手动创建Blob URL并延长其生命周期，比如在组件中保存objectURL引用，在组件卸载时手动调用URL.revokeObjectURL()释放：

  const [objectURL, setObjectURL] = useState(null);
  
  useEffect(() => {
    if (blob) {
      const url = URL.createObjectURL(blob);
      setObjectURL(url);
      return () => URL.revokeObjectURL(url);
    }
  }, [blob]);
  
  // 之后用objectURL作为链接地址
  

• 内容安全策略（CSP）限制
  如果当前页面的CSP配置中没有允许blob:协议，浏览器会拦截Blob URL的下载请求，表现为“检查网络连接”的错误（实际是安全拦截）。比如CSP的default-src、media-src或connect-src未包含blob:。
  排查：打开浏览器开发者工具的「控制台」，查看是否有CSP相关的报错；检查页面的Content-Security-Policy响应头或meta标签。
  解决：在CSP规则中添加blob:到对应的指令，比如default-src 'self' blob:。

• 自定义Link组件的URL处理异常
  你使用的<ISPLink>自定义组件可能对Blob URL做了额外处理（比如URL编码、添加路由前缀、拦截跳转逻辑），导致最终传递给浏览器的URL被篡改，下载时无法正确解析。
  排查：替换为原生<a>标签测试，看是否能正常下载：

  <a href={url} target="_blank" onClick={handleClick}>
    Open PDF In New Tab
  </a>
  

  如果原生a标签正常，说明问题出在自定义Link组件的逻辑上。

• 原页面导航导致Blob失效
  如果点击打开PDF后，原页面发生了路由跳转、刷新或其他导航操作，原页面的Blob对象会被销毁，对应的Blob URL立即失效。此时新标签页的PDF虽然能显示（已加载到内存），但下载时重新请求URL就会失败。
  排查：检查打开PDF的操作是否触发了原页面的路由变化，比如点击按钮时是否有同步的导航逻辑。

• 浏览器PDF渲染器的内存管理机制
  部分浏览器的PDF渲染器会在显示PDF后释放Blob URL的关联引用，仅保留渲染所需的内存数据。当用户点击下载时，渲染器尝试重新通过Blob URL获取资源，但此时URL已无法关联到原始Blob，导致报错。
  解决：可以尝试将Blob转换为Data URL（仅适合小体积PDF，大文件会有性能问题），或者通过后端生成PDF并返回普通HTTP URL，替代Blob URL方案。

内容的提问来源于stack exchange，提问作者Barış Şahin