jsPDF generates empty pdf only

Question

I am working with jsPDF to create a PDF from my HTML. However, it always generates an empty page doesn't matter which HTML content I enter as the source.

Here is my code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Save HTML TO PDF</title>



</head>

<body>
        <div><button id="cmd">download as PDF</button></div>

        <div id="content">Hello</div>

        <script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
        <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

        <script type="text/javascript">
            document.getElementById("cmd").addEventListener("click", function () {
                    window.html2canvas = html2canvas;
                    var doc = new jsPDF("p", "pt", "a4");
                    doc.html(document.getElementById("content"), {
                        callback: function(pdf) {
                          pdf.save("cv-a4.pdf");
                        }
                    });
                });

        </script>

</body>

</html>

What am I doing wrong? In my opinion that matches exactly the documentation. However, as stated above, the pdf generated does not show any content and not the "Hello". ( I took some of the code from this StackOverflow question)

@Tanner I got an error before with the "html2canvas" so I added it. Now I can download it but only with empty content — threxx, Sep 17 '19 at 14:06

Makwana Prahlad · Answer 1 · 2019-09-18T12:41:44.500

@threxx

Try this code :

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Save HTML TO PDF</title>
</head>

<body>
        <div><button id="cmd">download as PDF</button></div>

        <div id="content">
            <h1 style="color: brown;">Hello, He/She..</h1>
            <p style="color: green;">How Are you ??</p>
            Thank you.
         </div>

        <script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
        <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

        <script type="text/javascript">
            document.getElementById("cmd").addEventListener("click", function () {

            var doc = new jsPDF("p", "pt", "a4");
            var source = window.document.getElementById('content').innerHTML;
            doc.fromHTML(source, 30, 30);  
            doc.save("cv-a4.pdf");
            });
        </script>
</body>

</html>

I hope above code will be useful for you.

Thank you.

thanks for the input! The problem here is, that I loose all my html styling as you use "text" instead of "html". — threxx, Sep 18 '19 at 07:31
I want to keep the styling like the h1/h2/bold stuff and also the css — threxx, Sep 18 '19 at 12:13

score 0 · Accepted Answer · answered Sep 24 '19 at 15:15

So after doing some more research I found this answer which will return a PDF from the HTML. Small problem: still only very poor CSS styles but afaik jspdf doesn't support custom CSS.

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

<script type="text/javascript">
    document.getElementById("cmd").addEventListener("click", function () {

        var doc = new jsPDF("p", "pt", "a4");
        var source = document.body;
        var margin = {
            top: 20,
            left: 20,
            right: 20,
            bottom: 20
        };
        doc.fromHTML(source, 30, 30, {
            'width': 80, // max width of content on PDF
        },
        function(pdf){doc.save('saveInCallback.pdf');},
        margin
        );

    });
</script>

jsPDF generates empty pdf only

2 Answers2