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!
This article is originally posted over jsonworld
Top comments (0)