Angular Datatable to Export data into Excel, CSV, PDF, Print and Copy

I have already shared angular datatable tutorial for multiple datatable into a single page, so now I am extending this angularjs datatable tutorial and adding export features within angular datatable. I will use angular datatable button directive which is based on datatable button library.

I am not creating multiple datatable on this example, I will create a sample datatable listing and add export to excel, copy and print features. You can easily add more export options in this example.

I am assuming you have read my previous tutorial and have table listing. We will include buttons module files and dependency files.You can download or use cdn for that.

Also Checkout other tutorials of angular grid,

• Angularjs Smart Table Example & demo
• Simple Example of Angularjs Datatable
• Example of In-Place Editing using Angular Xeditable
• Best Free Angularjs Grid & Table Plugin Examples

You can get cdn information from Here.

Step 1: Include the all CSS and js dependencies files in the head section of index.html file.

<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<script src="vendor/angular-datatables/dist/plugins/buttons/angular-datatables.buttons.min.js"></script>

Step 2: We will inject datatable buttons module into the angular app in index.html file.

angular.module('TestApp', ['TestApp.controllers','datatables', 'datatables.buttons']);

Step 3: Now we will add a button extension with angularjs datatable instances in index.html file.

.withButtons([
	  {
		  extend:    'copy',
		  text:      ' Copy',
		  titleAttr: 'Copy'
	  },
	  {
		  extend:    'print',
		  text:      ' Print',
		  titleAttr: 'Print'
	  },
	  {
		  extend:    'excel',
		  text:      ' Excel',
		  titleAttr: 'Excel'
	  }
  ]
);

We have added three options to the button module, You can add more options as well as per your need.

Conclusion:

We have added export to excel data of angular datatable and download .xls file.I have also added print and copy option of datatable. Its using flash file for copy operation of datatable data.

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