首页 > web前端 > js教程 > 正文

使用html2pdf生成PDF并通过Ajax发送至PHPMailer实现邮件附件功能

花韻仙語
发布: 2025-07-07 22:02:02
原创
258人浏览过

使用html2pdf生成PDF并通过Ajax发送至PHPMailer实现邮件附件功能

本教程详细阐述了如何利用前端JavaScript库html2pdf生成PDF文档,并将其以Base64编码字符串的形式通过Ajax发送至后端PHP脚本。在后端,我们使用PHPMailer库接收并解码该PDF数据,最终将其作为附件添加到电子邮件中发送。文章涵盖了从客户端PDF生成、数据传输到服务器端数据处理和邮件发送的完整流程,并提供了详细的代码示例和关键注意事项,旨在帮助开发者高效实现客户端PDF的服务器端邮件集成功能。

1. 概述

在web应用开发中,有时我们需要在客户端生成pdf文档,并将其作为附件通过电子邮件发送。直接在客户端发送邮件存在安全和功能限制,因此通常的做法是将生成的pdf数据发送到服务器,再由服务器端的邮件服务(如phpmailer)进行发送。本文将详细介绍如何结合html2pdf.js、ajax和phpmailer实现这一功能。

2. 客户端PDF生成与数据准备 (JavaScript)

客户端的核心任务是将HTML内容转换为PDF,并以可传输的格式(通常是Base64编码字符串)获取PDF数据。html2pdf.js库提供了outputPdf('datauristring')方法来获取这种格式的数据。

2.1 html2pdf配置与PDF生成

首先,确保你的HTML页面中有一个用于生成PDF的元素,例如一个div。

<div id="printPage">
    <!-- 这里是你要转换为PDF的内容 -->
    <h1>PDF 文档标题</h1>
    <p>这是一段示例文本,将被包含在生成的PDF中。</p>
    @@##@@
</div>
<button id="sendPdfBtn">发送PDF邮件</button>
登录后复制

接下来,在JavaScript中配置html2pdf并获取PDF内容:

立即学习PHP免费学习笔记(深入)”;

// 假设你的HTML中有一个ID为'printPage'的元素,这是要转换为PDF的内容源
let page = document.getElementById('printPage');

// html2pdf的配置选项
var options = {
    margin: [5, 0, 0, 0], // 上右下左边距
    filename: 'document.pdf', // 默认文件名,在服务器端可覆盖
    image: {
        type: 'jpeg',
        quality: 1 // 图像质量
    },
    pagebreak: {
        mode: ['legacy'] // 分页模式
    },
    html2canvas: {
        scale: 3 // html2canvas渲染比例,影响清晰度
    },
    jsPDF: {
        unit: 'mm', // 单位
        format: 'a4', // 纸张格式
        orientation: 'portrait' // 方向:纵向
    }
};

// 监听按钮点击事件,触发PDF生成和发送
$(document).on('click', '#sendPdfBtn', async function() {
    let pdfContent;

    try {
        // 使用await等待PDF内容生成,并以datauristring格式获取
        // datauristring格式包含 "data:application/pdf;base64," 前缀
        pdfContent = await html2pdf().from(page).set(options).outputPdf('datauristring');

        // 成功获取PDF内容后,通过Ajax发送到服务器
        sendPdfToServer(pdfContent);

    } catch (error) {
        console.error("PDF生成失败:", error);
        alert("PDF生成失败,请稍后再试。");
    }
});

