Excel File Export In Angular Using Service

Haridhass Mani

6y36.3k10100Article

Angular ServiceExcel File Export In Angular

10 Comments

Join the conversation! Your thoughts help the community grow.

Sanjeev Gahlot5y ago
Dear Mani, Found ur articles very useful. They sometimes give instant solutions to problems for which you are searching the whole world. One suggestion for this one - The FileSaver module could have been avoided here by using 'xlsx' method : XLSX.writeFile(workbook, excelFileName + EXCEL_EXTENSION);
Sunanda Rana6y ago
Hi Haridhass ,I am looking into your solution it is quite help full.I need one help if I want export design form with different style so how to do ?You have any example or any idea then can you please share,then it will be very helpfull.
Sundaram Subramanian6y ago
Well written bro
- Haridhass Mani6y ago
  Thanks bro
Logesh Palani6y ago
Great :) Thank you
- Haridhass Mani6y ago
  Thank you Logesh
Sourav Kumar Das6y ago
Useful article.
- Haridhass Mani6y ago
  Thank you Sourav kumar Das
Farhan Ahmed6y ago
Useful article
- Haridhass Mani6y ago
  Thank you Farhan Ahmed

What is Angular?

Angular is a client side JavaScript Framework which allows us to create Reactive client-side applications.

It's a great approach for a Single Page Application.

By default it supports two-way data binding.

Why should we use Services in Angular?

Angular service methods can be invoked from any component of Angular, like Controllers, Directives, etc.

This helps in dividing the web application into small, different logical units which can be reused.

We use the @Injectable class decorators to automatically resolve and inject all the other classes. This only works if each parameter has a TypeScript type associated with it, which the DI framework uses as the token.

What is a dependency?

When module A in an application needs module B to run, then module B is a dependency of module A.

Dependency Injection is a way of architecting an application so code is easier to re-use, easier to test and easier to maintain.

Angular comes with a Dependency Injection (DI) framework of it’s own and it’s used throughout Angular code.

Implement Dependency Injection in Angular

Below are the ways to implement DI in Angular,

Using @Injectable() in the service

Using @NgModules() in the module

Using Providers in the component

Step 1

Create an Angular Project,

The command to create a new Angular project “ng new <myNewApp>”. Let's create an Angular project using the following commands.

Excel File Export In Angular Using Service

Step 2 - Create a Service

Open the above created project in Visual Studio code and create service by using the following command “ng generate service <myService>”.

Step 3

Create a JSON file from any location Ex [assets/yourfilename.json]. Store the array values once JSON is created.

{
"Cardetails": [{
"Id": 1,
"CarName": "Hummer",
"Model": "H3",
"Mileage": "196321",
"Color": "Pink"
}, {
"Id": 2,
"CarName": "Chevrolet",
"Model": "1500 Silverado",
"Mileage": "195310",
"Color": "Blue"
}, {
"Id": 3,
"CarName": "Infiniti",
"Model": "M",
"Mileage": "194846",
"Color": "Puce"
},
}

Step 4

Open the created service and add angular/http service by using the following command npm install @angular/http, using the follwing code.

import {
Http
} from '@angular/http';
export class {
constructor(private http: Http) {}

Step 5

Get the stored JSON file through the service that you have created.

Getdata() {
return this.http.get("assets/Cardetails.json").map(res => {
return res.json()
});
}
}

Step 6

Add the below code in the file app.module.ts

import {
HttpModule
} from '@angular/http'
import {
XlsServiceService
}
rom './xls-service.service'
imports: [
HttpModule
],
providers: [
XlsServiceService
],

Step 7

Add the following code to the file “app.component.ts”

import {
XlsServiceService
} from './xls-service.service'
constructor(private excelservice: XlsServiceService) {}
ngOnInit() {
this.Getdetails()
}
Getdetails() {
this.excelservice.Getdata().subscribe(check => {
this.listdetails = check.Cardetails
});
}

Step 8

Install file-saver and xlsx through the commands “npm install file-saver” and “npm install xlsx”

Now, open the ‘excel.service.ts' and paste the following code.

Step 9

Declare file type and file extesion with the below code.

const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
const EXCEL_EXTENSION = '.xlsx';

Step 10

Code to export JSON in excel file.

public exportAsExcelFile(json: any[], excelFileName: string): void {
const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
console.log('worksheet', worksheet);
const workbook: XLSX.WorkBook = {
Sheets: {
'data': worksheet
},
SheetNames: ['data']
};
const excelBuffer: any = XLSX.write(workbook, {
bookType: 'xlsx',
type: 'array'
});
this.saveAsExcelFile(excelBuffer, excelFileName);
}
private saveAsExcelFile(buffer: any, fileName: string): void {
const data: Blob = new Blob([buffer], {
type: EXCEL_TYPE
});
FileSaver.saveAs(data, fileName + '_export_' + new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds() + EXCEL_EXTENSION);
}

Step 11

Open the file “app.component.html” and paste the following code to see the HTML template

<button(click)="Exportelx()">GenreateXls</button>

Step 12

In HTML page, add a button to call a click function to export an excel file which calls the method in service.

Exportelx() {
this.excelservice.exportAsExcelFile(this.listdetails, "Carinformation")
}

To see the output in browser, use the following command “ng serve --open”

Summary

We learned how to export Excel files in Angular applications.