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

To report this post you need to login first.

8 Comments

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

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

      (0) 
      1. Oussama Rezgui

        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

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

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

    (0) 
  3. Vaidehi Dixit

    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

    (0) 

Leave a Reply