Thursday, September 11, 2014

Export HTML table values into PDF using jsPDF

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>

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>

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.

5 comments: