How to add save as pdf excel and copy buttons in data tables

Data tables have enhanced features whereby you can add buttons to perform a function which you intend to achieve, for example, save as pdf. The feature is freely given in the data table extension which makes it easier for developers and users without using other third-party plugins to achieve the purpose. In a previous article we discussed how to add data tables to a website you can follow the article to familiarize yourself with data tables

In this article, we shall focus on how to add save data as pdf, excel and copy data buttons that are provided by data tables. Mostly when we want to save data as pdf, we have to create the whole functionality of how we want the pdf document to appear and then connect it with third party plugins like mpdf, fpdf and pdfcrowd which assist in creating the pdf but this functionality can be achieved while using data tables.

To begin adding the save as pdf, excel and copy buttons in data tables, you must ensure first that data tables are working. Since data tables are part of jQuery JavaScript, you need to ensure that jQuery files are added


<head>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
</head>

Then to initialize data table, use the table id as follows


<script>
$(document).ready( function () {
$('#table_id').DataTable();
} );
</script>

To add the save as pdf, excel and copy buttons you need to add the following files that support buttons in data tables


<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>

Next, you will need to add the buttons you want to display inside the data tables function as follows


<script>
    $(function() {
   $('#table_id').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'excelHtml5',
            'pdfHtml5',
            'copyHtml5'
        ]
    } );
});
</script>

The full html code snippet is as shown below


<html>
<head>
<link rel="stylesheet" type="text/css" href="https://www.solutionspacenet.com/assets/vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css">
</head>
<body>
<table class="table table-bordered" id="table_id">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
  <tr>
<td>row1data1</td>
<td> row1data2</td>
<td> row1data3</td>
</tr>
<tr>
<td> row2data1</td>
<td> row2data2</td>
<td> row2data3</td>
</tr>
<tr>
<td> row3data1</td>
<td> row3data2</td>
<td> row3data3</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://www.solutionspacenet.com/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
<script>
    $(function() {
   $('#table_id').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'excelHtml5',
            'pdfHtml5',
            'copyHtml5'
        ]
    } );
});
</script>
</body>
</html>