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

Question

我有两个 PHP 页面。第一个是用户输入数据的表单，提交时使用一个 div 创建第二页，该 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 , html2canvas and jsPDF : send generated pdf as email attachment 。还有这样的外部文章: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

Answer 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 来实现此目的 - 太危险了。