Skip to Content
Author's profile photo Himanshu Pensia

Display PDF in SAP UI5

Scenario:

We will learn how to display a PDF file in sap UI5 application.

Procedure:

We can display PDF in SAP UI5 application using “sap.m.PDFViewer“.

But this control is available after UI5 version 1.48. If you are using SAP UI5 version previous to that then you have to follow below procedure.

We can display PDF in SAP UI5 application using “iframe”. But “iframe” is not any control in SAP UI5 library so we have to call it from HTML tag.

Put below code as your View1.xml file.

<mvc:View controllerName="Display_PDF.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core"
	displayBlock="true" xmlns="sap.m">
	<App>
		<pages>
			<Page title="Display PDF">
				<content>
					 <core:HTML id="idFrame"/>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

Put below code as your View1.controller.js file.

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";

	return Controller.extend("Display_PDF.controller.View1", {
			onInit: function() {
		
			var oHtml = this.getView().byId("idFrame");
			oHtml.setContent("<iframe src='https://www.trainning.com.br/download/sap4_basic.pdf' height='700' width='1300'></iframe>");
		},

	});
});

Output :

Assigned tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Christian Späh
      Christian Späh

      Hi Himanshu,

      why do you prefer iframe opposite to sap.m.PDFViewer?

      Best regards,

      Christian.

      Author's profile photo Himanshu Pensia
      Himanshu Pensia
      Blog Post Author

      Hi Christian,

      sap.m.PDFViewer UI5 control is Available since SAP UI5 version 1.48.

      If we are using UI5 library with previous versions, we will need iframe.

      Thanks

      Author's profile photo Christian Späh
      Christian Späh

      Because of iFrame does not resize its height if the browser window is resized, we use something like this, to set a new size:

      onInit: function(){
      ...
      	$(window).on("resize.DocDisplay", this._setIFrame.bind(this));
      ...
      },
      
      _setIFrame: function(){
      	var sIFrame = "<iframe src=" + sDocumentPath + " height='" + this._getAvailableHeight() + "' width='100%' style='border: none;'></iframe>";
      	this._oHtml.setContent(sIFrame);
      },
      
      _getAvailableHeight: function() {
      	// get height from window or dialog whatever the iframe is put in
      	var nDialogHeight = $(this._oDialog.getDomRef()).height();
      	var iFrameHeight = nDialogHeight - 46;
      	return iFrameHeight + "px";
      },

      The same thing can be done with sap.m.PDFViewer, but here we can use a binding within height-attribute to a JSONModel.

      Author's profile photo Himanshu Pensia
      Himanshu Pensia
      Blog Post Author

      Hi Christian,

      Thanks for sharing this information. This is very helpul.

      Thanks,

      Himanshu

      Author's profile photo Ganesh Yellampati
      Ganesh Yellampati

      Hi Himanshu,

      Nice Blog,

      I have question, Is it possible to read input values in the application and display in pdf view within the same screen.

       

      Thanks & Regards,

      Ganesh Yellampati

       

       

      Author's profile photo Andreas Teufer
      Andreas Teufer

      Hello,

      do you know how to open the embedded PDFViewer Control in a new Browser Tab?

      Thanks.

      Regards!