jsPDF is not defined error in html project?

Question

I am implementing jsPdf example and have sample html project in which i included jquery and jspdf cdn link to generate pdf. Here is my code

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script> src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"</script>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>

<body>
    <div id="content">
        <p>Testing testing testing</p>
    </div>
    <button type="button" id="export">Export To Pdf</button>
    <script>
        var doc = new jsPDF();
        $('#export').click(function () {
            doc.fromHTML($('#content').html(), 15, 15, {
                'width': 170
            });
            doc.save('sample-file.pdf');
        });
    </script>
</body>

</html>

But it is giving this error

Uncaught ReferenceError: jsPDF is not defined
at index.html:19

What's wrong in my code?

When importing a script, it will export the variable/reference you may use to work with (i.e. jsPDF). Make sure it's imported correctly and keep note of script loading via head and body. I would recommend usage of webpack or requirejs to avoid cluttering of the global namespace. — Koshux, Jan 03 '19 at 13:34

ellipsis · Accepted Answer · 2019-01-03T10:16:28.347

3

The error is in this line-

<script> src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"</script>

src should be inside the script tag

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>

For exporting and rendering

$('#export').click(() => {
    var pdf = new jsPDF('p','pt','a4');
    pdf.addHTML(document.body,function() {
        pdf.save('web.pdf');
    });
})

edited Jan 03 '19 at 10:16

answered Jan 03 '19 at 10:00

ellipsis

12,049
2
17
33

Thanx i fixed it. How can i export html with complete styling? I am using bootstrap also – Fahad Subzwari Jan 03 '19 at 10:11
I have a full page with a "Modal" and other elements alos. And i want to export Modal only with complete styling so just i have to specify .addHtml function instead of fromHtml? I have googled it and i found that i also have to use Html2Canvas plugin also along with jspdf? – Fahad Subzwari Jan 03 '19 at 10:19
can you show me any small example of exporting bootstrap content to pdf? – Fahad Subzwari Jan 03 '19 at 10:20
i have tried. It is giving this error `Uncaught (in promise) Proxy must be used when rendering url` – Fahad Subzwari Jan 03 '19 at 10:23
Finally!! Thanks bro – Danyl Jun 06 '21 at 22:19

score 0 · Answer 2 · answered Jan 03 '19 at 10:00

0

fix your script tag of https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js to

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>

answered Jan 03 '19 at 10:00

Mohit Patil

436
1
5
15

thanx, but now i am using this in another project but now it is giving an error "Uncaught TypeError: Cannot read property '#' of undefined" – Fahad Subzwari Jan 03 '19 at 10:03
i tested the code it's working fine. may be there is issue in your other project. – Mohit Patil Jan 03 '19 at 10:09
how can i export with propert styling of actual Html? – Fahad Subzwari Jan 03 '19 at 10:10
it's another question – Mohit Patil Jan 03 '19 at 10:40

jsPDF is not defined error in html project?

2 Answers2