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

import {
    Injectable
} from '@angular/core';
import {
    Workbook
} from 'exceljs';
import {
    DatePipe
} from '@angular/common';
import * as fs from 'file-saver';
import * as moment from 'moment'
@Injectable()
export class ExcelService {
    constructor(private datePipe: DatePipe) {}
    async generateExcel(data, authfilter) {
        const header = ['User Name', 'Email', 'Phone Number', 'Address'];
        // Create workbook and worksheet
        const workbook = new Workbook();
        const worksheet = workbook.addWorksheet();
        // Cell Style : Fill and Header
        var TodayDate = new Date();
        let MMDDYY = moment(TodayDate).format('MMDDYY').toString();
        var FileName = "ExportuserData" + MMDDYY;
        const headerRow = worksheet.addRow(header);
        headerRow.eachCell((cell, number) => {
            cell.fill = {
                type: 'pattern',
                pattern: 'solid',
                fgColor: {
                    argb: 'FFFFFFFF'
                },
                bgColor: {
                    argb: 'FFFFFFFF'
                },
            };
            cell.font = {
                color: {
                    argb: '00000000',
                },
                bold: true
            }
            cell.border = {
                top: {
                    style: 'thin'
                },
                left: {
                    style: 'thin'
                },
                bottom: {
                    style: 'thin'
                },
                right: {
                    style: 'thin'
                }
            };
        });
        data.forEach(d => {
            const row = worksheet.addRow(d);
            row.fill = {
                type: 'pattern',
                pattern: 'solid',
                fgColor: {
                    argb: 'FFFFFFFF'
                }
            };
            row.font = {
                color: {
                    argb: '00000000',
                },
                bold: false
            }
            row.eachCell((cell, number) => {
                cell.border = {
                    top: {
                        style: 'thin'
                    },
                    left: {
                        style: 'thin'
                    },
                    bottom: {
                        style: 'thin'
                    },
                    right: {
                        style: 'thin'
                    }
                };
            });
        });
        worksheet.getColumn(1).width = 30;
        worksheet.getColumn(2).width = 40;
        worksheet.getColumn(3).width = 20;
        worksheet.getColumn(4).width = 20;
        workbook.xlsx.writeBuffer().then((data: any) => {
            const blob = new Blob([data], {
                type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            });
            fs.saveAs(blob, FileName + '.xlsx');
        });
    }
}

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.

export class AppComponent {
    ExportuserList: any = [{
        username: 'Satheesh Elumalai',
        email: '[email protected]',
        phone: '1122334455',
        address: 1000
    }, {
        username: 'Smith',
        email: '[email protected]',
        phone: '1122334455',
        address: 1000
    }, {
        username: 'Steve',
        email: '[email protected]',
        phone: '1122334455',
        address: 1000
    }, {
        username: 'Wilson',
        email: '[email protected]',
        phone: '1122334455',
        address: 1000
    }];
    constructor(private excelService: ExcelService) {}
    ClickExport(): void {
        this.excelService.exportAsExcelFile(this.ExportuserList);
    }
}

Step 5

 

Now open the app.component.html and replace the code below:

<table>
    <tr>
        <th>#</th>
        <th id="th_green">User Name</th>
        <th>Email</th>
        <th>Phone Number</th>
        <th>Address</th>
    </tr>
    <tr *ngFor="let data of providerlist; let i = index">
        <td class="td_blue">{{i+1}}</td>
        <td>{{data?.username}}</td>
        <td>{{data?.email}}</td>
        <td>{{data?.address1 }}</td>
        <td>{{data?.phone}}</td>
    </tr>
</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.

 

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.

 

 

 

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.