Skip to Content
Author's profile photo Munna Mishra

PDF Download Option with SAPUI5

PDF Download Option with SAPUI5

Content

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.

    sap.ui.define([  
      "sap/ui/core/UIComponent",  
      "sap/ui/Device",  
      "sap/pdf/model/models"  
    ], 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);  
      sap.ui.getCore().setModel(oModel);  
      // 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="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">  
        <App>  
            <pages>  
                <Page title="PDF Download">  
                    <content>  
                        <Table id="idPDFTable" items="{/DemoSet}">  
                            <headerToolbar>  
                                <Toolbar>  
                                    <Title level="H2" text="PDF Table"/>  
                                     <ToolbarSpacer></ToolbarSpacer>  
                                     <Button    icon="sap-icon://download" press="onDataExportPDF" />  
                                </Toolbar>  
                            </headerToolbar>  
                            <columns>  
                                <Column width="12em">  
                                    <Text text="ID"/>  
                                </Column>  
                                <Column>  
                                    <Text text="Frist Name"/>  
                                </Column>  
                                <Column>  
                                    <Text text="Last Name"/>  
                                </Column>  
                                <Column>  
                                    <Text text="Phone No."/>  
                                </Column>  
                            </columns>  
                            <items>  
                                <ColumnListItem>  
                                    <cells>  
                                        <Text text="{Id}"/>  
                                        <Text text="{Fname}"/>  
                                        <Text text="{Lname}"/>  
                                        <Text text="{Phoneno}"/>  
                                    </cells>  
                                </ColumnListItem>  
                            </items>  
                        </Table>  
                    </content>  
                </Page>  
            </pages>  
        </App>  
    </mvc:View>  

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: –
https://parall.ax/products/jspdf

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.

