在现代 web 应用中,用户可能需要将页面内容导出为 pdf 并通过邮件发送。直接在客户端保存 pdf 相对简单,但要将生成的 pdf 发送到服务器并作为邮件附件,则需要一套完整的客户端与服务器端协作机制。本文将详细阐述如何结合 html2pdf.js、ajax 和 phpmailer 实现这一功能。
html2pdf.js 库能够将 HTML 内容转换为 PDF。其核心在于 outputPdf() 方法,特别是当它与 'datauristring' 参数结合使用时,可以将生成的 PDF 内容以 Base64 编码的字符串形式返回,这正是通过 Ajax 传输的理想格式。
首先,确保你的页面中有一个 HTML 元素作为 PDF 的内容源,例如:
<div id="printPage"> <!-- 这里是你要转换为PDF的内容 --> <h1>报告标题</h1> <p>这是一段示例文本,将包含在PDF中。</p> <table> <thead> <tr><th>列1</th><th>列2</th></tr> </thead> <tbody> <tr><td>数据A</td><td>数据B</td></tr> </tbody> </table> </div>
接下来是 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 数据。
在 PHP 后端,我们需要接收前端发送过来的 pdfContent 字符串,对其进行解析,然后使用 PHPMailer 将其作为附件添加到邮件中。
<?php // 引入PHPMailer库 use PHPMailer\PHPMailer\PHPMailer; use PHPMailer\PHPMailer\Exception; // 根据你的项目结构调整路径 require 'path/to/PHPMailer/src/Exception.php'; require 'path/to/PHPMailer/src/PHPMailer.php'; require 'path/to/PHPMailer/src/SMTP.php'; // 假设这是你的Ajax处理入口 if (isset($_POST['action']) && $_POST['action'] === 'sendEmail') { // 接收前端发送的PDF内容及其他邮件信息 $pdfdoc = $_POST['pdfContent'] ?? ''; $emailTo = $_POST['emailTo'] ?? ''; $emailCc = $_POST['emailCc'] ?? ''; $emailBcc = $_POST['emailBcc'] ?? ''; $emailSubject = $_POST['emailSubject'] ?? '无主题'; $emailMessage = $_POST['emailMessage'] ?? '无内容'; // 从data URI字符串中提取Base64编码的PDF数据 // datauristring的格式通常是: data:application/pdf;base64,实际数据 // 我们需要移除 "data:application/pdf;base64," 这部分前缀 $pdfData = substr($pdfdoc, strpos($pdfdoc, ',') + 1); // 对Base64编码的数据进行解码 $decodedPdf = base64_decode($pdfData); // 确保解码成功且数据不为空 if ($decodedPdf === false || empty($decodedPdf)) { echo "Error: PDF data decoding failed."; exit; } // 创建PHPMailer实例 $mail = new PHPMailer(true); // 启用异常处理 try { // 服务器设置 $mail->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 代码中,有几个关键点:
通过上述步骤,你现在应该能够成功地在客户端生成 PDF,并通过 Ajax 将其发送到 PHP 后端,最终使用 PHPMailer 作为附件发送电子邮件。这种方法避免了在服务器端生成 PDF 的额外开销,同时提供了灵活的客户端交互体验。
以上就是使用 html2pdf 生成 PDF 并通过 Ajax 发送至 PHPMailer 的完整教程的详细内容,更多请关注php中文网其它相关文章!
全网最新最细最实用WPS零基础入门到精通全套教程!带你真正掌握WPS办公! 内含Excel基础操作、函数设计、数据透视表等
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号