React项目中如何实现@react-pdf/renderer生成PDF的邮件发送功能

嗨，我看到你在尝试用@react-pdf/renderer生成PDF并通过邮件发送时踩坑了——直接把React组件塞进Blob肯定行不通的，因为JSX组件只是React的虚拟DOM节点，根本不是真正的PDF二进制数据！下面我给你梳理一下正确的实现思路和修改后的代码，帮你搞定这个功能：

核心问题分析 #

你之前的代码里直接把<CustomPdf />传入Blob构造函数，这完全搞错了对象类型。@react-pdf/renderer需要通过它提供的专属API，把组件转换成真正的PDF二进制流，才能生成可用的Blob对象。

修改后的完整实现代码 #

首先确保你已经导入了@react-pdf/renderer的pdf工具函数：

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

然后调整你的sendEmail函数：

const sendEmail = async () => {
  try {
    // 1. 用@react-pdf的pdf函数包裹你的PDF组件，生成PDF实例
    const pdfInstance = pdf(<CustomPdf coupon={coupon} type={type} />);
    // 2. 异步将PDF实例转换为Blob对象
    const pdfBlob = await pdfInstance.toBlob();
    // 给Blob设置文件名（部分邮件服务会依赖这个属性识别附件名称）
    pdfBlob.name = `My PDF_${formattedDate}.pdf`;

    const formData = new FormData();
    formData.append('from', 'example@yahoo.com');
    formData.append('to', 'example@gmail.com');
    formData.append('subject', 'Your Subject');
    formData.append('text', 'Your email content');
    // 3. 追加附件到FormData，第三个参数可以显式指定文件名（双重保障）
    formData.append('attachment', pdfBlob, `My PDF_${formattedDate}.pdf`);

    const response = await axios.post(
      `https://api.example.net/v3/${domain}/messages`,
      formData,
      {
        headers: {
          // 划重点：axios会自动处理multipart/form-data的请求头，手动设置反而容易出问题
          Authorization: `Basic ${btoa(`example:${apiKey}`)}`,
        },
      }
    );

    console.log('Email sent:', response.data);
  } catch (error) {
    // 错误捕获更全面，避免error.response不存在时报错
    console.error('Error sending email:', error.response || error.message);
  }
};

额外注意事项 #

• 确保PDF组件结构正确：你的CustomPdf组件必须遵循@react-pdf的规范，包含<Document>和<Page>等核心组件，否则无法生成有效的PDF。
• 备用转换方案：如果toBlob()方法在某些环境下报错，可以试试用toDataURL()转换后再转Blob：

const dataURL = await pdfInstance.toDataURL();
const pdfBlob = await fetch(dataURL).then(res => res.blob());
pdfBlob.name = `My PDF_${formattedDate}.pdf`;

• 邮件API兼容性：不同的邮件服务API对附件的要求可能略有差异，如果还是无法识别附件，可以查看对应API的文档，确认附件字段的名称（比如有些服务要求用file而不是attachment）。

备注：内容来源于stack exchange，提问作者Irfan