<!DOCTYPE html>
<html style="height: 100%;">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo</title>
    <script id="sap-ui-bootstrap"
      src="https://ui5.sap.com/resources/sap-ui-core.js"
      data-sap-ui-theme="sap_fiori_3_dark"
      data-sap-ui-async="true"
      data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
      data-sap-ui-compatversion="edge"
      data-sap-ui-excludejquerycompat="true"
      data-sap-ui-resourceroots='{ "demo": "./" }'
      data-sap-ui-xx-componentpreload="off"
      data-sap-ui-xx-waitfortheme="init"
    ></script>
  </head>
  <body id="content" class="sapUiBody">
    <div style="height: 100%;"
      data-sap-ui-component
      data-id="rootComponentContainer"
      data-name="demo"
      data-height="100%"
      data-settings='{ "id": "rootComponent" }'
    ></div>
  </body>
</html>
sap.ui.define([
  "sap/ui/core/UIComponent",
  "sap/ui/Device",
], function(UIComponent, Device) {
  "use strict";

  return UIComponent.extend("demo.Component", {
    metadata: {
      manifest: "json",
    },

    init: function() {
      UIComponent.prototype.init.apply(this, arguments);
      this.setDensity();
    },

    setDensity: function({
      styleClass = Device.system.desktop ? "sapUiSizeCompact" : "sapUiSizeCozy",
      targetElement = document.body,
    } = {}) {
      targetElement.classList.add(styleClass);
      return this;
    },

  });
});
{
  "_version": "1.12.0",
  "start_url": "index.html",
  "sap.app": {
    "id": "demo",
    "type": "application",
    "title": "Demo",
    "description": "Sample Code",
    "applicationVersion": {
      "version": "1.0.0"
    },
    "dataSources": {
      "myDataSource": {
        "type": "JSON",
        "uri": "localData/demoData.json"
      }
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    },
    "supportedThemes": [
      "sap_belize_hcw",
      "sap_belize_hcb",
      "sap_belize",
      "sap_belize_plus"
    ]
  },
  "sap.ui5": {
    "dependencies": {
      "minUI5Version": "1.52.0",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {},
        "sap.ui.export": {}
      }
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "resources": {
      "js": [
        
      ],
      "css": [
        
      ]
    },
    "models": {
      "": {
        "dataSource": "myDataSource",
        "preload": true
      }
    },
    "rootView": {
      "viewName": "demo.view.App",
      "id": "rootView",
      "type": "XML",
      "async": true
    }
  }
}
<mvc:View
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
  controllerName="demo.controller.App"
  displayBlock="true"
  height="100%">
  <App id="rootApp" autoFocus="false">
    <Page title="Spreadsheet with JSONModel" class="sapUiResponsiveContentPadding">
      <subHeader>
        <Bar design="SubHeader">
          <contentMiddle>
            <ObjectStatus
              title="With ODataModel"
              active="true"
              icon="sap-icon://inspect"
              state="Information"
              press=".onWithODataModelPress"
              text="https://embed.plnkr.co/THW41Upr5Uhk0Y2g"
            />
          </contentMiddle>
        </Bar>
      </subHeader>
      <headerContent>
        <Button text="Export" press=".onExportPress" type="Emphasized" />
      </headerContent>
      <Table id="table" items="{path: '/myData', key: 'notNested'}">
        <columns>
          <Column>
            <Text text="Not Nested" />
          </Column>
          <Column>
            <Text text="From Nested Property" />
          </Column>
        </columns>
        <ColumnListItem>
          <Text text="{notNested}" />
          <Text text="{nested/prop1}" />
        </ColumnListItem>
      </Table>
    </Page>
  </App>
</mvc:View>
sap.ui.define([
  "sap/ui/core/mvc/Controller",
	"sap/ui/export/Spreadsheet",
  "sap/m/library",
], function(Controller, Spreadsheet, sapMLib) {
  "use strict";

  return Controller.extend("demo.controller.App", {
    onExportPress: function() {
      const binding = this.byId("table").getBinding("items");
			new Spreadsheet({
				workbook: {
          columns: this.createColumns()
        },
				dataSource: binding.getModel().getProperty(binding.getPath()),
        fileName: "myExportedDataFromPlainJSON.xlsx",
			}).build();
    },

    createColumns: function() {
      return [
        {
          label: "Not Nested",
          property: "notNested"
        },
        {
          label: "From Nested Property",
          property: "nested/prop1"
        },
      ];
    },

    onWithODataModelPress: function() {
      sapMLib.URLHelper.redirect("https://embed.plnkr.co/THW41Upr5Uhk0Y2g", true);
    },

  });
});
{
    "myData": [
        {
            "nested": {
                "prop1": "Child Property 1",
                "prop2": "Child Property 2"
            },
            "notNested": "Property 0"
        },
        {
            "nested": {
                "prop1": "Child Property 3",
                "prop2": "Child Property 4"
            },
            "notNested": "Property 1"
        }
    ]
}