Himanshu Pensia

August 24, 2018 1 minute read

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 :

6 Comments

You must be Logged on to comment or reply to a post.

Christian Späh

August 24, 2018 at 6:25 am

Hi Himanshu,

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

Best regards,

Christian.

Himanshu Pensia

Blog Post Author

August 24, 2018 at 6:33 am

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

Christian Späh

August 24, 2018 at 7:11 am

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.

Himanshu Pensia

Blog Post Author

August 24, 2018 at 7:29 am

Hi Christian,

Thanks for sharing this information. This is very helpul.

Thanks,

Himanshu

Ganesh Yellampati

August 29, 2019 at 12:14 pm

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

Andreas Teufer

July 1, 2020 at 8:57 am

Hello,

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

Thanks.

Regards!

Display PDF in SAP UI5

Assigned Tags