使用html2pdf生成PDF并通過(guò)Ajax發(fā)送至PHPMailer的完整教程

<div id="printPage">     <h1>這是一個(gè)PDF標(biāo)題</h1>     <p>這是需要轉(zhuǎn)換為PDF的內(nèi)容。</p>     <ul>         <li>列表項(xiàng)1</li>         <li>列表項(xiàng)2</li>     </ul>     @@##@@ </div> <button id="sendPdfBtn">生成并發(fā)送PDF</button>

// 獲取需要轉(zhuǎn)換為PDF的HTML元素 let page = document.getElementById('printPage');  // html2pdf 配置選項(xiàng) var pdfOptions = {     margin: [5, 0, 0, 0], // 上右下左邊距     filename: 'document.pdf', // 盡管不直接保存，但此文件名會(huì)作為附件默認(rèn)名     image: {         type: 'jpeg',         quality: 1 // 圖片質(zhì)量     },     pagebreak: {         mode: ['legacy'] // 分頁(yè)模式     },     html2canvas: {         scale: 3 // html2canvas 渲染比例     },     jsPDF: {         unit: 'mm', // 單位         format: 'a4', // 紙張格式         orientation: 'portrait' // 方向：縱向     } };  // 監(jiān)聽(tīng)按鈕點(diǎn)擊事件 $(document).on('click', '#sendPdfBtn', async function() {     let pdfContent;      try {         // 使用 await 等待 PDF 生成為 datauristring         pdfContent = await html2pdf().from(page).set(pdfOptions).outputPdf('datauristring');         // 或者使用 .then() 回調(diào)方式         // await html2pdf().from(page).set(pdfOptions).outputPdf('datauristring').then(function(pdfAsString) {         //     pdfContent = pdfAsString;         // });          // 準(zhǔn)備 Ajax 請(qǐng)求數(shù)據(jù)         let ajaxUrl = 'your_php_mailer_script.php'; // 替換為你的php腳本URL         let transaction = 'someTransactionType'; // 示例數(shù)據(jù)         let transactionId = '12345'; // 示例數(shù)據(jù)          $.ajax({             type: "POST",             url: ajaxUrl,             data: {                 action: "sendEmail", // 示例動(dòng)作                 transaction: transaction,                 transactionId: transactionId,                 emailTo: $("#emailTo").val() || "recipient@example.com", // 接收者郵箱                 emailCc: $("#emailCc").val(), // 抄送                 emailBcc: $("#emailBcc").val(), // 密送                 emailSubject: $("#emailSubject").val() || "來(lái)自網(wǎng)站的PDF報(bào)告", // 郵件主題                 emailMessage: $("#emailMessage").val() || "請(qǐng)查收附件中的PDF文檔。", // 郵件內(nèi)容                 pdfContent: pdfContent // 核心：Base64編碼的PDF內(nèi)容             },             success: function(data) {                 console.log("郵件發(fā)送響應(yīng):", data);                 alert("郵件發(fā)送成功！");             },             error: function(xhr, status, error) {                 console.error("Ajax請(qǐng)求失敗:", status, error);                 alert("郵件發(fā)送失敗，請(qǐng)查看控制臺(tái)了解詳情。");             }         });      } catch (error) {         console.error("PDF生成或發(fā)送過(guò)程中發(fā)生錯(cuò)誤:", error);         alert("PDF生成或發(fā)送失敗。");     } });

