Sending PDF data via email using PHPMailer and html2pdf

Question

Im trying to send PDF or PNG over email and nothing seems to work. Below is my LAST attemnt, I have read every single article here on SO and nothing sees to work what is suggested, can someone please help? I am using PHPMailer, html2pdf and html2canvas, both of those produce proper documents on click, just sending them to php mailer dos not work. I am getting documents that can not be opened... Below are my last attempts... With file_get_contents method i get 0 sized data.

PDF attempt:

var element = document.getElementById('printableArea');
// var opt = {  
//      filename:     'nalog.pdf'
// };   
html2pdf().from(element).toPdf().output('datauristring').then(function (pdfAsString) {
    pdfcontent = pdfAsString.replace(/&/,"%26").replace(/=/,"%3D");
     var x = new XMLHttpRequest();
     var url = "xxx/mail.php";
     x.open("POST", url, true);
     x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     x.send("data="+pdfcontent);
console.log(pdfcontent);
        });

PHP:

$mail->AddStringAttachment($_POST['data'],"nalog.pdf"); 

PNG attempt:

html2canvas($('#printableArea')[0], {
  width: 1200
}).then(function(canvas) {
    var data = canvas.toDataURL("image/png");
    pdfcontent = data.replace(/&/,"%26").replace(/=/,"%3D");
    var x = new XMLHttpRequest();
    var url = "xxx/mail.php";
    x.open("POST", url, true);
    x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    x.send("data="+pdfcontent);
    console.log(pdfcontent);
});

PHP:

$mail->AddStringAttachment($_POST['data'],"nalog.png"); 

EDIT: To update my question, I have made suggested things from anwser and tryed to debug it and nothing helped. I made PHP file_put_contents() and compere it with console log and it is the same data.

Any other suggestions?

Answer 1

My guess is that the problem occurs during transfer, since URI doesn't deal well with binary data - there could be NUL characters and who knows what else in there, which truncate or mess-up the data. Try sending this data like this instead (as raw text, instead of URL-encoded one):

    var x = new XMLHttpRequest();
    x.open("POST", "xxx/mail.php", true);
    x.setRequestHeader("Content-type", "text/plain; charset=utf-8");
    x.send( new Uint8Array(pdfcontent) );

Then, on the server side, you need to extract this raw data like this:

   $data = file_get_contents('php://input');

Using $_POST won't work, it should be empty.

If this still produces a bad file, then perhaps the problem isn't in the transfer. Try to copy+paste whatever console.log prints out into a file and see if it can be opened (it might not work even if the data is valid, since were working with binary data, but if it does work, then great - at least we can rule out the problem at the source). Then try to save the data on the server side using file-put-contents (https://www.php.net/manual/en/function.file-put-contents.php), and see if that produces a valid file. If it does, then the problem occurs during emailing.

In any case, you should really generate the files on the server side - all this back and forth is terribly inefficient and horribly unsafe. For example, you can use FPDF (http://www.fpdf.org/) to create a PDF file from scratch using PHP and email it right there. Yes, it doubles your output efforts, since you need to produce HTML and PDF separately, but it's well worth it in the long run. Or perhaps you don't need to produce HTML at all in this setup? Do you produce HTML for the sole purpose of emailing it or do you really need to present it to the user as well?

Answer 2

After almost giving up, finally got it to work. Its a combination of few things linked here and suggested. This post on github html2pdf helped a bit also.

I'm posting it here as none of the examples worked for me, took me two days to find what works for me and my interment. Hope it helps someone.

window.onload = function pdfDivload (){
let el = document.getElementById('printableArea');
let opt = {
    margin:       1,
    filename:     'myfile.pdf',
    image:        { type: 'jpeg', quality: 0.98 },
    html2canvas:  { scale: 2 },
    jsPDF:        { unit: 'in', format: 'A4', orientation: 'portrait' }
};

html2pdf().set( opt ).from( el ).toPdf().output('datauristring').then(function( pdfAsString ) {
    let data = {
        'fileDataURI': pdfAsString,
    };
    $.post( "../prog/mail.php", data);
    console.log( data );
} );
};

PHP:

  if (isset($_POST['fileDataURI'])) {

                $pdfdoc         = $_POST['fileDataURI'];

            $b64file        = trim( str_replace( 'data:application/pdf;base64,', '', $pdfdoc ) );
            $b64file        = str_replace( ' ', '+', $b64file );
            $decoded_pdf    = base64_decode( $b64file );
            //file_put_contents( $attachment, $decoded_pdf );

            $mail = new PHPMailer;
            $mail->setFrom( 'xxx@xxx.hr', 'website' );
            $mail->addAddress( 'xxx@gxxx.com', 'OdedTa' );
            $mail->Subject  = 'First PHPMailer Message';
            $mail->Body     = 'Hi! This is my first e-mail sent through PHPMailer.';
            $mail->addStringAttachment($decoded_pdf, "nalog.pdf");
            $mail->isHTML( true );
            $mail->send();