Download a HTML content as pdf using javascript

Table of Contents

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.

Create a object:

var doc = new jsPDF();

Create a elementHandlers:

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

Html Code:

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

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

Jacob Frazier

Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.

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

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.

Namaste UI says:
December 22, 2015 at 6:13 pm
You can use fpdf to create html content.
Reply
1. Nani says:
  June 22, 2017 at 11:10 am
  Im able to get the content without formating but how to get the CSS applied to it.
  Reply