SAPUI5 Empty pdf in iframe

[benlim]

Hi all,

I've go through few questions on this topic in SCN but I still can't find a solution for this issues. My app successful read the pdf from the odata but when I populate to Iframe, it does not show up the content.

var oModel = new sap.ui.model.odata.ODataModel("sURL", true);
//var oModel = new sap.ui.model.odata.v2.ODataModel("sURL", true);
oModel.read(sRead, {
		success: function(oData, oResponse) {
	var pdfURL = oResponse.requestUri;
	var oHtmlChange = new sap.ui.core.HTML({
content: "<iframe src=" + pdfURL + " width='800' height='800'></iframe>"
		});
	poFormPanel.addContent(oHtmlChange);
	},
	error: function(oError) {
	MessageBox.error(oError + "Read Failed!");
					}
				});
			},

I've followed the solution provide in below question by using new odata v2 model, but I'm getting property body error which I've raised the question in below whereby it failed to read my odata service.

Display pdf retrieved using odata service in iframe

Display Smartform (PDF) in SAPUI5

Thanks.

Regards,

Ben

[gururajenamate]

Hi,

Use new control PDFViewer:

https://sapui5.hana.ondemand.com/#/entity/sap.m.PDFViewer

Regards,

Gururaj

[benlim]

Hi sapguru91 ,

I'll need to be able to display pdf when the app is displayed in mobile device. However, I've used PDFViewer as per advised. The content is not able to show up(blank) as below screen shot. But when I clicked the download button, it's able to open a new tab in the browser and display the PDF content. Any advise on this error?

var pdfURL = "https://assets.cdn.sap.com/sapcom/docs/2015/07/c06ac591-5b7c-0010-82c7-eda71af511fa.pdf";					
var poFormPanel = this.getView().byId("__poFormPanel");
					var pdfViewer =	new sap.m.PDFViewer({
							source: pdfURL,
							height: "100%",
							width: "100%"
						});
						poFormPanel.addContent(pdfViewer);

Regards,

Ben

[gururajenamate]

Ben,

Its working pls check: https://pdfviewer-sdccsademo.dispatcher.hana.ondemand.com/webapp/index.html.

Regards,

Gururaj

[benlim]

Hi Gururaj,

Ops, previously I was simulate in mobile mode. Yes, i'm able to displayed in desktop mode as per your suggestion. But now I'm looking for pdf which is able to display in mobile mode. This would be my 2nd option if I can't get it to display in mobile mode.

[gururajenamate]

Ben,

Rendering iFrame for PDF in mobile browsers is a known issue.

Better give a link to open.

[Sharathmg]

Did you try to set the breakpoint inside the success function( of odata service call) and confirm the data being retrieved by service?

Kindly check.

[benlim]

Hi @Sharath M G,

Yes, my odata call was successful. In my testing, I notice it was the iframe tag issue but not odata call.

I tried a hard coded pdf url, it was not able to load as well. If i append the "drive.google" context, the pdf is able to load in my app, but when i remove and only assign the pdf url, the pdf content not able to load and its blank.

Any idea why this happen?

// var pdfURL = "https://drive.google.com/viewerng/viewer?
//url=https://assets.cdn.sap.com/sapcom/docs/2015/07/c06ac591-5b7c-0010-82c7-
//eda71af511fa.pdf?pid=explorer&efh=false&a=v&chrome=false&embedded=true";
var pdfURL = "https://assets.cdn.sap.com/sapcom/docs/2015/07/c06ac591-5b7c-
0010-82c7-eda71af511fa.pdf";                    
var oHtmlChange = new sap.ui.core.HTML({
content: "<iframe src=" + pdfURL + " width='800' height='800'></iframe>"
});
poFormPanel.addContent(oHtmlChange);

Thanks.

Regards,

Ben

[Sharathmg]

Could be an issue with the authentication to the pdf document? By drive, is it your google drive account?

Regards,

[Sharathmg]

I too observe that on browser both open the pdf. In your case, it could be the format. Need more investigation into the pdf which is retrieved by service and mapping it to the iframe control.

Regards.

[benlim]

No authentication to the pdf document, the pdf is public and is accessible to anyone. By google drive method is one of the solution i found when google for solution. But I feel this is not the right way to append the "drive.google...." at the beginning and append "pid=explorer&efh=..." at the end of my source.

Regards,

Ben

[Sharathmg]

One thing is its something to do with the pdf format in which you receive and the mapping to iframe control.

Try to compare the formats in which normal url and drive.gogole url retrieves the pdf. That may give you some clue.

[benlim]

One thing that puzzled me. One source of pdf format. I change to hard code the pdf url. Sample as below:

The pdf actual path:

https://assets.cdn.sap.com/sapcom/docs/2015/07/c06ac591-5b7c-
0010-82c7-eda71af511fa.pdf

If I useoption 1 with variable pdfURL0, my app able to display the pdf, but not pdfURL1.

// var pdfURL0 = "https://drive.google.com/viewerng/viewer?
//url=https://assets.cdn.sap.com/sapcom/docs/2015/07/c06ac591-5b7c-0010-82c7-
//eda71af511fa.pdf?pid=explorer&efh=false&a=v&chrome=false&embedded=true";
var pdfURL1 = "https://assets.cdn.sap.com/sapcom/docs/2015/07/c06ac591-5b7c-
0010-82c7-eda71af511fa.pdf";                    
var oHtmlChange = new sap.ui.core.HTML({
content: "<iframe src=" + pdfURL + " width='800' height='800'></iframe>"
});
poFormPanel.addContent(oHtmlChange);

[Sharathmg]

Is it possible to push it into a git and share the git project.

Regards,

Sharath

[benlim]

Yes, you may refer jsbin below for the simulation. You may change the variable pdfURL0 to pdfURL to see the difference.

pdf simulation

var oHtmlChange = new sap.ui.core.HTML({
 content: "<iframe src=" + pdfURL0 + " width='800' height='800'></iframe>"
});
poFormPanel.addItem(oHtmlChange);

Regards,

Ben