jsPDF fromHTML images cause the pdf to be empty

Question

I'm trying to generate a pdf out of Tinymce Content, which I access with AngularJS. For This I use the from_html plugin inside jspdf.

First the relevant code parts.

Relevant Function & Index.ejs jspdf includes

//relevant function
var specialElementHandlers = {
  '#bypassme': function(element, renderer) {
    return true;
   }
};

var margin = {
  top: 0,
  left: 0,
  right: 0,
  bottom: 0
};

var tinymceToJSPDFHTML = document.createElement("body");
tinymceToJSPDFHTML.innerHTML = $scope.selectedItem.content;
      
var doc = new jsPDF();
doc.fromHTML(tinymceToJSPDFHTML, 0, 0, {
  'width': 100, // max width of content on PDF
  'elementHandlers': specialElementHandlers
}, function(a) { console.log(a); }, margin);

doc.save('project.pdf');

<script src="/libs/jsPDF-1.2.61/dist/jspdf.debug.js"></script>
<script src="/libs/jsPDF-1.2.61/plugins/from_html.js"></script>

The Code that I want to parse from html to pdf looks somewhat like this, this is just an example.

<strong>
        <img data-mce-src="file/3605842ba1b6e8ac5417622bf1c43b5b" src="file/3605842ba1b6e8ac5417622bf1c43b5b"></img>

        aaaaa

    </strong>

</p>
<p data-mce-style="text-align: center;" style="text-align: center;">

    <strong>

        sasasa

    </strong>

</p>
<p data-mce-style="text-align: right;" style="text-align: right;">

    <em>
        <strong>

            asasas

        </strong>
    </em>

</p>
<p data-mce-style="text-align: left;" style="text-align: left;">

    <span data-mce-style="text-decoration: underline;" style="text-decoration: underline;">
        <em>
            <strong>

                asasasa

            </strong>
        </em>
    </span>

</p>
<ul>

    <li data-mce-style="text-align: left;" style="text-align: left;">
        <span data-mce-style="text-decoration: underline;" style="text-decoration: underline;">
            <em>
                <strong>

                    bas

                </strong>
            </em>
        </span>
    </li>

</ul>

If I parse this code without the image, it's at least working for some part, some text manipulations like italic are not really recognized and also lists are not recognized by the parser.

However if I parse an image (all the images I tried are standard .jpg pictures from for example the windows picture folder and I downscaled them in case they wouldn't fit on the pdf site and that's what causes the empty site.

I debugged the jspdf code so far a little could see that it runs through the methods for load image. Also get-requests are sent from this code, as shown in the Browser Debugger (this routine is also written by me). But still the site remains empty. the exact same img src is displayed in the editor perfectly fine.

How can I fix this problem, so the image is shown at all and it doesn't cause the pdf to be empty.

Answer 1

I have found the solution to my problem. When using the fromHTML Plugin it's important to save the pdf in the callback because else it won't be done rendering by the time it saves the doc.

doc.fromHTML(tinymceToJSPDFHTML, 0, 0, {
    'width': 100, // max width of content on PDF
    'elementHandlers': specialElementHandlers
},
function(bla){doc.save('saveInCallback.pdf');},
margin);

Answer 2

Thanks @FroZenViper for pointing me the callback solution then I can solve it using setTimeout :) - jsPDF Version 1.5.3

doc.fromHTML(yourTargetHTML, 0, 0, {
    // options
},

setTimeout(function () {
    doc.save(`fileName`);
}, 0);