// 这是一个示例函数,用于将PDF内容发送到服务器
async function sendPdfToServer(pdfData) {
    // 假设ajaxUrl是你的PHP处理脚本的URL
    const ajaxUrl = 'your_php_mailer_script.php'; 

    // 其他需要发送的表单数据,例如邮件接收者、主题、消息等
    const emailTo = $("#emailTo").val(); // 假设有输入框获取收件人
    const emailSubject = $("#emailSubject").val(); // 假设有输入框获取邮件主题
    const emailMessage = $("#emailMessage").val(); // 假设有输入框获取邮件内容

    $.ajax({
        type: "POST", // 使用POST方法发送数据
        url: ajaxUrl,
        data: {
            action: "sendEmail", // 自定义动作,用于PHP脚本识别
            emailTo: emailTo,
            emailSubject: emailSubject,
            emailMessage: emailMessage,
            pdfContent: pdfData // 将Base64编码的PDF内容作为参数发送
        },
        success: function(response) {
            console.log("服务器响应:", response);
            alert("邮件发送成功!");
        },
        error: function(xhr, status, error) {
            console.error("Ajax请求失败:", status, error);
            alert("邮件发送失败,请检查网络或联系管理员。");
        }
    });
}
登录后复制

关键点:

  • outputPdf('datauristring'): 这是将PDF内容转换为Base64编码字符串的关键。它返回的字符串会包含一个data:URI前缀,例如data:application/pdf;base64,...。
  • await: html2pdf的outputPdf方法是异步的,因此需要使用await关键字(或.then()方法)来等待PDF内容生成完毕。这要求包裹该代码的函数是async函数。
  • Ajax POST请求:通过POST方法发送数据,确保PDF内容作为请求体的一部分发送,避免URL长度限制。

3. 服务器端PDF处理与邮件发送 (PHP with PHPMailer)

服务器端PHP脚本负责接收客户端发送的Base64编码PDF数据,解码它,然后使用PHPMailer将其作为附件发送。

3.1 接收与解码PDF数据

当客户端通过Ajax发送pdfContent时,PHP可以通过$_POST['pdfContent']来获取它。由于datauristring包含data:application/pdf;base64,前缀,我们需要先去除这个前缀,然后再进行Base64解码。

<?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';

// 确保请求是POST并且包含pdfContent
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['pdfContent'])) {
    $pdfdoc = $_POST['pdfContent'];

    // 移除data URI前缀 "data:application/pdf;base64,"
    // strpos(',', $pdfdoc) 找到第一个逗号的位置
    $pdfData = substr($pdfdoc, strpos($pdfdoc, ",") + 1); // +1是为了跳过逗号本身

    // 对Base64编码的PDF数据进行解码
    $decodedPdf = base64_decode($pdfData);

    // 获取其他邮件信息
    $emailTo = $_POST['emailTo'] ?? 'default@example.com';
    $emailSubject = $_POST['emailSubject'] ?? '来自网站的PDF附件';
    $emailMessage = $_POST['emailMessage'] ?? '请查收附件中的PDF文档。';

    // 创建PHPMailer实例
    $mail = new PHPMailer(true); // 启用异常处理

    try {
        // 服务器设置 (根据你的SMTP服务商配置)
        $mail->SMTPDebug = 0;                      // 启用详细调试输出 (0为关闭,1为客户端,2为客户端和服务器)
        $mail->isSMTP();                           // 使用SMTP
        $mail->Host       = 'smtp.example.com';    // 你的SMTP服务器地址
        $mail->SMTPAuth   = true;                  // 启用SMTP认证
        $mail->Username   = 'your_email@example.com'; // SMTP用户名
        $mail->Password   = 'your_email_password'; // SMTP密码
        $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS; // 启用TLS加密,或者PHPMailer::ENCRYPTION_SMTPS for SSL
        $mail->Port       = 587;                   // SMTP端口 (TLS通常是587,SSL通常是465)

        // 收件人
        $mail->setFrom('sender@example.com', '你的公司名称'); // 发件人邮箱和名称
        $mail->addAddress($emailTo);               // 添加收件人
        // $mail->addCC('cc@example.com');           // 添加抄送
        // $mail->addBCC('bcc@example.com');         // 添加密送

        // 附件
        // AddStringAttachment用于添加字符串作为附件
        // 第一个参数是附件内容(已解码的二进制数据)
        // 第二个参数是附件文件名
        // 第三个参数是内容的编码类型 (这里是'binary'因为我们已经解码了)
        // 第四个参数是MIME类型
        $mail->AddStringAttachment($decodedPdf, "GeneratedDocument.pdf", "binary", "application/pdf");

        // 内容
        $mail->isHTML(true);                       // 邮件内容为HTML格式
        $mail->Subject = $emailSubject;            // 邮件主题
        $mail->Body    = $emailMessage;            // 邮件HTML内容
        $mail->AltBody = strip_tags($emailMessage); // 非HTML邮件客户端的纯文本内容

        $mail->send();
        echo '邮件已成功发送!';
    } catch (Exception $e) {
        echo "邮件发送失败。 PHPMailer 错误: {$mail->ErrorInfo}";
    }
} else {
    echo '无效的请求或缺少PDF内容。';
}
?>
登录后复制

