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
New NetWeaver Information at SAP.com
Very Helpfull