Openui5: The PDFViewer is not showing the content while downloading is possible

[mjza]

OpenUI5 version: 1.80

Browser/version (+device/version): Latest Chrome

I am trying to use a PDFViewer in a SAPUI5 application, something like the following sample app.

When I try to use this component in Google chrome it will not load the data, however it is possible to download the PDF itself and it shows the url works and file is available.

If I open it in Firefox or IE it works!

[tsanislavgatev]

Hello @mjza,
Thank you for sharing this finding. I've created an internal incident 2070321775. The status of the issue will be updated here in GitHub.

Regards,
Tsanislav

[bhuwanRawat]

Hi @mjza ,

I have tried opening the link provided in the issue. I am able to view the same in chrome as well.

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

The PDF Viewer doesn't show the preview in case of a mobile view.

Thanks,
Bhuwan

[mjza]

@bhuwanRawat It was not in the mobile view mode. When I create a new instance of the chrome and without any extension and not sign in as a user it can open the pdf!
The problem is it does not show any error in the console that I could discover where is the problem.
I even disabled all the extensions on my own chrome and it was not working.
Anyway you can close the ticket if you don't have any more clue.

[codeworrior]

Does the embedded display work when you're using Chrome's Incognito mode?

Did you check your Chrome settings? E.g. open Chrome's settings and search for PDF. There's an entry "Download PDF files instead of automatically opening them in Chrome" which must _not_ be checked.

You should also check whether there is an outgoing request for the PDF, what the response is and whether the response contains a Content-Disposition header and if so, with what value.

When you say "...and not sign in as a user...", do you refer to your Google account or to your application / backend system account?

[mjza]

"...and not sign in as a user..." means not sign in inside Google chrome.
A guest instance of the chrome!
For the rest of the questions I will test and will write the answers here.

[mjza]

1. Inside the Chrome's Incognito the pdf is not shown. We have the problem still.
2. Download PDF files instead of automatically opening them in Chrome" is off.
3. the content-disposition header also is set in the response like this: content-disposition: outline; filename="sample.pdf";

[mjza]

Also I tried to remove the content-disposition in SAP DMS, however then it puts the following value automatically in response header: content-disposition: attachment; filename=entity.pdf

Even with this value it is not loading!

[codeworrior]

Sorry, one more question: can you please type the following in your browser's console:

window.navigator.mimeTypes

and let us know the result? I guess, your Chrome no longer shows "application/pdf" in that list. The renderer of the PDFView uses this property to decide whether the browser supports embedding or not.

I assume this property has been cleaned up by Chrome to protect the user's privacy (to prevent browser fingerprinting).

If this proves to be the reason, then this would be a regression due to a browser update.

BTW: if this is the reason, the PDFViewer should log a warning ("The PDF plug-in is not available on this device."). But by default, warnings are suppressed in productive UI5 versions (like our CDN). You might add ?sap-ui-log-level=WARNING to the URL to verify this.

[codeworrior]

Update: at least in my installation, the content of navigator.mimeTypes depends on the "Download PDF files instead of automatically opening them in Chrome" flag. When set, there's no "application/pdf", when I switch it off, the mime type is there.

[mjza]

@codeworrior
Here is the result for window.navigator.mimeTypes, and it contains application/pdf

