Download a HTML content as pdf using javascript – jsPDF

jsPDF

Using jsPDF library, you can download the div containing graphs, tables, contents as a PDF. This is a HTML5 client-side solution for generating PDFs.

Simply include library in your <head>, generate your PDF using the many built-in functions, then create a button to trigger the download.

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>

Create a object:

var doc = new jsPDF();

Create a elementHandlers:

var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};

Html Code:

<div id="content">
<h3>The quick brown fox jumps over the lazy dog</h3>
<p>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a phrase that contains all of the letters of the alphabet.</p>
</div>
<div id="editor"></div>
<button id="btn">Generate PDF</button>

When click, create PDF:

$('#btn').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-content.pdf');
});

Read Also: Embedding PDFs without JavaScript

Here is the full HTML code:

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<script type="text/javascript">
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};

$(document).ready(function() {
$('#btn').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-content.pdf');
});
});
</script>
</head>
<body>
<div id="content">
<h3>The quick brown fox jumps over the lazy dog</h3>
<p>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a phrase that contains all of the letters of the alphabet.</p>
</div>
<div id="editor"></div>
<button id="btn">Generate PDF</button>
</body>
</html>

Compatibility:

This works on IE6+*, Firefox 3+, Chrome, Safari 3+ and Opera. For IE9 and below, we load a Flash shim called Downloadify which enables the files to be downloaded.

For more information click here.

15 thoughts on “Download a HTML content as pdf using javascript – jsPDF”

  1. Hi,

    only i’m able to convert the text content into a pdf but i’m not able to convert a div containing graphs into a pdf.

  2. I have created pdf, pdf is generated but i have long text, text is not showing on second page of pdf, it is showing second page blank, please help.

Leave a Reply

Your email address will not be published. Required fields are marked *