如何使用Spring Boot、JavaScript、Ajax将网页PDF发票作为邮件附件发送

核心逻辑说明 #

你已经完成了PDF发票的生成能力，发邮件功能的核心就是将已生成的PDF文件作为附件，调用邮件服务投递到用户填写的目标邮箱即可，根据你PDF生成的位置（前端生成/后端生成），可以对应调整实现流程。 #

分步实现方案 #

1. 前端侧逻辑处理 #

• 点击邮件按钮后，先弹出收件邮箱输入弹窗，先做基础的邮箱格式合法性校验，校验通过后再进入发送流程
• 如果是前端生成PDF（使用jsPDF、html2pdf等前端库渲染）：
  将生成好的PDF转为Blob/Base64格式，和用户输入的收件邮箱、发票唯一标识（如发票号、订单号）一起通过POST请求传给后端接口，请求过程中展示加载态避免用户重复点击，收到后端返回结果后给用户对应提示
• 如果是后端生成PDF：
  仅需要将用户输入的收件邮箱、当前发票的唯一ID传给后端即可，由后端自行拉取对应PDF文件
  示例前端请求代码参考：

// 前端生成PDF场景的发送请求示例
async function sendInvoiceEmail(receiverEmail, pdfBlob) {
  const formData = new FormData();
  formData.append("receiver_email", receiverEmail);
  formData.append("invoice_file", pdfBlob, `invoice_${Date.now()}.pdf`);
  const res = await fetch("/api/send_invoice", {
    method: "POST",
    body: formData,
  });
  const result = await res.json();
  result.success ? alert("发票已发送至您的邮箱，请注意查收") : alert("发送失败，请稍后重试");
}

2. 后端侧逻辑处理 #

• 先配置邮件发送基础能力，根据你使用的技术栈选择对应工具即可：
  • Java栈：使用JavaMail、Spring Boot Mail组件
  • Python栈：使用smtplib、yagmail库
  • Node.js栈：使用Nodemailer库
    提前申请发件邮箱，开启SMTP服务获取授权码，配置到服务环境变量中，不要硬编码在代码里避免泄露
• 开发对应接口接收前端参数：
  先校验收件邮箱格式、PDF文件合法性，然后构造邮件内容，主题可设置为「您的发票已开具」，正文可自定义说明内容，将PDF作为附件添加到邮件中，调用SMTP服务完成发送，最后给前端返回发送成功/失败的状态
• 可增加1-2次失败自动重试机制，避免临时网络波动导致发送失败

3. 可选优化项 #

• 存储发送记录：将每次发送的收件邮箱、发票ID、发送状态、发送时间存入数据库，方便后续排查问题
• 大文件兼容：如果发票文件较大，可先将PDF上传到对象存储生成临时下载链接，放到邮件正文同时提供附件下载，避免附件过大被收件方邮箱拒收
• 异常告警：配置发送失败告警，通知管理员及时处理异常情况

功能效果参考 #

#

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