Exporting grid in cordova application in EJ2 JavaScript Grid control

24 Jun 20246 minutes to read

Exporting the Syncfusion EJ2 JavaScript Grid in a Cordova application can be beneficial in various scenarios where users need to generate and download reports, share data in Excel or PDF formats, or archive information for offline use. A Cordova application does not support direct file download. To export the Syncfusion EJ2 JavaScript Grid component in a Cordova application, you need to utilize Blob streams. This can be achieved by using the appropriate exporting methods and export complete events to obtain the Blob stream.

The following example illustrates how to export a Syncfusion EJ2 JavaScript Grid in a Cordova application. It utilizes the excelExportComplete and pdfExportComplete events to manage the export process for Excel and PDF formats and obtain the Blob stream. The exportBlob function is responsible for creating a downloadable link for the exported file.

index.js
index.html
var excelExpComplete = (args) => {
    // This event will be triggered when excel exporting.
    args.promise.then((e) => {
        // In this `then` function, you can get blob data through the arguments after promise resolved.          
        exportBlob(e.blobData)
    });
};
var pdfExpComplete= (args) => {
    // This event will be triggered when pdf exporting.
    args.promise.then((e) => {
         // In this `then` function, you can get blob data through the arguments after promise resolved.                
        exportBlob(e.blobData)
    });
};

var exportBlob= (blob) => {
    var a = document.createElement('a');
    document.body.appendChild(a);
    a.style.display = 'none';
    var url= 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);
}

ej.grids.Grid.Inject(ej.grids.ExcelExport, ej.grids.PdfExport, ej.grids.Page, ej.grids.Toolbar);
var grid = new ej.grids.Grid({
    dataSource: data,
    allowExcelExport: true,
    allowPdfExport: true,
    excelExportComplete: excelExpComplete,
    pdfExportComplete: pdfExpComplete,
    toolbar: ['PdfExport','ExcelExport'],
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
        { field: 'CustomerID', width: 150, headerText: 'Customer ID' },
        { field: 'ShipCity', headerText: 'Ship City', width: 150 }
    ]
});
grid.appendTo('#Grid');

grid.toolbarClick = (args) => {
    if (args['item'].id === 'Grid_pdfexport') {
        grid.pdfExport(undefined, undefined, undefined, true);
    }
    if (args['item'].id === 'Grid_excelexport') {
        grid.excelExport(undefined, undefined, undefined, true);
    }
}
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/26.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id="container">
        <div id="Grid"></div>        
    </div>
<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>