Excel File Export In Angular Using Service

What is Angular?

  • Angular is a Client side JavaScript Framework which allows us to create Reactive Client-side Application.
  • Angular provides an approach to create a Single Page Application. By default, it supports Two-way Data binding.

Why should we have uses of 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 dependent to module A i.e. module B is a dependency of module A.   

  • Dependency Injection is a way of architecting an application which makes the code to re-use, easier to test and easier to maintain.
  • Angular comes with a Dependency Injection (DI) framework of its own and it can be used wherever it is required.

Implement Dependency Injection in Angular:

Below are the ways to implement Dependency Injection in Angular.

  1. Using @Injectable() in the service
  2. Using @NgModules() in the module
  3. Using Providers in the component

Step 1 – Create an Angular Project:

Create an Angular Project,

The command to create a new Angular project “ng new ”. Let’s create an Angular project using the following commands.

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 [D:/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 he following 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 below code snippet to the file “app.component.ts”

 import{
XlsServiceService
} from './xls-service.service'
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.

import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';

Step 9

Declare file type and file extension with 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")  
} 

Step 13

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

Summary

We learned how to export Excel files in Angular applications.

Leave a Comment

Your email address will not be published. Required fields are marked *