5

I have a webpage on which I wish to print some HTML. To do so, I use html2canvas and jsPDF.

The issue that I encounter is that it does not print the images shown in the HTML.

My HTML and css looks as follows (complete code in fiddle): 

.handsomeHtml { background: red; } .crazyFrog { background: url('http://e-cdn-images.deezer.com/images/artist/01eb92fc47bb8fb09adea9f763bb1c50/500x500.jpg'); width: 500px; height: 500px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"> </script> <div id="someHtml" class="handsomeHtml"> Hello, handsome HTML <br> <img class="crazyFrog"></img> </div> <button id="savePDFbutton" onclick="savePDF()"> save pdf </button>

Expected result:

enter image description here

Actual PDF result

enter image description here

Improve this question

2 Answers 2

Reset to default
8

Check this working code.

You can check code on fiddle also.

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script> <script type="text/javascript"> var testDivElement = document.getElementById('someHtml'); function savePDF() { var imgData; html2canvas($("#someHtml"), { useCORS: true, onrendered: function (canvas) { imgData = canvas.toDataURL( 'image/png'); var doc = new jsPDF('p', 'pt', 'a4'); doc.addImage(imgData, 'PNG', 10, 10); doc.save('sample-file.pdf'); window.open(imgData); } }); } </script> <style> .handsomeHtml { background: red; } .crazyFrog { background: url('http://e-cdn-images.deezer.com/images/artist/01eb92fc47bb8fb09adea9f763bb1c50/500x500.jpg'); width: 500px; height: 500px; } </style> </head> <body> <div id="someHtml" class="handsomeHtml"> Hello, handsome HTML <br /> <img class="crazyFrog"></img> </div> <br /> <button id="savePDFbutton" onclick="savePDF()"> save pdf </button> </body> </html>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

The image is clipped. Why is that?
it's clipped because when you scrolled down to the "save pdf" button, you're only seeing the clipped size of the image. if you make the JSFiddle's HTML rendered box larger, you'll be able to print the whole image to pdf
4

It might be that the jsPDF library cannot resolve images "over the wire", have you attempted to include it as a base64-encoded image directly in the CSS instead?

Improve this answer

2 Comments

Thanks, that actually worked, but I'm afraid that i cannot convert everything to base64
you can use base 64 encoder utility for concurrent use

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.