Skip to Content

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

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