Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
I imported jsPDF library and tried to export to PDF but I am getting JavaScript error jsPDF is not defined.
I tried other similar posts and it didn't work for me.
I got the fiddle here
https://jsfiddle.net/aybhvf8e/1/
<script type="text/javascript" src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
$( document ).ready(function() {
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
$('#cmd').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
doc.save('sample-file.pdf');
<div id="content">
<h3>Hello, this is a H3 tag</h3>
<p>A paragraph</p>
<div id="editor"></div>
<button id="cmd">generate PDF</button>
I think your code seems correct but some issue with cdn. I have used debug one here.
Here is one working example I created which you can refer. If you don't see pdf downloading due to stackoverflow restriction, use this fiddle to test.
Working Download PDF demo
The cdn link I used is : JsPDF CDN LINK . You can definitely look for any other versions available.
function createPdf() {
var doc = new jsPDF();
source = $('#content')[0];
specialElementHandlers = {
'#editor': function (element, renderer) {
return true
doc.fromHTML(
source,
'width': 170,
'elementHandlers': specialElementHandlers
doc.save('sample-file.pdf')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
<h3>Hello, this is a H3 tag</h3>
<p>A paragraph</p>
<div id="editor"></div>
<button onclick="javascript:createPdf()" id="cmd">generate PDF</button>
I found two main issues, solved in this fork. First, you did not link to jspdf
. You can do that in the html code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
Second, you add the click
event listener outside the ready()
function. This, in turn, causes two problems: the event may not be attached (make sure you check the reason for the ready()
function) and the variables that you define in the ready()
function are not available (get out of scope) in the click
function. You can fix both problems by setting the click
listener inside the ready
listener:
$( document ).ready(function() {
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
$('#cmd').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
doc.save('sample-file.pdf');
VQR ..... one question, my app works some times on places without network, so the next line won't be work without network , correct?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
So, I installed it ...
npm install jspdf --save
But now, what files have I to copy to my Js carpet to works the line ?
var doc = new jsPDF();
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.