Are you trying to export data into Excel in an Ionic Application using XLSX ? 

This guide will help you.

Ionic is a powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML, CSS, and Javascript. 

Here at Ibmi Media, as part of our Server Management Services, we regularly help our Customers to perform Ionic related tasks.

In this context, we shall look into how to export Excel in an Ionic Application.

More information 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 ?

To export data into Excel in Ionic Application, follow the process given below;

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]