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("
“);             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 = "https://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

New NetWeaver Information at SAP.com

Very Helpfull

 

 

User Rating: Be the first one !