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





Would you like to access Full Article?
                            If you are already a member in this website, Please Click here to loginIf you are not yet a member, Please Click here to Sign up                              
                              if you have any questions don’t hesitate to contact us from the Button bellow                            
 Contact US





New NetWeaver Information at SAP.com

Very Helpfull
                          

                                                            




                            User Rating:  Be the first one !