Part 2: Exporting a DataTable into PDF File

We have learned jQuery Datatable with listing, searching and pagination in an earlier datatable tutorial, Now I am extending that jQuery datatables tutorial and adding export jquery datatables data to a PDF file.

jQuery Datatables has many plugins which are very helpful to convert simple HTML tables into features-rich advanced HTML table grid, Here I am extending the previous tutorial code to add export jQuery datatables to pdf.

I used the sample rest service to get JSON data and processed it as jQuery datatables required format, also added searching, pagination, and sorting on the jQuery Datatables listing.

You can also check other tutorials of export table data,

• Exporting a DataTable into PDF File
• Exporting a DataTable to CSV
• DataTables Export to Excel using HTML5

I am using "dom": 'lBfrtip' property with jQuery datatables instance and buttons jQuery datatable plugin to export data in pdf file.

The Buttons extension for DataTables provides three plug-ins that provide overlapping functionality for data export features. The buttons plugin worked on the following functionality,

• HTML5 export buttons – makes use of HTML5 APIs to create files client-side
• Flash export buttons – uses Adobe Flash for legacy browsers
• Print button

jQuery Datatables Export to PDF

Let’s create a simple app to export datatable data into a pdf file. We will create index.html file and added all below steps code into this file.

Step 1: Included all jQuery datatables and jquery files into head section of index.html file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>	
<script type="text/javascript" src="https://cdn.datatables.net/r/dt/jq-2.1.4,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.9,af-2.0.0,b-1.0.3,b-colvis-1.0.3,b-html5-1.0.3,b-print-1.0.3,se-1.0.1/datatables.min.js"></script>

Step 2: Created a HTML layout for datatables grid listing in index.html file.

<table id="listing" class="display" cellspacing="0" width="100%">
  <thead>
   <tr>
     <th>User ID</th>
     <th>Title</th>
     <th>Body</th>
   </tr>
 </thead>     
</table>

Step 3: Fetched data from rest web service and processed data as required for jQuery Datatables.

var arrayReturn = [];
   $.ajax({
           url: "https://jsonplaceholder.typicode.com/posts",
           async: true,
           dataType: 'json',
           success: function (data) {
		for (var i = 0, len = data.length; i < len; i++) {
		     var desc = data[i].body;
		     var title = data[i].title;
		     var id = (data[i].id).toString();
		     arrayReturn.push([id, '<a href="https://google.com" target="_blank">'+title.substring(0, 20)+'</a>', desc.substring(0, 120)]);
		   }
		inittable(arrayReturn);
                }
            });

Step 4: Passed formatted data to jQuery datatables "aaData" properties.

function inittable(data) {	
		//console.log(data);
		$('#listing').DataTable( {
			"aaData": data,
			"dom": 'lBfrtip',
			buttons: [
            {
                extend: 'pdfHtml5',
                text: 'Export Table',
				title: 'js-tutorials.com : Export to datatable data',
				 
				 download: 'open',
				 orientation:'landscape',
				  exportOptions: {
				  columns: ':visible'
				},
				 customize: function(doc) {
				   doc.content.forEach(function(item) {
					/* if (item.table) {
						item.table.widths = [40, '*','*'] 
					 } */
				   })
				 }
            }
        ]
		} );
	}

I used buttons jQuery datatable extension and added pdf export button.

You can download source code and Demo from the below link.