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
Export Data In Excel Sheet Using Angular
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
  26. }, {
  27. Sno: 2,
  28. Team: 'NewZeland',
  29. Match: 8,
  30. Win: 6,
  31. Loss: 1,
  32. Cancel: 1,
  33. Point: 13
  35. },
  36. {
  37. Sno: '3',
  38. Team: 'Aus',
  39. Match: 8,
  40. Win: 6,
  41. Loss: 1,
  42. Cancel: 1,
  43. Point: 13
  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
  73. },
  74. {
  75. Sno: '7',
  76. Team: 'SriLanka',
  77. Match: 8,
  78. Win: 3,
  79. Loss: 3,
  80. Cancel: 2,
  81. Point: 8
  83. },
  84. {
  85. Sno: '8',
  86. Team: 'Bdesh',
  87. Match: 8,
  88. Win: 2,
  89. Loss: 4,
  90. Cancel: 2,
  91. Point: 6
  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:
Export Data In Excel Sheet Using Angular
Click on the Button and check Excel is created
Export Data In Excel Sheet Using Angular

Summary

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