30

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

 3 years ago
source link: https://www.js-tutorials.com/angularjs-tutorial/angular-datatable-export-data-excel-csv-pdf-print-copy/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

I have already shared angular datatable tutorial for multiple datatable into 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.

export-angularjs-datatable

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,

You can get cdn information from Here.

Step 1: Include all css and js dependencies files into 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 angular app in index.html file.

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

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

.withButtons([
  extend:    'copy',
  text:      '<i class="fa fa-files-o"></i> Copy',
  titleAttr: 'Copy'
  extend:    'print',
  text:      '<i class="fa fa-print" aria-hidden="true"></i> Print',
  titleAttr: 'Print'
  extend:    'excel',
  text:      '<i class="fa fa-file-text-o"></i> Excel',
  titleAttr: 'Excel'

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

You can download source code and Demo from below link.

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.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK