如何使用react-pdf将生成的PDF文件保存到前端变量中？

不用PDFDownloadLink组件的话，你可以直接利用react-pdf提供的pdf()工具函数或者BlobProvider组件来生成PDF的Blob对象，存入变量后再调用你的发送API。

方法一：点击按钮时生成PDF（推荐，按需生成） #

首先导入pdf工具函数，然后在按钮点击事件中生成Blob并处理：

import { pdf } from '@react-pdf/renderer';
import PDFFile from './你的PDFFile组件路径';

// 定义处理函数
const handleGenerateAndSend = async () => {
  // 生成PDF的Blob对象
  const pdfBlob = await pdf(<PDFFile />).toBlob();
  
  // 可将Blob转为File对象，方便后续FormData传递（可选）
  const pdfFile = new File([pdfBlob], '用户文档.pdf', { type: 'application/pdf' });
  
  // 调用你的发送API，用FormData传递文件
  const formData = new FormData();
  formData.append('pdfFile', pdfFile);
  
  try {
    await fetch('/你的发送邮件API路径', {
      method: 'POST',
      body: formData,
      // 如果API需要认证，这里可以加headers，比如Authorization
    });
    console.log('PDF已成功发送至用户邮箱');
  } catch (err) {
    console.error('发送失败:', err);
  }
};

然后替换你的按钮代码：

<Button
  css={{ width: '100%' }}
  variant="option"
  onClick={handleGenerateAndSend}
  size={'large'}
>
  {text}
</Button>

方法二：提前生成PDF（适合需要预加载的场景） #

用BlobProvider组件，它会在组件渲染时就生成PDF的Blob，你可以直接拿到变量使用：

import { BlobProvider } from '@react-pdf/renderer';
import PDFFile from './你的PDFFile组件路径';

// 在组件中使用
<BlobProvider document={<PDFFile />}>
  {({ blob, loading, error }) => {
    if (loading) return <span>正在生成PDF...</span>;
    if (error) return <span>PDF生成失败，请重试</span>;
    
    const handleSend = () => {
      const pdfFile = new File([blob], '用户文档.pdf', { type: 'application/pdf' });
      // 同样用FormData传递给API，逻辑同方法一
      const formData = new FormData();
      formData.append('pdfFile', pdfFile);
      
      fetch('/你的发送邮件API路径', {
        method: 'POST',
        body: formData,
      }).then(res => {
        if (res.ok) console.log('发送成功');
      }).catch(err => console.error('发送失败:', err));
    };
    
    return (
      <Button
        css={{ width: '100%' }}
        variant="option"
        onClick={handleSend}
        size={'large'}
      >
        {text}
      </Button>
    );
  }}
</BlobProvider>

注意事项 #

• 如果你的PDFFile组件依赖动态数据（比如用户输入、接口返回值），确保在生成PDF时这些数据是最新的，避免生成旧内容。
• toBlob()是异步方法，必须用async/await或者.then()处理，否则拿不到正确的Blob对象。
• 传递文件到API时，一定要用FormData格式，后端才能正确解析文件。

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