How to Export Data to Excel File in Angular Application
Published: 2023-08-17 10:37:08

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](https://jsonworld.com/demo/how-to-export-data-to-excel-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](https://jsonworld.com/demo/how-to-export-data-to-excel-file-in-angular-application) 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!

This article is originally posted over [jsonworld](jsonworld.com)