Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 
PDF Download Option with SAPUI5


1.     Summary

2.     Pre-requisites.

3.     SAPUI5 Application development

4.     Testing and Demo.


1. Summary

    SAP provide us to integrate sapui5 application with third party. At many time we got such requirement where client want to download data in PDF or Excel format for records, some proof or some other reasons. So here we will discuss about how we can download data in PDF format.

2. Pre-Requisites

    1. 1. Basic Knowledge of SAPUI5, OData.

    2. 2.  Basic knowledge of JS.

3. Create SAPUI5 Application.

1.       I will show you how you can develop this Application in WEBIDE but you can create same application using Eclipse. You need to follow same process.

2.       Create OData service to create table on real time data.

3.       Create New SAPUI5 application in WEBIDE.


4.       Set OData service for Application.

Write code in component.js file.
], function(UIComponent, Device, models) {
"use strict";

return UIComponent.extend("sap.pdf.Component", {

metadata: {
manifest: "json"

* The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
* @public
* @override
init: function() {
var url ='/sap/opu/odata/sap/ZDEMO_DATA_SRV/';
var oModel = new sap.ui.model.odata.ODataModel(url, true);
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
// set the device model
this.setModel(models.createDeviceModel(), "device");


5.Create Main view and write code to create simple table.

    <mvc:View controllerName="sap.pdf.controller.main" xmlns:html="" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">  
<Page title="PDF Download">
<Table id="idPDFTable" items="{/DemoSet}">
<Title level="H2" text="PDF Table"/>
<Button icon="sap-icon://download" press="onDataExportPDF" />
<Column width="12em">
<Text text="ID"/>
<Text text="Frist Name"/>
<Text text="Last Name"/>
<Text text="Phone No."/>
<Text text="{Id}"/>
<Text text="{Fname}"/>
<Text text="{Lname}"/>
<Text text="{Phoneno}"/>

6.       Create main.controller.js file to control main view.


7.       Test Application for table data coming correctly or not.




8.       We can see that download button on table header. On press of that button we will download that table data in PDF format. To complete this process we need to use third party API here we will use jsppdf API.For more detail: -

9.        Include some JS file in application.

Create separate folder.And include  js file attached in Attachment.

10.       Now we need to include  that JS in manifest.json folder.

11. Now we just need to add some line of code in main.component.js file to download table data in pdf format.


], function(Controller) {
"use strict";

return Controller.extend("sap.pdf.controller.main", {
onInit: function () {
// set explored app's demo model on this sample

var fnSuccess = function(oData, oResponse) {

var columns = ["ID","First Name","Last Name","Phone No."];
var data = [];
for(var i=0;i<oData.results.length;i++)

var doc = new jsPDF('p', 'pt');
doc.autoTable(columns, data);"DemoData.pdf");
var fnFail = function() {
null, null, true, fnSuccess, fnFail);



4. Demo and Testing.

    • Our SAPUI5 application completed where we show data in table and add download button on that table. On press on that button we can download that table data in PDF format.

Please find screen shots of application.

On press on that download icon.

PDF output:-


Labels in this area