Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member9607
Active Participant

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

  • Create a new SAPUI5 Application

    

  

  • Select SAPUI5 Application Development and click on Application Project.

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

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

  • 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


  • Output



Note : This code works on all the devices.


Regards,

KK

9 Comments
Labels in this area