如何使用React组件实现无需下载PDF直接发送邮件

核心逻辑非常直接：react-to-pdf默认触发下载只是预设行为，只要修改配置就能拿到内存中的PDF二进制数据，完全不需要先把文件存到用户本地磁盘，拿到数据后直接对接邮件发送逻辑即可。

第一步：调整react-to-pdf配置，拦截默认下载拿到PDF Blob #

把download参数设为false，指定返回类型为blob，调用生成方法时就不会弹出下载框，直接返回PDF对应的Blob对象：

import { useRef } from 'react';
import generatePdf from 'react-to-pdf';

export default function BusinessPage() {
  const pdfContentRef = useRef(null);

  const handleGenerateAndSend = async () => {
    // 生成PDF，全程无本地下载操作
    const pdfBlob = await generatePdf(pdfContentRef, {
      download: false, // 核心配置：关闭自动下载
      type: 'blob',
      page: { format: 'A4' }
    });
    // 进入发信流程
    await sendEmailWithPdf(pdfBlob);
  };

  return (
    <div>
      {/* 需要转成PDF的页面内容区域 */}
      <div ref={pdfContentRef}>
        {/* 业务页面内容 */}
      </div>
      <button onClick={handleGenerateAndSend}>生成PDF并发送邮件</button>
    </div>
  );
}

第二步：根据业务场景选择邮件发送方式 #

方案1：后端代理发送（生产环境首选） #

• 绝对不要在前端代码里写SMTP账号、邮件服务密钥这类敏感信息，会直接从前端源码泄露，引发安全问题。
• 正确做法是把拿到的PDF Blob包装成FormData，传给自有业务后端，由后端组装带附件的邮件发送：

async function sendEmailWithPdf(pdfBlob) {
  const formData = new FormData();
  // 把PDF作为附件字段传入
  formData.append('attachment', pdfBlob, '业务单据.pdf');
  formData.append('recipient', 'target@example.com');
  formData.append('subject', '您需要的PDF文件');
  formData.append('text', '附件为系统生成的PDF文件，请查收。');

  // 请求自有后端发信接口
  await fetch('/your-backend-api/send-email', {
    method: 'POST',
    body: formData
  });
}

后端收到请求后，直接读取附件的二进制流，用团队在用的邮件发送组件（比如Node.js生态的nodemailer、Java生态的JavaMail等）把附件挂到邮件上发出即可。

方案2：调起本地邮件客户端（轻量无后端场景） #

如果不需要服务端自动发信，只是希望用户点击后自动打开本地安装的邮件客户端（比如Outlook、系统自带邮件APP），并自动带上PDF附件，不要用传统的mailto:协议——mailto不支持携带Blob附件。可以把Blob转成File对象后，调用Web Share API调起系统分享面板，让用户选择邮件应用发送，这个方案兼容性一般，仅适合内部工具类场景使用。

常见踩坑提醒 #

如果你用的react-to-pdf版本过旧，不支持download: false的配置，直接升级到最新稳定版即可；如果因为项目依赖限制没法升级，换成html2canvas+jsPDF的组合手动生成PDF Blob就行，后续发信逻辑完全通用。

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