Skip to Content

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:-

 

 

To report this post you need to login first.

21 Comments

You must be Logged on to comment or reply to a post.

  1. 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

    (1) 
    1. Munna Mishra 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

      (0) 
    1. Munna Mishra 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”);

      (0) 
  2. Former Member

    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?

    (0) 
    1. Munna Mishra Post author

      Hi Avinash,

       

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

      (0) 
  3. 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

    (0) 
  4. 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

    (0) 
  5. 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:

     

    (0) 
  6. 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…

     

    (0) 
  7. 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

    (0) 
  8. Munna Mishra Post author

    Hi Klaus,

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

     

    Thanks and Regards

    Munna Mishra

     

    (0) 
  9. 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

    (0) 

Leave a Reply