SAPUI5 PDF Display

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("

• 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