Angular 17, 16 DataTables Print, Export to CSV, Excel, PDF Data Tutorial

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.

Recommended Angular Tutorials

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *