将 html2pdf pdf 或 html2canvas 图像发送到电子邮件

Question

我有两个 PHP 页。第一个是用户输入数据的表单，当提交第二个页面时，会创建一个 div 来制作“发票”。此页面包含将该发票另存为 PDF 或 IMG 的选项。此页面还会自动发送并通过电子邮件发送确认信息。

我想在此电子邮件中发送 PDF 或图像作为附件。

html2canvas.js.png:

function picDiv() { 
html2canvas($('#printableArea')[0], {
  width: 1200
}).then(function(canvas) {
  var a = document.createElement('a');
  a.href = canvas.toDataURL("image/png");
  a.download = 'nalog.png';
  a.click();
});
};

和html2pdf.js生成pdf：

function pdfDiv() { 
var element = document.getElementById('printableArea');
var opt = { 
    filename:     'nalog.pdf'
};
html2pdf().set(opt).from(element).save();
};

我读过其他东西Send Image to server using File input type, . Also outside articles like this: Send HTML5 Canvas as Image to Server and html2pdf github post。最后一个 html2pdf github post 声明以下代码可以发送到电子邮件或服务器，但我不知道如何通过电子邮件发送。它成功地将 pdf 转换为字符串。

    html2pdf().from(element).toPdf().output('datauristring').then(function (pdfAsString) {
//send via email.
        });

我的 php 电子邮件发送是：

$user = "some email";
$usersubject = "Initium - Vaš online radni nalog";
$userheaders = "From: some email";
$usermessage = "

//some content with php variables and text.

";    
mail($user,$usersubject,$usermessage,$userheaders);

如果有人能解释如何通过我已有的代码发送 PDF 或图像，我会很高兴。请记住，这一切都在同一页面上，并且需要在同一页面加载时完成。

我尝试了很多事情和方法来做到这一点，但因为这对我来说是新领域而迷路了。感谢任何帮助。

编辑：

完整的解决方案在这里：

Answer 1

如果客户端已经有一个字符串，那么最简单的方法是使用AJAX将它发送到服务器。您可以简单地直接创建 XMLHttpRequest 对象（查找它，它非常简单），或者 JQuery （您显然正在使用）有一个更简单的方法，不确定，多年没有使用它。无论如何，使用 AJAX 您只需将文件内容作为字符串发送到具有 'mail' 命令的 PHP 脚本，应该就是这样。如果您需要详细的代码示例，请告诉我。

Answer 2

好的，我猜你需要两个步骤：

第一步：将文件内容从前端发送到服务器。在将文件内容作为字符串（例如，名为 "pdfcontent" 的变量）后立即在 JavaScript 中使用以下内容：

    var x = new XMLHttpRequest();
    var url = "<your domain>/mail.php";
    x.open("POST", url, true);
    x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    x.send("data="+pdfcontent);

无需将它放入任何 HTML 元素或其他元素中 - 只需在 'pdfDiv' 或创建文件内容的任何函数之后立即执行它。当然，这只是一个骨架代码——真正的程序必须包括错误检查、防止各种攻击等，但那是完全不同的故事。您也可能需要格式化 'pdfcontent' 以便它可以像这样用作 URI 参数。

第 2 步：现在你的 "mail.php" 脚本（或者你怎么称呼它 - 带有 "mail" 命令的脚本）已经收到 $_POST['data'] 字符串中的文件内容。或者您可能已经在服务器端将文件内容（PDF 或其他）作为二进制字符串（您的问题不清楚）。无论哪种方式，您只需要将其附加到电子邮件中并发送出去。二进制附件确实很麻烦，所以我建议下载并安装 PHPMailer (https://github.com/PHPMailer/PHPMailer) - 它非常友好且易于安装和使用。安装后，在 PHP 脚本中使用以下命令代替 "mail" 命令：

    use PHPMailer\PHPMailer\PHPMailer;
    use PHPMailer\PHPMailer\Exception;
    require_once "PHPMailer/src/Exception.php";  // directory may be different on your server
    require_once "PHPMailer/src/PHPMailer.php";  // directory may be different on your server

    $mail = new PHPMailer;
    $mail->addAddress(...);   // specify "To" address
    $mail->setFrom(...);   // specify "From" address
    $mail->Subject = ...;   // specify subject line
    $mail->Body    = ...;   // specify email content
    $mail->addStringAttachment(<binary string with file content>, "nalog.pdf");
    $mail->send();

如果您想确保电子邮件到达目的地并且不会卡在垃圾邮件文件夹或其他东西中，发送电子邮件的方法远不止于此，但那是完全不同的事情。此外，如果您通过 $_POST 接收此数据，那么您必须正确验证它，否则它只是一个滴答作响的定时炸弹。您还必须确保不能直接使用您的脚本，否则任何人都可以代表您发送任何垃圾邮件，您就会遇到麻烦。尽管我不确定如何在此设置下防止此类攻击。您可能不得不重新考虑您的整个体系结构并仅在服务器上生成文件内容，而根本不使用 AJAX 来达到此目的 - 太危险了。

Answer 3

我在这里找到了一个方法：https://base64.guru/developers/php/examples

我现在可以直接使用以下方式发送电子邮件附件：'html2pdf.bundle.min.js' with 'jquery.min.js' post to PHP 'PHPMailer'.

我需要做的就是去除“data:application/pdf;filename=generated.pdf;base64,” 在发送到 PHP.

之前从字符串中取出

将 html2pdf pdf 或 html2canvas 图像发送到电子邮件

Send html2pdf pdf or html2canvas image to email

javascript

php

html2pdf

html2canvas