关键点:

  • Base64解码: substr($pdfdoc, strpos($pdfdoc, ",") + 1)用于去除data:application/pdf;base64,前缀。base64_decode()将剩余的Base64字符串转换为原始二进制数据。
  • AddStringAttachment: PHPMailer的AddStringAttachment()方法非常适合这种场景,因为它允许你直接从字符串添加附件内容,而无需先将文件保存到服务器。
    • 第一个参数是已解码的二进制PDF数据
    • 第三个参数"binary"至关重要,它告诉PHPMailer你提供的数据是原始二进制格式,而不是需要PHPMailer再次解码的Base64字符串。
  • PHPMailer配置: 务必根据你的SMTP服务商正确配置Host、Username、Password、SMTPSecure和Port。

4. 注意事项与最佳实践

  • 文件大小限制: 通过Ajax发送Base64编码的PDF数据,如果PDF文件过大,可能会导致POST请求体过大,超出服务器或PHP的配置限制(如post_max_size,upload_max_filesize)。对于非常大的PDF文件,考虑将文件上传到服务器的临时目录,然后将文件路径传递给PHPMailer。
  • 安全性:
    • 输入验证: 永远不要信任来自客户端的数据。对emailTo、emailSubject、emailMessage等所有接收到的POST数据进行严格的验证和过滤,以防止XSS攻击、邮件头注入等安全漏洞。
    • 文件类型验证: 虽然这里是内部生成,但如果是用户上传,应严格验证文件类型。
  • 错误处理:
    • 客户端: 在JavaScript中添加try...catch块来捕获html2pdf生成PDF时的错误,以及Ajax请求的错误。
    • 服务器端: PHPMailer的构造函数传入true可以启用异常处理,try...catch块可以捕获邮件发送过程中的错误,并通过$mail->ErrorInfo获取详细错误信息。
  • 异步操作: html2pdf的PDF生成和Ajax请求都是异步操作。确保你的JavaScript代码正确处理了这些异步性(使用async/await或.then())。
  • PHPMailer库路径: 在PHP代码中,确保require语句指向了PHPMailer库的正确路径。

5. 总结

通过结合html2pdf.js在客户端生成PDF,利用Ajax将Base64编码的PDF数据传输到服务器,再通过PHPMailer在服务器端解码并发送邮件附件,我们实现了一个完整的客户端PDF生成与服务器端邮件发送的解决方案。这种方法避免了在客户端直接处理邮件发送的复杂性和安全问题,提供了一个健壮且可扩展的实现方案。

示例图片

以上就是使用html2pdf生成PDF并通过Ajax发送至PHPMailer实现邮件附件功能的详细内容,更多请关注php中文网其它相关文章!

WPS零基础入门到精通全套教程!
WPS零基础入门到精通全套教程!

全网最新最细最实用WPS零基础入门到精通全套教程!带你真正掌握WPS办公! 内含Excel基础操作、函数设计、数据透视表等

下载
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号