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

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();