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.

Solution

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

Comments

[Stefan Svrkota]

You just saved my life... Upvote, upvote, upvote million times! :) Have you maybe encoutered problems with images being too large in PDF document when using fromHTML()?

[DevEng]

the code in my callback is never executed, do you know why that might be?

[Sakkeer A]

@FroZenViper I can download the text while clicking the button. But, I couldn't download the image and canvas.

[Anh Hoang]

@A.Sakkeer Convert your canvas to imagebase64 (canvas.toDataUrl('image/jpeg') then you can export it. Incase of SVG, you can use canvg library (github.com/canvg/canvg) to render canvas first

[user2644620]

@FroZenViper, Why Input field values are not getting displayed in the PDF, ? Have you came through that issue?

[user2644620]

Why Input field values are not getting displayed in the PDF, ? Have you came through that issue?