Why does pdf document download instead of showing in a embed/iframe?

Question

We have a internal website where we have some links to pdf documents hosted on the webserver. If i open Chrome Dev-Tools(F12), and inspect the link and add an embed with the same pdf document, it will rather download the file instead of showing it. I have tried with embed and iframe, but i still get the same problem.

Original code:

<a id="id2239" href="http://example.com:8080/client/attachment/filename.pdf" class="act01">filename.pdf</a>

Screenshot:

Code that we would like to work:

<a id="id2239" href="http://example.com:8080/client/attachment/filename.pdf" class="act01">filename.pdf</a>

<div class="fgh"><embed id="fgh" src="http://example.com:8080/client/attachment/filename.pdf" type="application/pdf" width="400" height="400"></div>

Screenshot:

As you can see, it actually downloads the document instead of showing it in the screenshot above. Just shows a white space.

Code that works with another document: I just found a pdf document on google, and put it into the tag, and it works. It shows the document in the embed, and doesn't download the document instead.

<a id="id2239" href="http://example.com:8080/client/attachment/filename.pdf" class="act01">filename.pdf</a>

<div class="fgh"><embed id="fgh" src="http://infolab.stanford.edu/pub/papers/google.pdf" type="application/pdf" width="400" height="400"></div>

Screenshot:

Question:

1. Why is the two examples different? Why does the internal document download, but the external document show embedded in the page?
2. How do i make it work with the file on our webservers as well?

Edit:

Screenshot of the pdf documents headings.

Nolte

The server sends the data with a HTTP header inline-disposition that causes a download. You can strip this header via declarativeNetRequest or webRequest. – Diastyle

@wOxxOm: The original pdf document has this in the heading(the working one doesnt have it at all): "Content-Disposition" = "attachment; filename='filename.pdf'". is it possible to use javascript(greasemonkey) or html to change the HTTP header of the pdf document? Thanks in advance. – Nolte

You can use an extension that modifies headers. – Diastyle

Answer 1

I was facing the same issue. In my case the Content-Type of my files was "binary/octet-stream". I had to manually change it to "application/pdf" to resolve it

Gremlin

Answer 2

It depends on the content type in the response header. You may check if your web server sets proper header information, e.g. Content-Type: application/pdf.

"Chrome Dev-Tools(F12)" -> Network Tab, check the response headers.

Derman

Content-Type of the working one is "application/pdf", the one that is not working has "application/pdf; charset=UTF-8" – Nolte

Content-Type is OK. You need to remove Content-Disposition from server side. If it is not possible and your PDF files are small, less than 1MB for example, probably you could consider to use AJAX call to get the file bytes and convert to base64 string and put it in the <embed src="data:application/pdf;base64,xxxxxx..." type="application/pdf"></embed> #33902799 #9268399 – Derman

I used AJAX to download pdf, and converted to base 64, and used jquery to insert the base into an <embed>. Worked perfect. Used this as explanation on how to find out how it worked: #37787818 – Nolte

Answer 3

Use the <object> tag to embed PDF files in html:

<object id="fgh" data="http://example.com:8080/client/attachment/filename.pdf"  width="400" height="400"></object>

Dentil

Answer 4

You have to change the default behavior for the chrome pdf viewer:

1. In Chrome, click the three dots in the upper right corner of your browser window.
2. Navigate to Settings › Advanced › Privacy and Security.
3. Click Site Settings › PDF Documents.
4. Locate the toggle switch next to “Download PDF files instead of automatically opening them in Chrome.

Ayakoayala