本教程详细介绍了如何利用 JavaScript 库 html2pdf 在客户端生成 PDF 文件，并将其以数据 URI 字符串的形式通过 Ajax 异步发送至 PHP 后端。在服务器端，我们将学习如何接收并解析这份 PDF 数据，最终使用 PHPMailer 库将其作为附件发送电子邮件。文章涵盖了从前端数据准备到后端文件处理及邮件发送的完整流程，并提供了关键代码示例和注意事项。
在现代 web 应用中，用户可能需要将页面内容导出为 pdf 并通过邮件发送。直接在客户端保存 pdf 相对简单，但要将生成的 pdf 发送到服务器并作为邮件附件，则需要一套完整的客户端与服务器端协作机制。本文将详细阐述如何结合 html2pdf.js、ajax 和 phpmailer 实现这一功能。
1. 客户端 PDF 生成与数据准备 (JavaScript)
html2pdf.js 库能够将 HTML 内容转换为 PDF。其核心在于 outputPdf() 方法，特别是当它与 ‘datauristring’ 参数结合使用时，可以将生成的 PDF 内容以 Base64 编码的字符串形式返回，这正是通过 Ajax 传输的理想格式。
首先，确保你的页面中有一个 HTML 元素作为 PDF 的内容源，例如：
报告标题
这是一段示例文本，将包含在PDF中。
列1 列2 数据A 数据B
接下来是 JavaScript 代码，用于生成 PDF 字符串并准备 Ajax 请求。请注意，html2pdf() 操作是异步的，因此我们需要使用 await 或 .then() 来确保在发送 Ajax 请求之前 PDF 内容已经完全生成。
立即学习“PHP免费学习笔记（深入）”；
// 获取要转换为PDF的HTML元素const page = document.getElementById('printPage');// html2pdf 配置选项const pdfOptions = { margin: [5, 0, 0, 0], // 上、右、下、左边距 filename: 'generated_document.pdf', // 尽管此处设置了文件名，但发送时可能需要服务器端重新指定 image: { type: 'jpeg', quality: 1 }, pagebreak: { mode: ['legacy'] }, // 分页模式 html2canvas: { scale: 3 }, // html2canvas 渲染比例 jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' } // jsPDF 库配置};let pdfContent;// 异步函数，用于生成PDF并发送Ajax请求async function sendPdfViaAjax() { try { // 使用 outputPdf('datauristring') 获取Base64编码的PDF字符串 // await 确保在获取到pdfAsString后再继续执行 pdfContent = await html2pdf().from(page).set(pdfOptions).outputPdf('datauristring'); // 构建Ajax请求数据 const requestData = { action: "sendEmail", // 服务器端用于识别操作的参数 // 其他需要发送的邮件信息，例如： transaction: "some_transaction_data", transactionId: "12345", emailTo: $("#emailTo").val(), emailCc: $("#emailCc").val(), emailBcc: $("#emailBcc").val(), emailSubject: $("#emailSubject").val(), emailMessage: $("#emailMessage").val(), pdfContent: pdfContent // 将Base64编码的PDF字符串作为参数发送 }; // 发送Ajax POST请求到后端 $.ajax({ type: "POST", url: ajaxUrl, // 你的后端处理脚本URL data: requestData, success: function(response) { console.log("邮件发送成功:", response); alert("邮件已成功发送！"); }, error: function(xhr, status, error) { console.error("邮件发送失败:", error); alert("邮件发送失败，请稍后再试。"); } }); } catch (error) { console.error("生成PDF或发送Ajax时出错:", error); alert("操作失败，请检查控制台信息。"); }}// 触发发送的事件监听器，例如一个按钮点击事件$(document).on('click', '#sendEmailBtn', function() { sendPdfViaAjax();});
在上述代码中，outputPdf(‘datauristring’) 是关键。它会返回一个形如 data:application/pdf;base64,JVBERi… 的字符串。这个字符串包含了 PDF 的 MIME 类型前缀和 Base64 编码的实际 PDF 数据。
2. 服务器端 PDF 处理与邮件发送 (PHP with PHPMailer)
在 PHP 后端，我们需要接收前端发送过来的 pdfContent 字符串，对其进行解析，然后使用 PHPMailer 将其作为附件添加到邮件中。
SMTPDebug = 0; // 调试输出 (0 = 关闭, 1 = 客户端, 2 = 客户端和服务器) $mail->isSMTP(); // 使用SMTP $mail->Host = 'your.smtp.host.com'; // 你的SMTP服务器地址 $mail->SMTPAuth = true; // 启用SMTP认证 $mail->Username = 'your_smtp_username'; // SMTP 用户名 $mail->Password = 'your_smtp_password'; // SMTP 密码 $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS; // 启用TLS加密，或者 PHPMailer::ENCRYPTION_SMTPS 用于SSL $mail->Port = 587; // TLS端口通常是587，SSL通常是465 // 收件人 $companyEmail = 'sender@yourcompany.com'; // 发件人邮箱 $companyName = 'My Company'; // 发件人名称 $mail->setFrom($companyEmail, $companyName); $mail->addAddress($emailTo); // 收件人邮箱 if (!empty($emailCc)) { $mail->addCC($emailCc); // 抄送 } if (!empty($emailBcc)) { $mail->addBCC($emailBcc); // 密送 } // 附件 // AddStringAttachment 允许直接从字符串添加附件 // 参数: $string, $filename, $encoding, $type $mail->AddStringAttachment($decodedPdf, "GeneratedDocument.pdf", "base64", "application/pdf"); // 内容 $mail->isHTML(true); // 邮件内容为HTML格式 $mail->Subject = $emailSubject; // 邮件主题 $mail->Body = nl2br(htmlspecialchars($emailMessage)); // 邮件HTML内容 $mail->AltBody = strip_tags($emailMessage); // 非HTML邮件客户端的替代内容 $mail->send(); echo 'Message has been sent'; } catch (Exception $e) { echo "Message could not be sent. Mailer Error: {$mail->ErrorInfo}"; }} else { echo "Invalid request.";}?>
在 PHP 代码中，有几个关键点：
数据提取： substr($pdfdoc, strpos($pdfdoc, ‘,’) + 1) 用于从 datauristring 中精确地提取出 Base64 编码的 PDF 数据，移除了 data:application/pdf;base64, 前缀。Base64 解码： base64_decode($pdfData) 将 Base64 编码的字符串解码为原始的二进制 PDF 数据。PHPMailer::AddStringAttachment： 这个方法是 PHPMailer 的一个强大功能，它允许你直接从内存中的字符串（而不是文件路径）添加附件。参数包括：$string: 解码后的二进制 PDF 数据。$filename: 附件在邮件中显示的文件名。$encoding: 附件的编码方式，这里是 “base64″。$type: 附件的 MIME 类型，这里是 “application/pdf”。
3. 注意事项与总结
异步处理： html2pdf() 是异步的，务必使用 await 或 .then() 确保 PDF 内容完全生成后再进行 Ajax 请求。POST 请求大小限制： Base64 编码会使数据量增大约 33%。如果 PDF 文件较大，可能会超出 PHP 服务器的 post_max_size 和 upload_max_filesize 限制。你可能需要在 php.ini 中调整这些设置。安全性： 在处理用户上传或生成的数据时，始终要注意安全。虽然 Base64 编码的 PDF 数据本身通常不包含可执行代码，但仍需确保你的 PHP 脚本对输入进行适当的验证和清理。错误处理： 前端和后端都应包含健壮的错误处理机制，以便在出现问题时能够及时发现并通知用户。PHPMailer 配置： 请根据你的 SMTP 服务提供商正确配置 PHPMailer 的 Host、Port、Username、Password 和 SMTPSecure 等参数。文件命名： 在 AddStringAttachment 中指定的文件名 (“GeneratedDocument.pdf”) 是邮件客户端接收时显示的文件名，可以根据业务逻辑动态生成。
通过上述步骤，你现在应该能够成功地在客户端生成 PDF，并通过 Ajax 将其发送到 PHP 后端，最终使用 PHPMailer 作为附件发送电子邮件。这种方法避免了在服务器端生成 PDF 的额外开销，同时提供了灵活的客户端交互体验。
以上就是使用 html2pdf 生成 PDF 并通过 Ajax 发送至 PHPMailer 的完整教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1508559.html
微信扫一扫 
支付宝扫一扫 
