Skip to Content
Author's profile photo Krishnakant Joshi

SAPUI5 PDF Display

Below are the steps to display a PDF in UI5 application.

  • Create a new SAPUI5 Application

     /wp-content/uploads/2014/02/1_392854.png

  

  • Select SAPUI5 Application Development and click on Application Project.

/wp-content/uploads/2014/02/2_392858.png

  • Click on next and Give a valid name to project. Select the options as shown below.

/wp-content/uploads/2014/02/3_392859.png

  • Click Next and give a valid name to view and click on finish.

/wp-content/uploads/2014/02/4_392860.png

  • Write below code in pdf.view.js file’s create content section.


  


  createContent : function(oController) {
            var html = new sap.ui.core.HTML();
            html.setContent("<div id=\"divPdf\"><iframe id='pdfFrame' style=\"height:1000px;\"></iframe>");
            return new sap.m.Page({
                  title : "PDF View",
                  showNavButton : true,
                  navButtonPress : oController.fnGoback,
                  content : [ html ],
                  footer : new sap.m.Bar({
                  })
            });
      }


  • Write below code in pdf.controller.js file


onAfterRendering: function() {

            var pdfUrl = "http://blasthemy.com/sap/TechEd13/1_Session_PDFs/CD/CD119/CD119.pdf";

            $("pdfFrame").attr("src",pdfUrl);

    

            $(function(){

                  if(/iPhone|iPod|iPad/.test(navigator.userAgent))

                        {

                        $("#divPdf").css({

                              'overflow':'scroll',

                              'width':'100%',

                              'height': isNaN(window.innerHeight)?window.clientHeight :window.innerHeight,

                              'position':'absolute',

                              '-webkit-overflow-scrolling':'touch'

                        });                    

                        }

                  else

                        {

                        $("#divPdf").css({

                              'overflow':'scroll',

                              'width':'100%',

                              'height': isNaN(window.innerHeight)?window.clientHeight :window.innerHeight,

                              'position':'absolute',

                              '-webkit-overflow-scrolling':'auto'

                        });

                        }

            });

        },


  • Run application

/wp-content/uploads/2014/02/5_392867.png


  • Output


/wp-content/uploads/2014/02/6_392868.png


Note : This code works on all the devices.


Regards,

KK

Assigned tags

      9 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi, This code don't work. There is something wrong in the view apparently, Nothing is displayed 🙁

      Author's profile photo Krishnakant Joshi
      Krishnakant Joshi
      Blog Post Author

      HI Oussama Rezgui,

      The code is working fine.

      Are you generating PDF from your backend or using static PDF url?

      If you are generating PDF from your OData using Xstring then i will suggest you to please recheck your Odata service in browser.

      I have uploaded the source code for both view and controller at GitHub to help you more.

      https://github.com/krishnakantjoshi/DisplayPDF.git

      Regards,

      KK

      Author's profile photo Former Member
      Former Member

      Thank you so much Krishnakant, the one in git works fine. I still don't why 🙁 but it works fine for me I'll try to understand the code step by step. Thanks again

      Author's profile photo Karthik A
      Karthik A

      Hi Krishnakanth,

      I tried your code...it is working good in desktop, when i create apk for this...it is showing blank screen in mobile 🙁 ...do you have any idea on this...

      Thanks,

      Karthik A

      Author's profile photo cind q
      cind q

      Hi Krishnakanth,


      we've also working good in the desktop, but uncomfortable in mobiel device.

      Showing nothing, but a blank screen,

      please help if possible.


      Many thanks.

      Miller.

      Author's profile photo Karthik A
      Karthik A

      Hi cind q ,

      Try Cordova file Opener API. it will help you to download your doc from sap system to your mobile device.

      refer: Download file from SAP System to Mobile/Tablet - Part II

      Thanks,

      Karthik A

      Author's profile photo Former Member
      Former Member

      Hi Krishnakanth,

      The code is working fine in web application only.

      also referred the github code..
      Unable to download the PDF in mobile device.

      Suggest the proper solution.

      Regards:

      Vaidehi

      Author's profile photo Hüseyin Erbek
      Hüseyin Erbek

      Hi Vaidehi ,

      Did you solved ? I have same issue

      Regards,

      Hüseyin.

      Author's profile photo Vinothkumar T
      Vinothkumar T

      Hi  Krishnakant Joshi,

      I'm trying your code in desktop its working fine. But not working in FIORI client application with mobile, scroll bar is not working.

      Kindly suggest some idea to fix this.