DO YOU NEED A CONTENT WRITER FOR YOUR BUSINESS?

Your One-Stop Solution for All Content Needs! Click here for more!
jQuery

Download a HTML content as pdf using javascript – jsPDF

Share

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.

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.

View Comments

Recent Posts

5 Reasons to use a professional mortgage broker

When you are looking to apply for a mortgage the one thing that most people…

1 week ago

Tips – Advanced Blackjack Strategy

Once you've memorized basic blackjack strategy, it's time to delve deeper into the game. Advanced…

2 weeks ago

The Modern Practice of Yoga: How Balance, Mindfulness, and Lifestyle Design Are Transforming Everyday Wellbeing

Yoga is no longer just a physical practice. Yoga is popular as a lifestyle practice.…

3 weeks ago

Best Crypto Sign-Up Bonuses in India 2026: Ranked & Compared

Best Crypto Sign-Up Bonuses in India 2026: Ranked & Compared Every exchange claims to have…

3 weeks ago

Coach Bus Companies NYC: A Complete Guide Coach Bus Companies NYC

One of the world's busiest travel hubs, New York City relies heavily on coach bus…

4 weeks ago

The Advantages of Event Marketing

Whether large scale or small scale, many businesses want to market their services or products…

4 weeks ago