0

I'm requesting an API to get an URL to a PDF document. I want it to be displayed in the browser to users, using <object type="application/pdf" data="url-to-pdf"></object>.

So, when I create a link with <a href=""> to the URL the API gave me, a new tab is open in the browser with the PDF, everything works fine. I can even add the download attribute to the <a> and the PDF is downloaded automatically. However, when I put it in an <object>, instead of being displayed at it is the case usually, the PDF is open in a new tab and the <object> element is empty in the screen.

The headers of the response from the API are: enter image description here

And the response itself is binary (which is expected, the file is a PDF).

Does anybody understand why it's not working for this URL specifically? The differences I see in the headers response, compare to a normal PDF that works, is the Content-Disposition attribute, the X-Content-Type-Options: nosniff, the cache-control being private... Can any of this has an effect? I assume it's the Content-Disposition: attachment which is resulting on the file being open in a tab instead of inside the <object>. Is there any way to force this header to be ignored? Can we maybe imagine a hack where we first fetch it in JS and then put the answer back in <object> with data:?

Thanks for your help.

K J
  • 8,045
  • 3
  • 14
  • 36
Fla
  • 536
  • 6
  • 23
  • 1
    `Content-Disposition` is authoritative here. – Quentin May 25 '23 at 13:20
  • Could be possible by intercepting the request using a service worker, and then giving a modified response, I suppose? https://medium.com/@maulanamaleek/intercept-http-request-using-serviceworker-b6ef23f97d1f – CBroe May 25 '23 at 13:42

0 Answers0