Download the Model Data to a CSV/Excel file in UI5

We can download the data present in JSON or the data retrieved from oData to an csv file.
The bolow code snippets can be used to achieve the same.

Data.Json:

JSON is a very lightweight format for storing data and can be directly used as a data source for SAPUI5 applications. Now create a JSON file within the model folder of the application.

Specify the data in the JSON file as below:

{
	"items": [{
		"firstName": "Navya",
		"lastName": "Gowda",
		"jobTitle": "Senior System Engineer",
		"location": "India",
		"department": "EASSAP"
	}, {
		"firstName": "John",
		"lastName": "Smith",
		"jobTitle": "Technology Architect",
		"location": "USA",
		"department": "EASSAP"
	}, {
		"firstName": "Emma",
		"lastName": "Watson",
		"jobTitle": "System Engineer",
		"location": "Europe",
		"department": "Testing"
	}, {
		"firstName": "Rahul",
		"lastName": "Singh",
		"jobTitle": "Manager",
		"location": "India",
		"department": "EASSAP"
	}, {
		"firstName": "Sinchi",
		"lastName": "Kotaro",
		"jobTitle": "System Engineer",
		"location": "UK",
		"department": "EASSAP"
	}]
}

To access the above JSON file throughout the application, specify the JSON file URI in the model under sap.ui5 section in the manifest.json file.
we specify the type as JSON and URI which is the path to the JSON data to instantiate the JSON Model as shown below.

"sap.ui5": {
…………………………….
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "DownloadToExcel.i18n.i18n"
				}
			},
			"Data": {
				"Data": {
				"type": "sap.ui.model.json.JSONModel",
				"uri": "model/Data.json"
				}
			}
			
		},
		"resources": {
			"css": [{
				"uri": "css/style.css"
			}]
		}
	}

View:

The view contains a Button as shown below,
on clicking the button “onDataExport” function will be executed to download the Data to an CSV file.

	<Button icon="sap-icon://download" text="Download" press="onDataExport" tooltip="{i18n>download}" id="download"/>

Controller:

In the init() function of the Controller fetch the json data and make it available for the controller to access.

Add the below Required libraries to the Controller.

“sap/ui/core/util/Export”, “sap/ui/core/util/ExportTypeCSV”.

onInit: function() {
	var oModel = new sap.ui.model.json.JSONModel("model/Data.json");
	sap.ui.getCore().setModel(oModel, "oModel");
}

“onDataExport” code to download the data to an CSV file is shown below.

	onDataExport: sap.m.Table.prototype.exportData || function() {

			var oModel = sap.ui.getCore().getModel("oModel");
			var oExport = new Export({

				exportType: new ExportTypeCSV({
					fileExtension: "csv",
					separatorChar: ";"
				}),

				models: oModel,

				rows: {
					path: "/items"
				},
				columns: [{
					name: "First Name",
					template: {
						content: "{firstName}"
					}
				}, {
					name: "Last name",
					template: {
						content: "{lastName}"
					}
				}, {
					name: "Job Title",
					template: {
						content: "{jobTitle}"
					}
				}, {
					name: "Location",
					template: {
						content: "{location}"
					}
				}, {
					name: "Department",
					template: {
						content: "{department}"
					}
				}]
			});
			console.log(oExport);
			oExport.saveFile().catch(function(oError) {

			}).then(function() {
				oExport.destroy();
			});
		}

OUTPUT: