How to Export Data to Excel File in Angular Application

    May 25, 2020       by Pankaj Kumar
export-excel-angular-app.jpg

While working with the web applications, We often need to export data into pdf, excel, JSON, etc for generating invoices, reports and other analytical data to the user. I have already posted an article to generate PDF file in Angular Application

In this article, We will see how to export data in Angular application.

 

Let's Get Started

I assume you are familiar with Angular with Nodejs and Angular CLI installed into your system. Here, We will understand with creating a basic demo application

 

Step 1: Create an Angular app using Angular CLI

Run below command to create a new Angular application.

ng new angular-app

 

Once the new application created successfully, /now move to the project folder with the command cd ./angular-app

Step 2: Installed needed packages

In the required task, we need to install xlsx  npm module. Install it after typing below command over the terminal.

npm i xlsx --save

 

Step 3: Create a Dummy list of users

Here we will use a dummy list of users, In the real scenario, data will be fetched from the server.

Add below code in app.component.ts file.

userList = [

{

"id": 1,

"name": "Leanne Graham",

"username": "Bret",

"email": "Sincere@april.biz"

},

{

"id": 2,

"name": "Ervin Howell",

"username": "Antonette",

"email": "Shanna@melissa.tv"

},

{

"id": 3,

"name": "Clementine Bauch",

"username": "Samantha",

"email": "Nathan@yesenia.net"

},

{

"id": 4,

"name": "Patricia Lebsack",

"username": "Karianne",

"email": "Julianne.OConner@kory.org"

},

{

"id": 5,

"name": "Chelsey Dietrich",

"username": "Kamren",

"email": "Lucio_Hettinger@annie.ca"

}

]

 

Step 4: Update listing with the export button

Now we will update the template part. Put below code in app.component.html file with below code.

 

 
<div style=" margin: auto; width: 50%;">
  <button (click)="exportexcel()">Export to Excel</button>
 
  <table id="excel-table">
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Username</th>
      <th>Email</th>
    </tr>
    <tr *ngFor="let item of userList">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.username}}</td>
      <td>{{item.email}}</td>
    </tr>
  </table>
</div>
 

 

Step 5: Add method in app.component.ts file to export excel file

 
import { Component } from '@angular/core';
import * as XLSX from 'xlsx';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-app';
  fileName= 'ExcelSheet.xlsx';
  userList = [
  {
  .....
  .....
  }
  ]
  exportexcel(): void
  {
    /* pass here the table id */
    let element = document.getElementById('excel-table');
    const ws: XLSX.WorkSheet =XLSX.utils.table_to_sheet(element);
 
    /* generate workbook and add the worksheet */
    const wb: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
 
    /* save to file */  
    XLSX.writeFile(wb, this.fileName);
 
  }
}
 

 

Step 6: Run the App

Finally, we are done with all the needed step, Run the app with below command over the terminal

npm start

 

Conclusion

In this article, We learn about the export of excel file in Angular application

I hope this article helped you to get in-depth knowledge about the topic. You can also find other demos/articles at Angular Sample Projects here to start working on enterprise-level applications.

Let me know your thoughts over email at pankaj.itdeveloper@gmail.com. I would love to hear them and If you like this article, share it with your friends.

Thank You!

You can download complete code from here. Download Code

angular exportexcel

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch

Find other similar Articles here:

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch
CATEGORIES
INTERVIEW QUESTIONS