Wondering how to export data into Excel in an Ionic Application using XLSX? We can help you in doing it.

Here at Bobcares, we have seen several such App-related queries as part of our Development Services for developers.

Today, we will take a look at how to export Excel in an Ionic Application.

Know more about Ionic Application

Ionic is a powerful open-source HTML5 SDK. It mainly helps in building native-feeling mobile apps using web technologies like HTML, CSS, and Javascript.

Also, Ionic is mainly focusses on the look and feel, and UI interaction of the app.

In simple terms, if we create native apps in Android, we code it in Java. If we create native apps in iOS, we code in Obj-C or Swift. Both these languages are complex even though they are powerful.

With Ionic, we can write a single piece of code for the app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS.

How to export data into Excel in Ionic Application using XLSX

Now let us see how our Engineers easily export data into Excel in Ionic Application.

1.  Create a basic Ionic app

First, we create a new Ionic application using Ionic CLI

$ ionic start Multilingual blank –type=angular

2. Install XLSX library

In order to install the library in the application, we run the following npm commands.

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

Now we create a service in which we will have the logic for fetching our data and for exporting our data to excel.

In order to generate the service, we use the following command.

ionic g service data

After that, in service DataService.ts we update to this

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

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

constructor() { }

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');
}
}
}

Then we 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');
}
}

<ion-button color="success" expand="block" (click)="exportToExcel()">Export to Excel</ion-button>

Finally, in the above code, we add a button so that we can use it to export the data to excel.

On clicking the button the data that is being loaded will be exported and saved as an XLSX file.

[Still, facing any problem in exporting data into excel? – Our experts can help you]

Conclusion

Today, we saw how our Engineers easily export data into excel file using XLSX.