react-pdf PDFDownloadLink onClick 事件问题 - “检查互联网连接”错误

Question

我正在使用

react-pdf

库，并尝试将自定义

onClick

事件处理程序添加到 PDFDownloadLink 组件。目标是当用户单击下载 PDF 时触发自定义下载操作。但是，当我添加 onClick 处理程序时，我遇到一条错误消息，显示“检查 Internet 连接”。奇怪的是，如果我删除 onClick 事件，文件就会正确下载。

以下是相关代码片段：

<div key={uuid()} className={classes.__wrapper}>
  <PDFDownloadLink
    onClick={onDownload} // Problematic onClick
    style={{ textDecoration: "none", color: "black" }}
    fileName={`${sku}.pdf`}
    document={<PDFDocument pages={pages} />}
  >
    {({ loading, blob }) =>
      loading ? <PDFLoader /> : <FileDownloadLink blob={blob} sku={sku} />
    }
  </PDFDownloadLink>

</div>

onDownload

函数用于处理下载逻辑，当不在 onClick 事件中使用时它可以正常工作。我怀疑 onClick 事件的处理方式可能存在问题。

有人可以帮助我理解为什么添加 onClick 事件会导致此错误，以及如何解决它以成功触发自定义下载操作？

Answer 1

我遇到了同样的问题，虽然我不知道是什么原因导致了错误（我认为这与

<PDFDownloadLink />

事件处理程序以某种方式与自定义偶数处理程序发生冲突有关？）

但是，我发现，通过传递对返回

<PDFDocument />

的方法的引用，而不是直接将

document

传递给

<PDFDocument />

属性，我可以在下载 PDF 之前运行一些自定义操作。

例如，在您的代码中，删除

onClick

单击事件并添加一个返回

<PDFDocument pages={pages} />

的函数：

const handlePdfDownload = () => {
   // Run custom code here
   //
   //
   return (<PDFDocument pages={pages} />)
}

<div key={uuid()} className={classes.__wrapper}>
   <PDFDownloadLink
      style={{ textDecoration: "none", color: "black" }}
      fileName={`${sku}.pdf`}
      document={handlePdfDownload()}
   >
      {({ loading, blob }) =>
         loading ? <PDFLoader /> : <FileDownloadLink blob={blob} sku={sku} />
      }
   </PDFDownloadLink>
</div>

我不确定这是否适用于您的用例，但我在网上找不到关于这个库的太多关于这个问题的信息，所以尽管我会投入我的两分钱。