Exporting grid in Cordova application in Angular Grid component

17 Sep 20256 minutes to read

Exporting data from the Syncfusion Angular Grid within a Cordova application enables users to generate and download reports, share information in Excel or PDF formats, and archive data for offline access. As Cordova applications do not support direct file downloads in the traditional browser sense, it is necessary to handle exported data using Blob streams.

To export the Syncfusion Angular Grid data in a Cordova application, use the available grid exporting methods and the export completion events to retrieve the Blob stream. The process involves handling the excelExportComplete and pdfExportComplete events, which provide the Blob data after export operation is finished. The exportBlob function is responsible for creating a downloadable link to enable users to access the exported file on their device.

The following example demonstrates exporting a Syncfusion Angular Grid to Excel and PDF formats in a Cordova application. Blob streams are obtained in the export completion event handlers, and a download link is created for the exported file.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, PdfExportService } from '@syncfusion/ej2-angular-grids'

import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import {
    GridComponent, ToolbarItems, ToolbarService, ExcelExportService, PdfExportService,
    ExcelExportCompleteArgs, PdfExportCompleteArgs
} from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [
        
        GridModule
    ],

providers: [PdfExportService, ToolbarService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='272px' [allowExcelExport]='true'
    (excelExportComplete)='excelExpComplete($event)' (pdfExportComplete)='pdfExpComplete($event)'
      [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                </e-columns>
                </ejs-grid>`,
    providers: [ToolbarService, ExcelExportService, PdfExportService]
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid') public grid?: GridComponent;
    public exportBlob = (blob: Blob) => {
        const a: HTMLAnchorElement = document.createElement('a');
        document.body.appendChild(a);
        a.style.display = 'none';
        const url: string = window.URL.createObjectURL(blob); // Fix typo here
        a.href = url;
        a.download = 'Export';
        a.click();
        window.URL.revokeObjectURL(url); // Fix typo here
        document.body.removeChild(a);
    }

    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['PdfExport', 'ExcelExport'];
    }

    toolbarClick(args: ClickEventArgs) {
        if (args.item.id === 'Grid_pdfexport') {
            (this.grid as GridComponent).pdfExport(undefined, undefined, undefined, true);
        }
        if (args.item.id === 'Grid_excelexport') {
            (this.grid as GridComponent).excelExport(undefined, undefined, undefined, true);
        }
    }

    excelExpComplete(args: ExcelExportCompleteArgs) {
        // This event will be triggered when excel exporting.
        (args as any).promise.then((e: { blobData: Blob }) => {
            // In this `then` function, you can get blob data through the arguments after promise resolved.
            this.exportBlob(e.blobData);
        });
    }

    pdfExpComplete(args: PdfExportCompleteArgs) {
        // This event will be triggered when pdf exporting.
        (args as any).promise.then((e: { blobData: Blob }) => {
            // In this `then` function, you can get blob data through the arguments after promise resolved.
            this.exportBlob(e.blobData);
        });
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));