demo.png

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

 

 

    sap.ui.define([  
        "sap/ui/core/mvc/Controller"  
    ], function(Controller) {  
        "use strict";  
      
        return Controller.extend("sap.pdf.controller.main", {  
            onInit: function () {  
                // set explored app's demo model on this sample  
                this.getView().setModel(sap.ui.getCore().getModel());  
            },  
            onDataExportPDF:function(oEvent){  
              
            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++)   
                    {  
                        data[i]=[oData.results[i].Id,oData.results[i].Fname,oData.results[i].Lname,oData.results[i].Phoneno];  
                    }  
      
                var doc = new jsPDF('p', 'pt');  
                doc.autoTable(columns, data);  
                doc.save("DemoData.pdf");  
            };  
            var fnFail = function() {  
            };  
            sap.ui.getCore().getModel().read('/DemoSet',  
                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:-

 

 

Assigned tags

      26 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Stefan Nothaft
      Stefan Nothaft

      Hi Munna,

      Thank you for this nice blog post. I'm wondering which license is needed for using the third party in a commerical product/app. Do you know more about the licensing?

      Thank you and BR,
      Stefan

      Author's profile photo Munna Mishra
      Munna Mishra
      Blog Post Author

      It’s always depends on which API you are using if it open source then you can directly use that API otherwise we need to check for licensing. This PDF API is open source.

       

      Thanks and Regards

      Munna Mishra

      Author's profile photo Kapil Jain
      Kapil Jain

      what if there is multiple label in the sap ui5?

      Author's profile photo Former Member
      Former Member

      Hi Mishra,

      How can I download table data in pdf format if i am using JSON model?

      Author's profile photo Munna Mishra
      Munna Mishra
      Blog Post Author

      Hi ArunKumar,

      You can directly perform read on JSON model and pass data to pdf download

      for Example :

       

      var columns = ["ID","First Name","Last Name","Phone No."];

      var data = []; for(var i=0;i<oData.results.length;i++)

      {

      //data[i]=[oData.results[i].Id,oData.results[i].Fname,oData.results[i].Lname,oData.results[i].Phoneno];

      //if Model name is DataModel

      data[i]=[this.getModel("DataModel").getData()[i].Id,this.getModel("DataModel").getData()[i].Fname,this.getModel("DataModel").getData()[i] .Lname,this.getModel("DataModel").getData()[i].Phoneno]

      }

      var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, data); doc.save("DemoData.pdf");

      Author's profile photo uddhav vyas
      uddhav vyas

      Have to tried the below code?

      Its working??

      Author's profile photo Avinash Sahoo
      Avinash Sahoo

      Hi Munna,

      I did the way you say but  i am facing the issue of doc.autoTable is not a function so is there any solution for this error?

      Author's profile photo Munna Mishra
      Munna Mishra
      Blog Post Author

      Hi Avinash,

       

      It might be API include issue.Please check and  download API again or also check parameter which you are passing.

      Author's profile photo Klaus Reiner
      Klaus Reiner

       

      One addition: I also do not understand why you are referencing to folder "lib" in your manifest.json

      Is that a typo or the explanation why the autTable and saveAs Method can not be called?

      Thanks, Klaus

      Author's profile photo Munna Mishra
      Munna Mishra
      Blog Post Author

      Sorry ,it suppose to point  folder name(JS).

      Author's profile photo Klaus Reiner
      Klaus Reiner

       

      Hi Munna,

      I am facing the same problem, although I have used the newest version of the API.
      When I comment out the autoTable-call and add some text with doc.text method,
      I am getting an error at doc.save saying, that method saveAs does not exist. And
      it really seems to be missing in the latest version of jspdf.js. I also could not find
      jspdf.min.js that you have mentioned in your block above in manifest.json.

      Does the scenario described work for you on current version of WebIDE? If so,
      please explain how you have solved the issue with saving the file. Did you use
      FileSaver.js therefore and if so, who did you include it into jspdf.js?

      Thanks in advance!

      Kind regards,
      Klaus

      Author's profile photo Munna Mishra
      Munna Mishra
      Blog Post Author

      Hi Klaus,

       

      I check that API again and there is some changes in API now.Please use below link to resolved this issue.

      https://github.com/simonbengtsson/jsPDF-AutoTable/tree/master/examples/libs

       

      Replace jspdf to jspdf.debug.js and jspdf.min.js to jspdf.plugin.autotable.js

      Change there name in manifest.json  file also.Check if you face any issue let me know.

       

       

       

       

      Author's profile photo Klaus Reiner
      Klaus Reiner

      Hi Munna,

      thanks for your response. I have tried that.

      So uploaded the two files from Git-Repository into my libs folder and included the ressources in the manifest.json-file just like this:

       

      Author's profile photo Klaus Reiner
      Klaus Reiner

       But I am getting errors displayed when opening the js-files in WebIDE, saying e. g. that "Symbol" is not defined, and others...

       

      Author's profile photo Klaus Reiner
      Klaus Reiner

      And when calling the application, I get the following errors displayed in the Debugger Environment:

      Author's profile photo Klaus Reiner
      Klaus Reiner

       

      So what exactly is the issue, as I did all steps you have described and used the new libraries. Did it work for you, and if you, can you provide your coding / manifest.json again?

      Thanks, Klaus

      Author's profile photo Munna Mishra
      Munna Mishra
      Blog Post Author

      Hi Klaus,

       

      Yes it is working for me manifest.json is similar to you only.I am not getting that Symbol error in my application.

       

      Please find complete application  in below URL.

      https://github.com/munnaec/PDFDEMO

       

      Thanks and Regards

      Munna Mishra

       

      Author's profile photo Klaus Reiner
      Klaus Reiner

       

      Is there any necessity to combine the plugin with the jspdf, and if so how can this be achieved?

      Kind regards,
      Klaus

      Author's profile photo Munna Mishra
      Munna Mishra
      Blog Post Author

      Hi Klaus,

      Download that project from git.If you still find any issue.Let me know.

       

      Thanks and Regards

      Munna Mishra

       

      Author's profile photo Klaus Reiner
      Klaus Reiner

      Hi Munna,

      Thanks for providing the project on git-repository.
      I have just imported your project from there.

      But when running the application, I am getting
      the following error.

       

      Kind regards,
      Klaus

      Author's profile photo Klaus Reiner
      Klaus Reiner

       

      Author's profile photo Klaus Reiner
      Klaus Reiner

      Do you have any idea?

      Where do you consume your oData-Service from?

      Kind regards,
      Klaus

      Author's profile photo shanmukhasai talluri
      shanmukhasai talluri

      Hi,

      munna mishara

      i followed your guide lines as you mention above but i get error in following please help me in his..

      Author's profile photo uddhav vyas
      uddhav vyas

      Hiii did you find any solution of this??

      I am also facing the same problem.

       

      Author's profile photo Ravi Yadav
      Ravi Yadav

      Hi Munna Mishra,

      Can I add multiple tables in a PDF?

      thanks and Regards

      Ravi

      Author's profile photo vj kumar
      vj kumar

      how download Pdf with company specific  Logo