jQuery dataTable export to excel on the button in Angular; For that, simply install jQuery dataTable and buttons module in angular 17, 16 application to print, copy, and export Excel, Pdf, or CSV file with the button.
How to Add jQuery DataTables Button Print, Export to CSV, Excel, PDF in Angular 17, 16 Applications?
Steps to create a button for print, copy, and export CSV, PDF, Excel data using jQuery dataTables in angular 16 apps; are as follows:
Step 1 – Create New Angular App
If you haven’t already, you’ll need to install Angular CLI to create a new Angular project. Open your terminal or cmd and run the following commands:
ng new my-new-app --no-standalone
Step 2 – Install and Configure DataTables.net
Once you have created angular project into your system. Next, you need to install DataTables.net and its dependencies using npm.
npm install jquery --save npm install datatables.net --save npm install datatables.net-dt --save npm install angular-datatables --save npm install @types/jquery --save-dev npm install @types/datatables.net --save-dev npm install ngx-bootstrap bootstrap --save npm install datatables.net-buttons --save npm install datatables.net-buttons-dt --save npm install @types/datatables.net-buttons --save-dev npm install jszip --save
After that, open the angular.json file and update the following code in it:
"styles": [
"src/styles.css",
"node_modules/datatables.net-dt/css/jquery.dataTables.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js",
"node_modules/bootstrap/dist/js/bootstrap.js",
"node_modules/jszip/dist/jszip.js",
"node_modules/datatables.net-buttons/js/dataTables.buttons.js",
"node_modules/datatables.net-buttons/js/buttons.colVis.js",
"node_modules/datatables.net-buttons/js/buttons.flash.js",
"node_modules/datatables.net-buttons/js/buttons.html5.js",
"node_modules/datatables.net-buttons/js/buttons.print.js"
]
Step 3 – Import Modules in Module.ts File
Next, visit to src/app directory and open app.module.ts file. Then add the following code to it:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {DataTablesModule} from 'angular-datatables';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DataTablesModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 4 – Create HTML Table on View File
Then, create table to display dynamic data in angular apps. So, visit src/app/app.component.html and update the following code into it:
<table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Website</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let group of data">
<td>{{group.name}}</td>
<td>{{group.email}}</td>
<td>{{group.website}}</td>
</tr>
</tbody>
</table>
Step 5 – Add Print and Export Functionality
In order to add print and export functionality, we need to include the DataTables.net Buttons extension. Update the app.component.ts file as follows:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public data = [
{name: 'test', email: '[email protected]', website:'test.com'},
{name: 'test', email: '[email protected]', website:'test.com'},
{name: 'test', email: '[email protected]', website:'test.com'},
{name: 'test', email: '[email protected]', website:'test.com'},
];
title = 'angulardatatables';
dtOptions: any = {};
ngOnInit() {
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 3,
processing: true,
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'print'
]
};
}
}
Step 6 – Run the Application
Finally, run the following command on the terminal or cmd to start angular app:
ng serve
Visit http://localhost:4200 in your web browser to see the DataTable with print and export functionality.
Conclusion
That’s it; You learned how to print, copy, pdf and export excel or CSV file in angular apps using dataTables.
