Download excel in SAP UI5 using XLSX JS

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

Download excel in SAP UI5 using XLSX JS

Author

  • Barry Allen

    A Full Stack Developer with 10+ years of experience in different domain including SAP, Blockchain, AI and Web Development.


Comments

One response to “Download excel in SAP UI5 using XLSX JS”

  1. Hi sir,
    according to your code getting error .
    and not fetching selected data .

    here is my modify code .

    onDataExport: function() {
    var table = this.getView().byId(“idInprogressTable”);
    var selectedContexts = table.getSelectedContexts();
    var selectedData = [];

    selectedContexts.forEach(function(context) {
    var selectedRowData = context.getObject();
    selectedData.push(selectedRowData);
    });
    console.log(selectedData);

    // Convert JSON to Excel workbook
    var workbook = XLSX.utils.book_new();
    var worksheet = XLSX.utils.json_to_sheet(selectedData);
    XLSX.utils.book_append_sheet(workbook, worksheet, “Sheet1”);
    // Save the workbook as an Excel file
    XLSX.writeFile(workbook, “data.xlsx”);

    }

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.