Ionic angular export excel is the topic for today . You may find yourself with the need to export your json data to an excel file from your ionic application. This article shows you how you can achieve that and we will be using ionic 4 with angular 8.

Prerequisites

NodeJS
Ionic client

Create app

First you create an ionic 4 application

ionic start ionic4AngularExcel --type=angular blank

Once generation of the ionic application completes, get into the folder of your application, if on unix you can use cd ./ionic4AngularExcel and add the npm packages needed.

npm install file-saver --save 
npm install xlsx --save 

You will create a service in which you will have the logic for fetching our test data and for exporting our data to excel.
To generate the service use the following command.

ionic g service data

Sample Data
[
    {
        "name": "abcd",
        "surname": "efg",
        "age": 19,
        "gender": "female"
    },
    {
        "name": "hijk",
        "surname": "lmn",
        "age": 20,
        "gender": "female"
    },
    {
        "name": "opq",
        "surname": "rst",
        "age": 18,
        "gender": "male"
    },
    {
        "name": "uv",
        "surname": "wx",
        "age": 21,
        "gender": "female"
    },
    {
        "name": "yz",
        "surname": "now",
        "age": 19,
        "gender": "male"
    },
    {
        "name": "ikn",
        "surname": "o",
        "age": 19,
        "gender": "male"
    },
    {
        "name": "myabc",
        "surname": "next",
        "age": 21,
        "gender": "female"
    },
    {
        "name": "time",
        "surname": "wont",
        "age": 20,
        "gender": "male"
    },
    {
        "name": "you",
        "surname": "type",
        "age": 19,
        "gender": "female"
    },
    {
        "name": "wit",
        "surname": "hme",
        "age": 18,
        "gender": "female"
    }
]

Create a json file in the path /assets/data/data.json .
Test data can be copied to this file. You will be using http to get the json data,  in your service DataService.ts update the constructor to this

constructor(private http: HttpClient) { }

Now add a function to fetch your test data.

getTestData(): Observable<any>{
    return this.http.get('/assets/data/data.json');
  }

Update app.modules.ts to ensure HttpClient works well.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import {HttpClientModule} from '@angular/common/http';
 
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

To display your data on your page let start with fetching this data.
In your home.page.ts file, add a data service to the constructor

constructor(private data: DataService) {}

Declare an array parameter which will be used for storing the data we fetch from our json file.

users:any[];

Create a function to load the data and call it when the page is initialised.

ngOnInit() {
    this.loadData();
  }
  loadData(){
    this.data.getTestData().subscribe((result:any)=>{
      this.users=result;
    });
  }

On your page home.page.html you add your data to a grid.

<ion-grid>
     <ion-row>
       <ion-col>Name</ion-col>
       <ion-col>Surname</ion-col>
       <ion-col>Gender</ion-col>
       <ion-col>Age</ion-col>
     </ion-row>
     <ion-row *ngFor="let user of users  ">
      <ion-col>{{user.name}}</ion-col>
      <ion-col>{{user.surname}}</ion-col>
      <ion-col>{{user.gender}}</ion-col>
      <ion-col>{{user.age}}</ion-col>
    </ion-row>
   </ion-grid>
<ion-button color="success" expand="block" (click)="exportToExcel()">Export to Excel</ion-button>

A button is added so that it can be used to export the data to excel.
After that, the data service is updated to add the function to export to excel

Update the home.page.ts file to add a call to export the data

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
 
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit{
 
  users: any[];
  constructor(private data: DataService) { }
 
  ngOnInit() {
    this.loadData();
  }
  loadData() {
    this.data.getTestData().subscribe((result: any) => {
      this.users = result;
    });
  }
 
  exportToExcel() {
    this.data.exportToExcel(this.users, 'Users');
  }
 
}

Below is the complete section of the data service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import * as XLSX from 'xlsx'; 

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  getTestData(): Observable<any>{
    return this.http.get('/assets/data/data.json');
  }

  async exportToExcel(data,filename){
    {
       const ws: XLSX.WorkSheet =XLSX.utils.json_to_sheet(data);
       const wb: XLSX.WorkBook = XLSX.utils.book_new();
       XLSX.utils.book_append_sheet(wb, ws, filename);
       XLSX.writeFile(wb, filename+'.xlsx');
   }
  }

}

With this you should be good to go and ready to test. You can run up ionic serve and test in your browser.

In conclusion, that is all for ionic angular export excel. You can check out sample code on github https://github.com/bmukorera/ionic4AngularToExcel.git

.You can check out other ionic related articles here.