Table of Contents
Introduction
Discover the seamless integration of ‘Download Excel in SAP UI5 using XLSX JS.’ Dive into this comprehensive guide that unveils the step-by-step process to harness the power of XLSX JS, optimizing SAP UI5 applications. Ideal for developers and SAP enthusiasts, this tutorial not only simplifies data exportation into Excel format but also boosts the functionality of your UI5 projects. Stay ahead in the evolving landscape of SAP and enhance your skills with this essential technique.
What is XLSX/Sheet.js?
XLSX.js is a JavaScript library that facilitates reading and writing various spreadsheet file formats, including XLSX, which is the format used by modern versions of Microsoft Excel. In essence, it allows developers to handle Excel files (both reading and creating them) directly in JavaScript, making it easier to integrate spreadsheet functionalities in web applications.
For instance, in the context of SAP UI5 or other web frameworks, XLSX.js can be used to provide users with the ability to download data from the application in Excel format or upload Excel files for processing in the application, all without requiring server-side processing or additional software installations.
How to Download excel in SAP UI5 using XLSX JS?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Project Ideas</title>
<link rel="icon" type="image/x-icon" href="https://myprojectideas.com/wp-content/uploads/2021/08/cropped-Screenshot-2021-07-26-at-1.39.04-PM.png"/>
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-resourceroots='{"excelProject.excelProject": "./"}'
data-sap-ui-compatVersion="edge"
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-async="true"
data-sap-ui-frameOptions="trusted">
</script>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
</head>
<body class="sapUiBody">
<div data-sap-ui-component data-name="excelProject.excelProject" data-id="container" data-settings='{"id" : "excelProject"}'></div>
</body>
</html>
View.XML
<mvc:View controllerName="excelProject.excelProject.controller.Main" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="My Project Ideas: Download Table in Excel">
<content>
<Button text="Export to Excel" press="onExportToExcel"/>
<Table id="idProducts">
<columns>
<Column
width="12em">
<Text text="Name" />
</Column>
<Column
minScreenWidth="Tablet"
demandPopin="true">
<Text text="City" />
</Column>
</columns>
<items>
<ColumnListItem vAlign="Middle">
<cells>
<Text text="Rudra" />
<Text text="Mughalsarai" />
</cells>
</ColumnListItem>
<ColumnListItem vAlign="Middle">
<cells>
<Text text="Deepak" />
<Text text="Kolkata" />
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
Controller.Js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("excelProject.excelProject.controller.Main", {
onInit: function () {
},
onExportToExcel: function () {
// Get the JSON data
var rows = [];
var selection = this.getView().byId('idProducts').getSelectedItems();
selection.forEach(val => {
var data = val.getBindingContext().getObject();
rows.push(data);
});
// Convert JSON to Excel workbook
var workbook = XLSX.utils.book_new();
var worksheet = XLSX.utils.json_to_sheet(rows);
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
// Save the workbook as an Excel file
XLSX.writeFile(workbook, "data.xlsx");
}
});
});
Output
0 Comments