Skip to Content

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 :

To report this post you need to login first.

4 Comments

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

    1. Himanshu Pensia 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

      (1) 
  1. 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.

    (1) 

Leave a Reply