MimeTypeArray {0: MimeType, 1: MimeType, 2: MimeType, 3: MimeType, application/pdf: MimeType, application/x-google-chrome-pdf: MimeType, application/x-nacl: MimeType, application/x-pnacl: MimeType, length: 4}
0: MimeType
description: ""
enabledPlugin: Plugin {0: MimeType, application/pdf: MimeType, name: "Chrome PDF Viewer", filename: "mhjfbmdgcfjbbpaeojofohoefgiehjai", description: "", length: 1}
suffixes: "pdf"
type: "application/pdf"
__proto__: MimeType
1: MimeType {type: "application/x-google-chrome-pdf", suffixes: "pdf", description: "Portable Document Format", enabledPlugin: Plugin}
2: MimeType {type: "application/x-nacl", suffixes: "", description: "Native Client Executable", enabledPlugin: Plugin}
3: MimeType {type: "application/x-pnacl", suffixes: "", description: "Portable Native Client Executable", enabledPlugin: Plugin}
length: 4
application/pdf: MimeType
description: ""
enabledPlugin: Plugin {0: MimeType, application/pdf: MimeType, name: "Chrome PDF Viewer", filename: "mhjfbmdgcfjbbpaeojofohoefgiehjai", description: "", length: 1}
suffixes: "pdf"
type: "application/pdf"
__proto__: MimeType
application/x-google-chrome-pdf: MimeType
description: "Portable Document Format"
enabledPlugin: Plugin {0: MimeType, application/x-google-chrome-pdf: MimeType, name: "Chrome PDF Plugin", filename: "internal-pdf-viewer", description: "Portable Document Format", length: 1}
suffixes: "pdf"
type: "application/x-google-chrome-pdf"
__proto__: MimeType
application/x-nacl: MimeType
description: "Native Client Executable"
enabledPlugin: Plugin {0: MimeType, 1: MimeType, application/x-nacl: MimeType, application/x-pnacl: MimeType, name: "Native Client", filename: "internal-nacl-plugin", description: "", …}
suffixes: ""
type: "application/x-nacl"
__proto__: MimeType
application/x-pnacl: MimeType
description: "Portable Native Client Executable"
enabledPlugin: Plugin {0: MimeType, 1: MimeType, application/x-nacl: MimeType, application/x-pnacl: MimeType, name: "Native Client", filename: "internal-nacl-plugin", description: "", …}
suffixes: ""
type: "application/x-pnacl"
__proto__: MimeType
__proto__: MimeTypeArray
item: ƒ item()
length: (...)
namedItem: ƒ namedItem()
constructor: ƒ MimeTypeArray()
Symbol(Symbol.iterator): ƒ values()
Symbol(Symbol.toStringTag): "MimeTypeArray"
get length: ƒ length()
__proto__: Object

[mjza]

I have ran the app with ?sap-ui-log-level=WARNING and there is no warning that contains the word PDF

[mjza]

I compared my response header with the response header of original sample.

It seems the only difference is existence of content-disposition in my SAP odata response. I am trying to remove it, and discover if it is the reason that I cannot load the PDF or not.

At the moment I can load the sample pdf from SAP server but it is not possible to load it from our SAP on-premise server.

[codeworrior]

I was just reaching the same point, yes. At least worth to try it.

[mjza]

We finally found the solution and discovered why the pdf that we try to show from our SAP DMS is downloadable while it is not shown in the pdf viewer inside the modern browsers like Chrome or Firefox.

The source for the solution can find here.

The below two changes are different from normal implementation that can be found in most of the tutorials in the internet:

1. The header value must be changed to Inline;filename= instead of outline;filename.
2. Call the method /IWBEP/IF_MGW_CONV_SRV_RUNTIME=>Set_header to set the header.

Finally we have the following ABAP code in SAP systems for downloading files form document management system (SAP DMS).

"Logic for Download the files from Document Managmenet System
    DATA: ls_lheader TYPE ihttpnvp,
          ls_stream  TYPE ty_s_media_resource,
          ls_entity  TYPE zgw_odata_document_file.

    CONSTANTS: lc_headername  TYPE string VALUE 'Content-Disposition',
               lc_headervalue1 TYPE string VALUE 'inline; filename="',
               lc_headervalue2 TYPE string VALUE '";'.

*    "Get the name of the Entity
    DATA(lv_entity_name) = io_tech_request_context->get_entity_type_name( ).

    CASE lv_entity_name.

      WHEN 'DocumentFile'.
        DATA(lo_document_file) = NEW zcl_gw_odata_document_file( ).
        lo_document_file->read_stream(
          EXPORTING
            it_key_tab = it_key_tab
          IMPORTING
            es_stream  = ls_entity ).

        ls_lheader-name = lc_headername.
        ls_entity-file_name = escape( val = ls_entity-file_name format = cl_abap_format=>e_url ).
        ls_lheader-value = lc_headervalue1 && ls_entity-file_name && lc_headervalue2 .
        set_header( is_header = ls_lheader ).

        ls_stream-mime_type = ls_entity-mimetype.
        ls_stream-value = ls_entity-binfile.
        copy_data_to_ref( EXPORTING is_data = ls_stream
                          CHANGING  cr_data = er_stream ).
      WHEN OTHERS.
    ENDCASE.

[ShivaCharanKoti1991]

adding one more information to solution for ABAP for backend developers:
This time the console entry will look like:

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

in place of 'entity', everytime file name should appear in runtime.