<?php // 引入 PHPMailer 相關(guān)的類文件 use PHPMailerPHPMailerPHPMailer; use PHPMailerPHPMailerException;  require 'path/to/PHPMailer/src/Exception.php'; require 'path/to/PHPMailer/src/PHPMailer.php'; require 'path/to/PHPMailer/src/SMTP.php';  // 設(shè)置響應(yīng)頭，防止CORS問(wèn)題或確保JSON響應(yīng) header('Content-Type: application/json');  // 檢查是否是POST請(qǐng)求 if ($_SERVER['REQUEST_METHOD'] !== 'POST') {     echo json_encode(['status' => 'error', 'message' => 'Invalid request method.']);     exit; }  // 獲取前端發(fā)送的PDF內(nèi)容及其他郵件信息 $pdfdoc = $_POST['pdfContent'] ?? ''; $emailTo = $_POST['emailTo'] ?? ''; $emailCc = $_POST['emailCc'] ?? ''; $emailBcc = $_POST['emailBcc'] ?? ''; $emailSubject = $_POST['emailSubject'] ?? '郵件主題未設(shè)置'; $emailMessage = $_POST['emailMessage'] ?? '郵件內(nèi)容為空';  // 驗(yàn)證PDF內(nèi)容是否存在 if (empty($pdfdoc)) {     echo json_encode(['status' => 'error', 'message' => 'PDF content is missing.']);     exit; }  // 提取Base64編碼的PDF數(shù)據(jù) // 'data:application/pdf;base64,' 這個(gè)前綴需要被移除 $pdfData = substr($pdfdoc, strpos($pdfdoc, ',') + 1); // 從逗號(hào)后面開始截取  // 對(duì)Base64數(shù)據(jù)進(jìn)行解碼 $decodedPdf = base64_decode($pdfData);  // 檢查解碼是否成功 if ($decodedPdf === false) {     echo json_encode(['status' => 'error', 'message' => 'Failed to decode PDF content.']);     exit; }  // PHPMailer 實(shí)例 $mail = new PHPMailer(true); // true enables exceptions  try {     // 服務(wù)器設(shè)置 (根據(jù)你的SMTP服務(wù)商配置)     $mail->SMTPDebug = 0; // 0 = off (for production), 1 = client messages, 2 = client and server messages     $mail->isSMTP(); // 使用SMTP     $mail->Host       = 'smtp.yourdomain.com'; // SMTP 服務(wù)器地址     $mail->SMTPAuth   = true; // 啟用SMTP認(rèn)證     $mail->Username   = 'your_email@yourdomain.com'; // SMTP 用戶名     $mail->Password   = 'your_email_password'; // SMTP 密碼     $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS; // 啟用TLS加密，或者 PHPMailer::ENCRYPTION_SMTPS for SSL     $mail->Port       = 587; // TLS 端口通常是 587，SSL 端口通常是 465      // 收件人     $mail->setFrom('sender@yourdomain.com', 'Your Company Name'); // 發(fā)件人郵箱和名稱     $mail->addAddress($emailTo); // 收件人郵箱     if (!empty($emailCc)) {         $mail->addCC($emailCc); // 抄送     }     if (!empty($emailBcc)) {         $mail->addBCC($emailBcc); // 密送     }      // 附件     // AddStringAttachment(string $string, string $filename, string $encoding = 'base64', string $type = '', string $disposition = 'attachment')     // 這里我們傳入的是原始的二進(jìn)制PDF數(shù)據(jù)，所以編碼類型是 'base64' (因?yàn)樗笆莃ase64編碼的)，MIME類型是 'application/pdf'     $mail->AddStringAttachment($decodedPdf, "GeneratedDocument.pdf", "base64", "application/pdf");      // 內(nèi)容     $mail->isHTML(true); // 郵件內(nèi)容為HTML格式     $mail->Subject = $emailSubject; // 郵件主題     $mail->Body    = nl2br(htmlspecialchars($emailMessage)); // 郵件HTML內(nèi)容，nl2br保留換行，htmlspecialchars防止xss     $mail->AltBody = strip_tags($emailMessage); // 純文本內(nèi)容，用于不支持HTML的郵件客戶端      $mail->send();     echo json_encode(['status' => 'success', 'message' => 'Message has been sent.']);  } catch (Exception $e) {     echo json_encode(['status' => 'error', 'message' => "Message could not be sent. Mailer Error: {$mail->ErrorInfo}"]); } ?>