如何解决html2canvas+jsPDF生成PDF后通过Mailjet API发送的JS与PHP交互问题

问题根源 #

你的代码存在几个核心问题导致交互失败：

• 客户端与服务端逻辑混淆：JS里直接调用PHP函数sendpdf()是行不通的，两者运行环境完全分离，必须通过HTTP请求传递数据。
• 异步操作顺序错误：sendpdf()调用放在了html2canvas的then回调外，PDF还没生成就触发了发送逻辑，根本拿不到有效数据。
• 数据传递缺失：PHP端读取本地test.pdf，而非前端生成的PDF内容，也没接收前端传入的目标邮箱地址。

修正方案 #

1. 前端生成PDF后，通过AJAX将PDF的base64数据和目标邮箱一起传给PHP后端接口。
2. PHP后端专门处理邮件发送请求，接收前端参数后调用Mailjet API发送带附件的邮件。

完整代码实现 #

前端代码（HTML+JS）

<form>
    <label for="email">邮箱地址 :</label>
    <input type="email" id="email" name="email" required>
    <button id="generate-pdf" type="button">截图并发送邮件</button>
</form>

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
    const { jsPDF } = window.jspdf;

    document.getElementById("generate-pdf").addEventListener("click", function() {
        const email = document.getElementById("email").value;
        if (!email) {
            alert("请填写邮箱地址");
            return;
        }

        html2canvas(document.body).then(function(canvas) {
            const imgData = canvas.toDataURL("image/png");
            const doc = new jsPDF();
            doc.addImage(imgData, "PNG", 10, 10);
            // 输出base64格式的PDF（去掉data:application/pdf;base64,前缀）
            const pdfBase64 = doc.output("datauristring").replace("data:application/pdf;base64,", "");

            // 用fetch发送请求到PHP后端
            fetch("send_pdf.php", {
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                body: `email=${encodeURIComponent(email)}&pdf=${encodeURIComponent(pdfBase64)}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert("邮件发送成功");
                } else {
                    alert("邮件发送失败：" + data.message);
                }
            })
            .catch(error => {
                console.error("请求出错：", error);
                alert("发送请求失败");
            });
        });
    });
</script>

后端代码（send_pdf.php）

<?php
require 'vendor/autoload.php'; // 确保已通过Composer安装Mailjet SDK

use Mailjet\Client;
use Mailjet\Resources;

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if (isset($_POST['email']) && isset($_POST['pdf'])) {
        $targetEmail = $_POST['email'];
        $pdfBase64 = $_POST['pdf'];

        // 配置Mailjet参数
        $apiKey = "你的Mailjet API密钥";
        $apiSecret = "你的Mailjet API密钥";
        $fromEmail = "你的发件邮箱";
        $fromName = "你的发件人名称";

        $mailjet = new Client($apiKey, $apiSecret, true, ['version' => 'v3.1']);
        
        $body = [
            'Messages' => [
                [
                    'From' => [
                        'Email' => $fromEmail,
                        'Name' => $fromName
                    ],
                    'To' => [
                        [
                            'Email' => $targetEmail,
                            'Name' => "收件人"
                        ]
                    ],
                    'Subject' => "页面截图PDF",
                    'TextPart' => "这是你请求的页面截图PDF附件",
                    'HTMLPart' => "<h3>页面截图PDF已附上</h3>",
                    'Attachments' => [
                        [
                            'ContentType' => "application/pdf",
                            'Filename' => "page_screenshot.pdf",
                            'Base64Content' => $pdfBase64
                        ]
                    ]
                ]
            ]
        ];

        $response = $mailjet->post(Resources::$Email, ['body' => $body]);
        
        if ($response->success()) {
            echo json_encode(['success' => true, 'message' => '邮件发送成功']);
        } else {
            echo json_encode(['success' => false, 'message' => $response->getErrorMessage()]);
        }
        exit;
    }
}

echo json_encode(['success' => false, 'message' => '无效请求']);
?>

注意事项 #

• 确保已通过Composer安装Mailjet PHP SDK：composer require mailjet/mailjet-apiv3-php
• 替换代码中的Mailjet密钥、发件邮箱等配置信息
• 前端引入的html2canvas和jsPDF版本可根据实际需求调整

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