react-pdf/renderer：如何让PDFDownloadLink等待数据填充后下载

问题根源在于当前的点击逻辑是同时触发数据填充和PDF下载，但onStartPDFGeneration中的数据处理（比如Redux状态更新、二维码生成）是异步的，第一次点击时PDFDownloadLink已经开始生成PDF，此时pdfState.data和qrCodeArray还未就绪，导致生成的PDF为空，自然没有下载反应；第二次点击时数据已准备完成，才能生成正确的PDF。

以下是两种可行的解决方案：

方案1：手动控制PDF生成时机（推荐） #

使用react-pdf提供的usePDF钩子，先等待所有数据准备完成，再手动触发PDF的生成和下载。

代码示例 #

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

// 在组件内部
const [pdfInstance] = usePDF({ document: <MyDocument /> });
const [isDataReady, setIsDataReady] = useState(false);

// 监听数据状态，判断是否就绪
useEffect(() => {
  // 当Redux数据和本地二维码数组都就绪时标记状态
  setIsDataReady(!!pdfState.data && qrCodeArray.length > 0);
}, [pdfState.data, qrCodeArray]);

const handleDownload = async () => {
  // 第一步：执行数据填充逻辑，确保内部异步操作完成
  await onStartPDFGeneration();
  
  // 等待数据就绪（处理状态更新的延迟）
  const waitForData = () => new Promise(resolve => {
    const checkInterval = setInterval(() => {
      if (isDataReady) {
        clearInterval(checkInterval);
        resolve();
      }
    }, 100);
  });
  await waitForData();
  
  // 第二步：手动触发PDF下载
  pdfInstance?.download('example.pdf');
};

// 渲染按钮
return <Button onClick={handleDownload}>下载PDF</Button>;

关键说明 #

• 确保onStartPDFGeneration是异步函数，内部所有异步操作（API请求、二维码生成等）都返回Promise，这样await才能等待数据处理完成。
• 通过useEffect监听数据状态变化，确保PDF生成时数据已完全就绪。

方案2：分阶段控制下载按钮 #

将数据准备和PDF下载拆分为两个步骤，先让用户触发数据填充，数据就绪后再显示可点击的下载按钮。

代码示例 #

const [isDataReady, setIsDataReady] = useState(false);

// 监听数据状态
useEffect(() => {
  setIsDataReady(!!pdfState.data && qrCodeArray.length > 0);
}, [pdfState.data, qrCodeArray]);

const handlePrepareData = async () => {
  await onStartPDFGeneration();
};

return (
  <>
    {!isDataReady ? (
      <Button onClick={handlePrepareData}>准备PDF数据</Button>
    ) : (
      <PDFDownloadLink document={<MyDocument />} fileName="example.pdf">
        <Button>下载PDF</Button>
      </PDFDownloadLink>
    )}
  </>
);

关键说明 #

• 用户先点击「准备PDF数据」按钮，等待数据处理完成后，界面自动切换为「下载PDF」按钮，此时点击下载时数据已完全就绪，不会出现空PDF的问题。

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