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 Secrets of Online Trading You Should Know

Online trading has brought ease of trading, better security protocols, and fast trade executions; however,…

2 weeks ago

Top Brand Promoter Agency in India | Increase Retail Sales by 40%

Very few brands suffer from a product issue. It's a conversion issue. People enter DMart,…

3 weeks ago

Retail KYC Collection & Verification Services in India | Fast & Compliant

The onboarding process of the retailer, distributor, or partner may soon become problematic if there…

3 weeks ago

All You Need to Know about Low THC Oil Registry Card Georgia

Many of the states in the United States of America allow the use of medical…

4 weeks ago

Easy Ways to Strengthen Online Security and Privacy

Did you know that every time you browse this website or any other, you leave…

4 weeks ago

Play Anytime, Anywhere with GameZone Arcade Games

Online casino has gained immense popularity with the rise of online casinos. Platforms like GameZone…

4 weeks ago