时间戳

首页 > 解决方案 > 将 html2pdf pdf 或 html2canvas 图像发送到电子邮件

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

问题描述

我有两个 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();
};

我已经阅读了使用文件输入类型、html2canvas 和 jsPDF 将图像发送到服务器等内容：将生成的 pdf 作为电子邮件附件发送。此外还有这样的文章：Send HTML5 Canvas as Image to Server和html2pdf github post。最后一篇 html2pdf github 帖子指出以下代码可以发送到电子邮件或服务器，但我不知道如何通过电子邮件发送。它成功地将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 或图像，我会很高兴。请记住，这都在同一页面上，并且需要在同一页面加载时完成。

我尝试了很多事情和方法来做到这一点并且迷失了，因为这对我来说是新的领域。任何帮助表示赞赏。

编辑：

完整的工作解决方案在这里：https ://stackoverflow.com/a/61418366/7158959

标签： javascriptphphtml2canvashtml2pdf

解决方案

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

步骤 1：将文件内容从前端发送到服务器。在您将文件内容作为字符串（例如，一个名为“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 来达到此目的 - 太危险了。

推荐阅读