Display PDF in SAPUI5 ( Prevent from downloading )

[former_member9607]

Problem Statement:

Sometimes while displaying the PDF in sapui5 view, it gets downloaded automatically. I have seen many developers blame the browser for this.

Well, this is partly a browser issue, but not always.

Allow me to clarify what I mean : not all browsers share the same settings.

- if the browser's rule is to ALWAYS give choice between viewing and downloading, then you are done with your job. You have nothing to do in this case.
- if the browser's rule is to ALWAYS open the pdf online unless it's forced to be downloaded then the PDF will be open online by default.

Solution

Look for the below header parameters in your PDF request's response header in browser's console.

Content-Type: application/pdf Content-Disposition: attachment;

While implementing the OData service for retrieving PDF using $value, it will look like:

Content-Type: application/pdf Content-Disposition: attachment; filename="entity.pdf"

As you can see, the Content-Type is correct (PDF in our case, It can be any other if you are displaying any other mimetype), but a download prompt is forced with the Content-Disposition: attachment header.

Websites can force the browser to display a download prompt through HTTP(S) headers, by sending either Content-Type: application/octet-stream or Content-Disposition: attachment.

So, the work around for this problem is to set the Content-Disposition: inline.

• an inline content-disposition, which means that it should be automatically displayed when the message is displayed, or
• an attachment content-disposition, in which case it is not displayed automatically and requires some form of action from the user to open it.

To set the Content-Disposition response header, add below code to your OData service's Get_Stream method:

data:  ls_header  TYPE ihttpnvp.

ls_header-name = 'content-disposition'.

ls_header-value = 'inline; filename=entity.pdf'.

/iwbep/if_mgw_conv_srv_runtime~set_header( ls_header ).

Just refresh your PDF page and your are done.

This time the console entry will look like:

Content-Type: application/pdf Content-Disposition: inline; filename="entity.pdf"

At UI5 side:

View:

<core:HTML id="pdfContainer" ></core:HTML>

Controller:

var oContainer = this.getView().byId("pdfContainer");

var oContent = "<iframe src='http://localhost:11220/QuotApp/folder/form.pdf&embedded=true"

+ "style='width:600px; height:500px;' frameborder='0'></iframe>";

Cheers