Export Excel File using ExcelJS in Angular Service

Satheesh Elumalai

6y38.8k11100Article

Exceljs Export ExcelExceljs in AngularExport Excel in Angular

11 Comments

Join the conversation! Your thoughts help the community grow.

vairam Tamilpandian3y ago
Exceljs lib is able to support in asp.net mvc using angular applications? please anyone know help me
Josephs4y ago
Your code not working properly. where is this providerlist collection in ts file ?
Rakshith5y ago
How to export Date object in d/m/yyyy format to excel sheet from angular using exceljs? When I tried exporting in d/m/yyyy format, it is getting converted to string and storing in excel. I want it to be stored as date field only on excel.
Shanaya Saini5y ago
Where you mentioned exportAsExcelFile this method ?
ajith muthukumar5y ago
Where you mentioned exportAsExcelFile this methode
shrinath shinde6y ago
How do I add header and footer section which can be only seen during printing in excel sheet using angular 8?
- Satheesh Elumalai6y ago
  Hi Shrinath, Please check(Step 3) excel.service.ts we are mentioned header section. like the same to add footer as well....
sathis kumar6y ago
Can you share which version of angular and exceljs is used.
- Satheesh Elumalai6y ago
  I'm used exceljs version 1.12.0 and angular 5.2.0
Haridhass Mani6y ago
Nice article bro ;)
- Satheesh Elumalai6y ago
  Thanks.................

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.

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.

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.