如何用@react-pdf/renderer实现无前端渲染的动态PDF下载？

方法1：编程式生成Blob并触发下载 #

不需要将PDF组件渲染到DOM中，直接通过renderToBlob方法在内存中生成PDF的Blob对象，再手动创建下载链接触发下载：

import { Document, Page, renderToBlob } from '@react-pdf/renderer';

// 定义你的自定义PDF文档组件
const MyDocument = ({ dynamicData }) => (
  <Document>
    <Page>
      {/* 这里放你的自定义布局内容，比如动态文本、表格等 */}
    </Page>
  </Document>
);

// 触发下载的函数
const downloadPDF = async (data) => {
  // 生成PDF对应的Blob对象
  const pdfBlob = await renderToBlob(<MyDocument dynamicData={data} />);
  
  // 创建临时URL指向Blob
  const tempUrl = URL.createObjectURL(pdfBlob);
  
  // 创建隐藏的a标签触发下载
  const downloadLink = document.createElement('a');
  downloadLink.href = tempUrl;
  downloadLink.download = 'my-custom-document.pdf'; // 自定义下载文件名
  downloadLink.click();
  
  // 释放临时URL资源，避免内存泄漏
  URL.revokeObjectURL(tempUrl);
};

// 调用下载函数，传入你的动态数据
downloadPDF(yourDynamicContent);

这种方法完全绕开了DOM渲染环节，直接在内存中生成PDF并触发下载，是最直接的解决方案。

方法2：可靠隐藏PDFDownloadLink组件 #

如果习惯使用PDFDownloadLink组件，但不想让它显示在页面上，不要用display: none（会阻断组件内部的PDF生成逻辑），可以用以下样式隐藏：

import { Document, Page, PDFDownloadLink } from '@react-pdf/renderer';
import { useRef, useEffect } from 'react';

const MyDocument = ({ dynamicData }) => (
  <Document>
    <Page>
      {/* 自定义布局内容 */}
    </Page>
  </Document>
);

const HiddenPDFDownloader = ({ data }) => {
  const linkRef = useRef(null);

  // 组件挂载后自动触发下载
  useEffect(() => {
    linkRef.current?.click();
  }, [data]);

  return (
    <PDFDownloadLink
      document={<MyDocument dynamicData={data} />}
      fileName="my-custom-document.pdf"
      ref={linkRef}
      style={{
        position: 'absolute',
        top: '-9999px',
        left: '-9999px',
        visibility: 'hidden',
        pointerEvents: 'none',
      }}
    >
      {/* 这里的内容不会被显示 */}
      {() => null}
    </PDFDownloadLink>
  );
};

通过绝对定位将组件移出视口范围，同时设置visibility: hidden，既不会让用户看到组件，又能保证组件内部的PDF生成逻辑正常执行。

为什么display:none无效？ #

@react-pdf/renderer的PDFDownloadLink组件在渲染时需要组件处于DOM布局流中，display: none会让组件脱离布局上下文，导致内部的PDF生成流程无法触发，因此这种隐藏方式会失效。

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