Today i am going to explain how to export the html table data into pdf using jsPDF.jsPDF plugin is used to convert HTML to PDF.jsPDF is an open-source library for generating PDF files.
Live DemoDownload Script
We need jquery libraya nad plugin files to perform this action.Please copy and Paste below library file.
<script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script>
<script type='text/javascript' src="jspdf.debug.js"></script>
We need jquery libraya nad plugin files to perform this action.Please copy and Paste below library file.
<script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script>
<script type='text/javascript' src="jspdf.debug.js"></script>
Jquery function
<script type='text/javascript'>
function htmltopdf() {
var pdf = new jsPDF('p', 'pt', 'letter');
source = $('#htmlexportPDF')[0]; //table Id
specialElementHandlers = {
'#bypassme': function (element, renderer) {
return true
}
};
margins = { //table margins and width
top: 80,
bottom: 60,
left: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left,
margins.top, {
'width': margins.width,
'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('Download.pdf'); //Filename
}, margins);
}
</script>
function htmltopdf() {
var pdf = new jsPDF('p', 'pt', 'letter');
source = $('#htmlexportPDF')[0]; //table Id
specialElementHandlers = {
'#bypassme': function (element, renderer) {
return true
}
};
margins = { //table margins and width
top: 80,
bottom: 60,
left: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left,
margins.top, {
'width': margins.width,
'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('Download.pdf'); //Filename
}, margins);
}
</script>
HTML
<div id="htmlexportPDF">
<table id="exportPDF" border="1" style="border-collapse: collapse;" class="table table-striped">
<thead>
<tr>
<th>Sno</th>
<th>Programming Languages</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Java</td>
</tr>
</tbody>
</table>
</div>
<button onclick="javascript:htmltopdf();">Export PDF</button>
Please share your comments and feedback.Thanks.Please subscribe my updates via email.<table id="exportPDF" border="1" style="border-collapse: collapse;" class="table table-striped">
<thead>
<tr>
<th>Sno</th>
<th>Programming Languages</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Java</td>
</tr>
</tbody>
</table>
</div>
<button onclick="javascript:htmltopdf();">Export PDF</button>
Useful coding. Thanks. keep it up
ReplyDeletethanks!
ReplyDeletealthough i'm a newbie but i'd like your tut.
amazesoftware.com
ReplyDeleteThanks
how to get table content with border and style. I'm getting plain text
ReplyDeleteHi,, why it didn't work for me..?
ReplyDelete