CODEWITHSUNDEEP
htmliframegoogle-chrome-devtoolswebserverembed
patchie
patchie

Reputation: 664

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

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: enter image description here

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:

enter image description here

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

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:

enter image description here

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. enter image description here

Upvotes: 7

Views: 24855

Answers (4)

sariDon
sariDon

Reputation: 7971

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>

Upvotes: 1

Eugenio
Eugenio

Reputation: 623

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.

Upvotes: 2

Mahesh Kumar Ronde
Mahesh Kumar Ronde

Reputation: 78

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

Upvotes: 4

ProDec
ProDec

Reputation: 5410

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.

Upvotes: 3

Related Questions