react-pdf中PDFDownloadLink绑定onClick触发‘检查网络连接’错误排查

PDFDownloadLink组件本身内置了点击触发PDF生成、Blob创建以及浏览器下载的完整逻辑。当你直接给组件传递onClick属性时，会覆盖组件原生的点击处理流程，导致核心的PDF生成步骤被中断，进而出现类似“检查网络连接”的错误（本质是PDF未正常生成，组件无法找到有效资源）。另外如果你的onDownload函数中调用了event.preventDefault()，也会直接阻止组件的默认下载行为。

方案一：在子元素中添加自定义逻辑（保留组件默认下载） #

利用PDFDownloadLink的子函数回调，在返回的自定义按钮/链接上绑定点击事件，注意不要阻止组件的默认行为：

<div key={uuid()} className={classes.__wrapper}>
  <PDFDownloadLink
    style={{ textDecoration: "none", color: "black" }}
    fileName={`${sku}.pdf`}
    document={<PDFDocument pages={pages} />}
  >
    {({ loading, blob }) =>
      loading ? (
        <PDFLoader />
      ) : (
        <FileDownloadLink 
          blob={blob} 
          sku={sku} 
          onClick={() => {
            // 先执行自定义逻辑
            onDownload();
            // 禁止调用e.preventDefault()，确保组件默认下载流程执行
          }}
        />
      )
    }
  </PDFDownloadLink>
</div>

如果你的FileDownloadLink内部有阻止默认事件的逻辑，需要移除相关代码。

方案二：完全自定义下载流程（脱离组件内置逻辑） #

如果你想完全掌控下载的每一步，可以使用react-pdf提供的pdf()工具函数手动生成PDF Blob，再自行处理下载：

import { pdf } from '@react-pdf/renderer';

// 自定义下载处理函数
const handleCustomDownload = async () => {
  try {
    // 生成PDF Blob
    const blob = await pdf(<PDFDocument pages={pages} />).toBlob();
    // 执行你的自定义下载逻辑
    onDownload(blob);
    
    // 示例：手动触发浏览器下载
    const url = URL.createObjectURL(blob);
    const downloadLink = document.createElement('a');
    downloadLink.href = url;
    downloadLink.download = `${sku}.pdf`;
    downloadLink.click();
    URL.revokeObjectURL(url);
  } catch (error) {
    console.error('PDF生成失败:', error);
  }
};

// 组件渲染
<div key={uuid()} className={classes.__wrapper}>
  <button 
    onClick={handleCustomDownload}
    style={{ border: 'none', background: 'none', color: 'black', textDecoration: 'none' }}
  >
    {loading ? <PDFLoader /> : <FileDownloadLink sku={sku} />}
  </button>
</div>

这种方式完全脱离组件的内置逻辑，你可以自由添加错误处理、埋点上报等自定义操作。

方案三：监听Blob生成事件（仅执行后置逻辑） #

如果你的需求是在PDF生成完成后触发自定义逻辑（比如上报下载事件），可以通过监听blob参数的变化实现：

import { useEffect, useState } from 'react';

// 组件内部状态
const [generatedBlob, setGeneratedBlob] = useState(null);

<div key={uuid()} className={classes.__wrapper}>
  <PDFDownloadLink
    style={{ textDecoration: "none", color: "black" }}
    fileName={`${sku}.pdf`}
    document={<PDFDocument pages={pages} />}
  >
    {({ loading, blob }) => {
      // 更新Blob状态
      if (blob) setGeneratedBlob(blob);
      return loading ? <PDFLoader /> : <FileDownloadLink blob={blob} sku={sku} />;
    }}
  </PDFDownloadLink>
</div>

// 监听Blob生成，执行自定义逻辑
useEffect(() => {
  if (generatedBlob) {
    onDownload(generatedBlob); // 比如上报下载成功事件
  }
}, [generatedBlob]);

这种方式既保留了组件的默认下载行为，又能在PDF生成完成后自动触发自定义操作。

内容的提问来源于stack exchange，提问作者Roni Jack Vituli