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’);

});

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>

<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.

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

  1. 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.

  2. Hi,

    web page is generated but not the entire page.. only the content which appears in current window is converted to pdf. Please help me on this.

Leave a Reply

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