Simplest way to export table Data in Pdf, Excel using Jquery plugin


There is loot of tool to export data in the pdf and excel but in certain projects we might have very urgent need to export data so in this case we use Data tables jquery plugin. 

First include this js files and css files.

<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.1.2/js/buttons.flash.min.js"></script>

<script src="//cdn.datatables.net/buttons/1.1.2/js/buttons.flash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="//cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.1.2/js/buttons.print.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">

Suppose this is your table

<table class="table table-boxed table-bordered text-center" id="dataTable">
 <thead>
   <tr>

    <td><strong style="color:#000">Name</strong></td>
   <td><strong style="color:#000">Email</strong></td>
  
  </tr>
</thead>
<tbody>
<tr>
<td>Mohan</td>
<td>Mohan@mailinator.com</td>
</tr>
</tbody>
</table>


And this is the javascript code:

$(document).ready(function() {
    $('#dataTable').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'csv', 'excel', 'pdf'
        ]
    } );
} );

Comments