When saving/email PDF to WordPress, it keeps saving/emailing a blank corrupt PDF (jsPDF & html2pdf)

I got this working, for anyone else needing it.

I have added notes in the code for explanation

First add this to the top of your page

<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

HTML / Wordpress content loop part

<div id="PDFcontent">
<h1 class="mypdftitle"> PDF tile </h1>
<img src="https://styles.redditmedia.com/t5_2r5i1/styles/communityIcon_x4lqmqzu1hi81.jpg?width=256&s=fc15e67e2b431bbd2e93e980be3090306b78be55"> 
<div class="html2pdf__page-break"></div>
<h2> Page 2 title<h2>
Some text
<div class="html2pdf__page-break"></div>
<h2> Page 3 title<h2>
Some text
</div>

JQuery - goes at the bottom on the page above the footer

jQuery(function($) {
    window.onload = function() {
        let el = document.getElementById('PDFcontent');
        var title = $('.exhibitied-title').text();
        let opt = { //Create/design the pdf
            margin: 0.2,
            filename: title + '.pdf',
            image: {
                type: 'jpeg',
                quality: 0.99
            },
            html2canvas: {
                scale: 2,
                logging: true,
                dpi: 192,
                letterRendering: true,
            },
            jsPDF: {
                unit: 'mm',
                format: 'a4',
                orientation: 'portrait'
            }
        };
        html2pdf().from(el).set(opt).toPdf() /*add .save() if you need it to download locally too*/.output('datauristring').then(function(res) {
            this.blobString = res;
            title = $('mypdftitle').text(); //Get the title from h1 html
            filetitle = title; //set the title to be send in the ajax
            let data = {
                'action': 'send_email_with_pdf', //Name of function in functions.php
                'fileDataURI': this.blobString,
                'filetitle': filetitle, //name of pdf - you set this above
            }
            $.post(myAjax.ajaxurl, data, function(response) { //myAjax.ajaxurl see the bottom code comment
                console.log(response);
                console.log(filetitle);
            });
            console.log(this.blobString);
        });
    }
});
```

Now in functions.php

    function send_email_with_pdf() {
        if (isset($_POST['fileDataURI'])) {
    
            /*** Prepare and decode the uri string ***/
                $pdfdoc     = $_POST['fileDataURI']; // This looks like data:application/pdf;filename=generated.pdf;base64,JVBERi0xLjMKJbrfrOAKMyAwIG9iago8PC9UeXB....
                       $b64file        = str_replace( 'data:application/pdf;filename=generated.pdf;base64,', '', $pdfdoc ) ; //remove data:application/pdf;filename=generated.pdf;base64,
                     $decoded_pdf    = base64_decode(  $b64file  ); //decode it
    
    
    
            /**** Unique naming ****/   
               $date = date("d-m-y"); // Today date day month year
                   $time = date("h:i"); // The time 
             //Adding date and time to the pdf, will make sure each pdf generated is unique 
             $ext = ".pdf"; //file extension
                 $thename = $_POST['filetitle']; //The title sent by ajax from the extension page
                 $name        = str_replace( ' ', '-', $thename ) ; //remove spaces - makes urls better
            $filename =  $name . '-' . $date . '-' . $time . $ext; // combine the file name
            //If you dont want date and time, then do the following $filename = $thename . $ext;
    
    
    
            /**** Upload directory *****/
            $upload_dir = wp_upload_dir();
            if (wp_mkdir_p($upload_dir['path'])) { // Puts the file in wp-content/uploads/year/month
                $file = $upload_dir['path'].
                '/'.$filename;
            } else {
                $file = $upload_dir['basedir'].
                '/'.$filename;
            }
    
    
            /*** Upload it ****/
            file_put_contents($file, $decoded_pdf);
    
    
    
            /*** Send the email ****/
            $mail = new PHPMailer;
                    $mail->setFrom( 'me@myemail.com', 'My name' );
                    $mail->addAddress( 'you@youremail.com', 'your name' );
            $mail - > Subject = $filename;
            $mail - > Body = $filename; //email text goes here, I have made it the file name for example
            $mail - > addStringAttachment($decoded_pdf, $filename);
            $mail - > isHTML(false);
            if (!$mail - > send()) {
                $response = 'Message was not sent.';
                $response. = 'Mailer error: '.$mail - > ErrorInfo;
            } else {
                $response = 'Message has been sent.';
                $response = $image_data;
            }
            wp_send_json($response);
        }
    }
    add_action('wp_ajax_send_email_with_pdf', 'send_email_with_pdf');
    add_action('wp_ajax_nopriv_send_email_with_pdf', 'send_email_with_pdf');

For those who are unsure about the myAjax.ajaxurl in the JQuery part, Add this to the top of your functions.php in your WordPress theme, and then when ever you want to call Ajax on your site you can use the myAjax.ajaxurl

add_action( 'init', 'script_enqueuer' );

function script_enqueuer() {
   wp_register_script( "liker_script", get_stylesheet_directory_uri().'/js/functionality.js', array('jquery') );
   wp_localize_script( 'liker_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        
    wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'liker_script' );
}