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>
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
}; <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>
$(‘#btn’).click(function () {
doc.fromHTML($(‘#content’).html(), 15, 15, {
‘width’: 170,
‘elementHandlers’: specialElementHandlers
});
doc.save(‘sample-content.pdf’);
});
<!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>
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.
JSON's popularity has risen steadily since its inception nearly 15 years ago. JSON is used…
Every business needs financial foresight to make one of its pillars stronger and to make…
One of the trends in social media marketing is the promotion of services that foster…
The second article illustrates how micro-influencers can be applied more effectively in the promotion process.…
In the end, in the social media battle for eyeballs, the sheer number of followers…
This is not about just the word-of-mouth buzz on influencer marketing. It ranks in the…
View Comments
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.
You can use fpdf to create html content.
Im able to get the content without formating but how to get the CSS applied to it.
code not working in IE 8. Please provide solution for it.
Thanks in advance.
Can you please check out this link:
Image not render here ..what i have to add here for images ??
Did you get the solution, how to render image from html to pdf using this ?
It works. Thanx
Its work...thank you
Welcome :)
Very nice working.
Thanks.
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.
How to customize the size of the Output DIV
We need the size to be 100 (width) x 125(height) cm
Please help, i can convert my div to pdf but textbox value is not included, help me please.
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.
I got only one page ..how can i get more no.of pages