IONIC ANGULAR EXPORT EXCEL
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
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.
¿Esto funciona en android? osea, ¿tambien me descarga el archivo excel?
Hi Leonis,Thanks for the great question. It works on both android and IOS when you build for any of the platforms.
where is exportToExcel in Dataservice?
Thanks Mark for picking that up, have updated the article and added a link to sample app in github.
I think you forgot to show in the tutorial above how the exportToExcel () function looks in DataService.js. How is the function?
Thanks for picking that, have updated to article and also added a github repository with sample code.
Thank you very much for making the repository link available on GitHub. You saved my life! Gratitude!
Glad to be of help
How can we export the image as well??
Hi Aakash, are you referring to exporting image to excel or something different?