Export Excel File using ExcelJS in Angular Service

Introduction

 
Let’s explore exporting an Excel file using Exceljs using Angular service. Basically, there are two open-source libraries available to read/write an Excel in client-side applications include
  • ExcelJS
  • XLSX and XLSX-Style
But in this article, we will explore using ExcelJs. So, what is ExcelJS?. ExcelJS in typescript helps us to create, read/write and modify workbook styles in an Excel sheet, since it provides almost all the features compared with XLSX and XLSX-Style. I have provided the steps to export the Excel file in Angular service using ExcelJS. Now let’s get started.
 
Step 1
 
First, let’s create a new angular project using Angular CLI with the command below:
 
ng new angular-excel
cd angular-excel
 
Step 2
 
After creating a new Angular project, let’s add the below command to fetch references for external ExcelJS and file-saver dependencies
 
npm install @exceljs
npm install @file-saver
 
Step 3
 
The next step is to create a “services” directory/folder under “src”.
 
Create an excel.service.ts file using the below command:
 
ng g service excel
 
Now replace the below code in an excel.service.ts file
  1. import {  
  2.     Injectable  
  3. } from '@angular/core';  
  4. import {  
  5.     Workbook  
  6. } from 'exceljs';  
  7. import {  
  8.     DatePipe  
  9. } from '@angular/common';  
  10. import * as fs from 'file-saver';  
  11. import * as moment from 'moment'  
  12. @Injectable()  
  13. export class ExcelService {  
  14.     constructor(private datePipe: DatePipe) {}  
  15.     async generateExcel(data, authfilter) {  
  16.         const header = ['User Name''Email''Phone Number''Address'];  
  17.         // Create workbook and worksheet  
  18.         const workbook = new Workbook();  
  19.         const worksheet = workbook.addWorksheet();  
  20.         // Cell Style : Fill and Header  
  21.         var TodayDate = new Date();  
  22.         let MMDDYY = moment(TodayDate).format('MMDDYY').toString();  
  23.         var FileName = "ExportuserData" + MMDDYY;  
  24.         const headerRow = worksheet.addRow(header);  
  25.         headerRow.eachCell((cell, number) => {  
  26.             cell.fill = {  
  27.                 type: 'pattern',  
  28.                 pattern: 'solid',  
  29.                 fgColor: {  
  30.                     argb: 'FFFFFFFF'  
  31.                 },  
  32.                 bgColor: {  
  33.                     argb: 'FFFFFFFF'  
  34.                 },  
  35.             };  
  36.             cell.font = {  
  37.                 color: {  
  38.                     argb: '00000000',  
  39.                 },  
  40.                 bold: true  
  41.             }  
  42.             cell.border = {  
  43.                 top: {  
  44.                     style: 'thin'  
  45.                 },  
  46.                 left: {  
  47.                     style: 'thin'  
  48.                 },  
  49.                 bottom: {  
  50.                     style: 'thin'  
  51.                 },  
  52.                 right: {  
  53.                     style: 'thin'  
  54.                 }  
  55.             };  
  56.         });  
  57.         data.forEach(d => {  
  58.             const row = worksheet.addRow(d);  
  59.             row.fill = {  
  60.                 type: 'pattern',  
  61.                 pattern: 'solid',  
  62.                 fgColor: {  
  63.                     argb: 'FFFFFFFF'  
  64.                 }  
  65.             };  
  66.             row.font = {  
  67.                 color: {  
  68.                     argb: '00000000',  
  69.                 },  
  70.                 bold: false  
  71.             }  
  72.             row.eachCell((cell, number) => {  
  73.                 cell.border = {  
  74.                     top: {  
  75.                         style: 'thin'  
  76.                     },  
  77.                     left: {  
  78.                         style: 'thin'  
  79.                     },  
  80.                     bottom: {  
  81.                         style: 'thin'  
  82.                     },  
  83.                     right: {  
  84.                         style: 'thin'  
  85.                     }  
  86.                 };  
  87.             });  
  88.         });  
  89.         worksheet.getColumn(1).width = 30;  
  90.         worksheet.getColumn(2).width = 40;  
  91.         worksheet.getColumn(3).width = 20;  
  92.         worksheet.getColumn(4).width = 20;  
  93.         workbook.xlsx.writeBuffer().then((data: any) => {  
  94.             const blob = new Blob([data], {  
  95.                 type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'  
  96.             });  
  97.             fs.saveAs(blob, FileName + '.xlsx');  
  98.         });  
  99.     }  
  100. }  
Step 4
 
The next step is to add an excel.component.ts and excel.component.html file to the project and create a selector tag like <app-excel> and paste the below code to your excel.component.ts file.
  1. export class AppComponent {  
  2.     ExportuserList: any = [{  
  3.         username: 'Satheesh Elumalai',  
  4.         email: 'satheesh123@gmail.com',  
  5.         phone: '1122334455',  
  6.         address: 1000  
  7.     }, {  
  8.         username: 'Smith',  
  9.         email: 'smith123@gmail.com',  
  10.         phone: '1122334455',  
  11.         address: 1000  
  12.     }, {  
  13.         username: 'Steve',  
  14.         email: 'steve123@gmail.com',  
  15.         phone: '1122334455',  
  16.         address: 1000  
  17.     }, {  
  18.         username: 'Wilson',  
  19.         email: 'wilson@gmail.com',  
  20.         phone: '1122334455',  
  21.         address: 1000  
  22.     }];  
  23.     constructor(private excelService: ExcelService) {}  
  24.     ClickExport(): void {  
  25.         this.excelService.exportAsExcelFile(this.ExportuserList);  
  26.     }  
  27. }  
Step 5
 
Now open the app.component.html and replace the code below:
  1. <table>  
  2.     <tr>  
  3.         <th>#</th>  
  4.         <th id="th_green">User Name</th>  
  5.         <th>Email</th>  
  6.         <th>Phone Number</th>  
  7.         <th>Address</th>  
  8.     </tr>  
  9.     <tr *ngFor="let data of providerlist; let i = index">  
  10.         <td class="td_blue">{{i+1}}</td>  
  11.         <td>{{data?.username}}</td>  
  12.         <td>{{data?.email}}</td>  
  13.         <td>{{data?.address1 }}</td>  
  14.         <td>{{data?.phone}}</td>  
  15.     </tr>  
  16. </table>  
Step 6
 
Now execute the following command ng serve –o.
 
The project will open in the default browser. Please refer to the below screenshot.
 
Export Excel File Using ExcelJS In Angular Service
Step 7
 
Now click the “Generate Export Excel” button to download an Excel file and then open the downloaded excel file and so that the data will be displayed in table format.
 
Export Excel File Using ExcelJS In Angular Service
 
Export Excel File Using ExcelJS In Angular Service
 
As you can see, we have exported the excel file using ExcelJS by using the Angular Service.  I hope this article will be useful to you. Comment below if you have any queries. Thanks for reading, have a nice day.