Export Data In Excel Sheet Using Angular

 In this article, we will learn how we export a data sheet in Excel using Angular. In this demo, we will use Xlsx library to export data in an Excel sheet.

 

Steps required to export data in an Excel:

Step 1

Create an Angular project by using the following command.

 

ng new ExcelImport

 

 

Step 2

 

Open the newly created project in Visual Studio Code and open the terminal. Add the following command to add Xlsx library.

 

npm install xlsx --save 

 

Step 3

 

Add the following command to add Bootstrap in this project

 

npm install --save Bootstrap 

 

Step 4

 

Now open styles.css file and add Bootstrap file reference. We can also add Bootstrap file reference into angular.json file. 

To add reference in styles.css file import this line,

@import '~bootstrap/dist/css/bootstrap.min.css';

 

Step 5

 

Now Open app.component.ts file and import xlsx library

1. import * as XLSX from 'xlsx';  

Now, add the following lines in app.component.ts file

1. import { Component, ElementRef, ViewChild } from '@angular/core';  
2. import * as XLSX from 'xlsx';  
3. @Component({  
4.   selector: 'app-root',  
5.   templateUrl: './app.component.html',  
6.   styleUrls: ['./app.component.css']  
7. })  
8. export class AppComponent {  
9.   @ViewChild('TABLE', { static: false }) TABLE: ElementRef;  
10.   title = 'Excel';  
11.   ExportTOExcel() {  
12.     const ws: XLSX.WorkSheet = XLSX.utils.table_to_sheet(this.TABLE.nativeElement);  
13.     const wb: XLSX.WorkBook = XLSX.utils.book_new();  
14.     XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');  
15.     XLSX.writeFile(wb, 'ScoreSheet.xlsx');  
16.   }  
17.   team: any = [{  
18.     Sno: 1,  
19.     Team: 'India',  
20.     Match: 8,  
21.     Win: 7,  
22.     Loss: 0,  
23.     Cancel: 1,  
24.     Point: 15  
25.   
26.   }, {  
27.     Sno: 2,  
28.     Team: 'NewZeland',  
29.     Match: 8,  
30.     Win: 6,  
31.     Loss: 1,  
32.     Cancel: 1,  
33.     Point: 13  
34.   
35.   },  
36.   {  
37.     Sno: '3',  
38.     Team: 'Aus',  
39.     Match: 8,  
40.     Win: 6,  
41.     Loss: 1,  
42.     Cancel: 1,  
43.     Point: 13  
44.   
45.   },  
46.   {  
47.     Sno: '4',  
48.     Team: 'England',  
49.     Match: 8,  
50.     Win: 5,  
51.     Loss: 2,  
52.     Cancel: 1,  
53.     Point: 11  
54.   },  
55.   {  
56.     Sno: '5',  
57.     Team: 'S.Africa',  
58.     Match: 8,  
59.     Win: 4,  
60.     Loss: 3,  
61.     Cancel: 1,  
62.     Point: 9  
63.   },  
64.   {  
65.     Sno: '6',  
66.     Team: 'Pak',  
67.     Match: 8,  
68.     Win: 4,  
69.     Loss: 4,  
70.     Cancel: 1,  
71.     Point: 9  
72.   
73.   },  
74.   {  
75.     Sno: '7',  
76.     Team: 'SriLanka',  
77.     Match: 8,  
78.     Win: 3,  
79.     Loss: 3,  
80.     Cancel: 2,  
81.     Point: 8  
82.   
83.   },  
84.   {  
85.     Sno: '8',  
86.     Team: 'Bdesh',  
87.     Match: 8,  
88.     Win: 2,  
89.     Loss: 4,  
90.     Cancel: 2,  
91.     Point: 6  
92.   
93.   }  
94.   ];  
95. }  

Now open app.compoenet.html file and add the following html.

1. <div class="col-lg-12 table-responsive" #TABLE #table>  
2.   <div style="padding-bottom: 10px;padding-top: 10px;">  
3.     <div class="row">  
4.       <div class="col-sm-12">  
5.         <button (click)="ExportTOExcel()" class="btn btn-success">ExportTOExcel</button> </div>  
6.     </div>  
7.   </div>  
8.   <table class="table table-bordered">  
9.     <thead class="thead-dark">  
10.       <tr>  
11.         <th>S.No</th>  
12.         <th>Team</th>  
13.         <th>Match</th>  
14.         <th>Win</th>  
15.         <th>Loss</th>  
16.         <th>Cancel</th>  
17.         <th>Point</th>  
18.       </tr>  
19.     </thead>  
20.     <tbody>  
21.       <tr *ngFor="let tm of team">  
22.         <td>{{tm.Sno}}</td>  
23.         <td>{{tm.Team}}</td>  
24.         <td>{{tm.Match}}</td>  
25.         <td>{{tm.Win}}</td>  
26.         <td>{{tm.Loss}}</td>  
27.         <td>{{tm.Cancel}}</td>  
28.         <td>{{tm.Point}}</td>  
29.       </tr>  
30.     </tbody>  
31.   </table>  
32. </div>  

Now run the project:

 

 

Click on the Button and check Excel is created

 

 

Summary

 

In this article we learned how we create Export data in an Excel sheet using Angular.

That The Mind Is A Restless Bird; The More It Gets The More It Wants

 We Notice That The Mind Is A Restless Bird; The More It Gets The More It Wants, And Still Remains Unsatisfied. The More We Indulge Our Passions The More Unbridled They Become. Our Ancestors, Therefore, Set A Limit To Our Indulgences. They Saw That Happiness Was Largely A Mental Condition. A Man Is Not Necessarily Happy Because He Is Rich, Or Unhappy Because He Is Poor ... Millions Will Always Remain Poor. ~Author: Mahatma Gandhi

हम देखते हैं कि मन एक बेचैन पक्षी है; जितना अधिक वह चाहता है उतना ही अधिक प्राप्त करता है, और फिर भी असंतुष्ट रहता है। जितना अधिक हम अपने जुनून को पूरा करते हैं, वे उतने ही बेलगाम होते जाते हैं। इसलिए हमारे पूर्वज हमारे कर्मों की सीमा निर्धारित करते हैं। उन्होंने देखा कि खुशी काफी हद तक एक मानसिक स्थिति थी। एक आदमी जरूरी इसलिए खुश नहीं है क्योंकि वह अमीर है, या दुखी है क्योंकि वह गरीब है ... लाखों हमेशा गरीब रहेंगे। ~लेखक: महात्मा गांधी