Search code examples
javascriptpdfjspdfhtml2canvas

Exporting images to jsPDF from html

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

Solution

  • 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>