Converting HTML images to jsPDF files

Question

Converting HTML images to jsPDF files

I need to print some HTML on a webpage using html2canvas and jsPDF. However, I am facing an issue where the images in the HTML are not getting printed.

Here is my HTML and CSS code (full code available 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 outcome:

https://i.sstatic.net/GtdVO.png

Actual PDF output:

https://i.sstatic.net/NNi0X.png

javascript pdf jspdf html2canvas

Answer 1

Answer №1

Here is a code snippet that is working perfectly.

You can view and test the code on JSFiddle.

<!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 as PDF
        </button> 
    </body>
    </html>

Answer 2

Here is a code snippet that is working perfectly.

You can view and test the code on JSFiddle.

<!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 as PDF
        </button> 
    </body>
    </html>

Answer 3

Answer №2

Perhaps the issue lies with the jsPDF library's inability to load images from external sources. Have you tried embedding the image as a base64-encoded string within the CSS code instead?

Answer 4

Perhaps the issue lies with the jsPDF library's inability to load images from external sources. Have you tried embedding the image as a base64-encoded string within the CSS code instead?

Converting HTML images to jsPDF files

Answer №1

Answer №2

Similar questions

Synchronizing live data from the database to the front end of a Java-powered web application

I am encountering an issue with inputting data into my mysql database

Determine if the same origin policy is in effect

Tips for retrieving all error messages within a script tag using Vee Validate Version 4 in Vue 3

The jQuery application adds new HTML elements to the page and then reveals the code that follows

Using CSS3 keyframe animations to stop and remain on the final frame

Unique text: "Custom sorting of JavaScript objects in AngularJS using a special JavaScript order

Retrieve JSON data within an HTML element, where the element is sourced from an AJAX GET response

Guide on extracting a particular segment of JSON data and converting it to a string

When is it appropriate to utilize a view in EmberJS?

Setting an image using querySelector: A step-by-step guide

The page abruptly jumps to the top whenever I display an ID element

Using Three.js: Cloning Mesh and Material to Easily Toggle Clone Opacity

Error message: Cannot define _menu property on Bootstrap select picker due to Uncaught TypeError

Obtain the value of the submit button that was clicked

Protractor - Chrome is denying access to this webpage when attempting to access it automatically

When attempting to change an image using JavaScript, the image fails to load

Tips on preventing the occurrence of double encoding in raw JSON output from a view

"Implementing a spinning wheel feature using HTML and JavaScript to dynamically add components

Tips for implementing code to function across several images in HTML and CSS