95

I have used the tag to embed a pdf file. 

<iframe id="iframepdf" src="files/example.pdf"></iframe>

This works fine in Chrome, IE8+, Firefox etc, but for some reason, when some people are viewing it in IE8, the files are downloading instead of embedding. I know this browser is outdated but it is the standard browser within my office and as such, the website has to be designed for this.

Does anyone have any ideas on why this is happening, how I can fix it or else put an error message instead of letting the files download?

K J
  • 8,045
  • 3
  • 14
  • 36
user2931470
  • 959
  • 1
  • 7
  • 3
  • Probably look also at this [tutorial](https://jsgyan.blogspot.com/2017/12/how-to-display-pdf-in-html-web-page.html) or [question](https://stackoverflow.com/questions/291813/recommended-way-to-embed-pdf-in-html?rq=1) – Flimtix Apr 04 '22 at 12:32

5 Answers5

117

It's downloaded probably because there is not Adobe Reader plug-in installed. In this case, IE (it doesn't matter which version) doesn't know how to render it, and it'll simply download the file (Chrome, for example, has its own embedded PDF renderer).

If you want to try to detect PDF support you could:

  • !!navigator.mimeTypes["application/pdf"]?.enabledPlugin (now deprecated, possibly supported only in some browsers).
  • navigator.pdfViewerEnabled (live standard, it might change and it's not currently widely supported).

2021: nowadays the original answer is definitely outdated. Unless you need to support relatively old browsers then you should simply use <object> (eventually with a fallback) and leave it at that.

That said. <iframe> is not best way to display a PDF (do not forget compatibility with mobile browsers, for example Safari). Some browsers will always open that file inside an external application (or in another browser window). Best and most compatible way I found is a little bit tricky but works on all browsers I tried (even pretty outdated):

Keep your <iframe> but do not display a PDF inside it, it'll be filled with an HTML page that consists of an <object> tag. Create an HTML wrapping page for your PDF, it should look like this:

<html>
<body>
    <object data="your_url_to_pdf" type="application/pdf">
        <div>No online PDF viewer installed</div>
    </object>
</body>
</html>

Of course, you still need the appropriate plug-in installed in the browser. Also, look at this post if you need to support Safari on mobile devices.

Why an HTML page? So you can provide a fallback if PDF viewer isn't supported. Internal viewer, plain HTML error messages/options, and so on...

It's tricky to check PDF support so that you may provide an alternate viewer for your customers, take a look at PDF.JS project; it's pretty good but rendering quality - for desktop browsers - isn't as good as a native PDF renderer (I didn't see any difference in mobile browsers because of screen size, I suppose).

Adriano Repetti
  • 65,416
  • 20
  • 137
  • 208
  • is there any way to only show the iframe if there is the Adobe Reader plug-in installed, and show an error message if it isn't? – user2931470 Oct 29 '13 at 10:04
  • Yes...not using an "iframe"! Use "object" where you can provide an error message (or an alternate view, see last part of my answer). – Adriano Repetti Oct 29 '13 at 10:06
  • 1
    This is now working, but the file is zoomed way in? I was using iframe as this allowed for the pdf to fit to the width of the div. – user2931470 Oct 29 '13 at 10:10
  • It's same now but you have to apply style to EACH nested element (html, body, object). As usual... – Adriano Repetti Oct 29 '13 at 10:12
  • Does embedding in an object work on Chrome Mobile for Android? – QFDev Jan 12 '15 at 09:41
  • @Adriano_Repetti unfortunately Chrome Mobile appears to be missing the native PDF viewer. When I embed in an `` it renders a grey box with the text "This plugin is not supported". I am now looking to see if a plugin can be installed on the mobile device. – QFDev Jan 12 '15 at 14:49
  • 3
    For anyone struggling to get consistent behaviour on mobile browsers see here, this helped me: http://stackoverflow.com/questions/7437602/how-to-display-a-pdf-via-android-web-browser-without-downloading-first – QFDev Jan 12 '15 at 15:30
  • This is a pretty old thread. Implemented the standard iframe and not seeing any issues on the most common browsers. Did time fix the compatibility issues? Is @adriano solution still required? – TimNguyenBSM Apr 29 '15 at 21:18
  • iframe isn't for *compatibility* (that's what embed nested inside object is for and IMO yes it can be dropped) bit to provide a fallback when there is not an installed plug in (or for specific configurations tricks). – Adriano Repetti Apr 30 '15 at 14:56
  • do embed and object tags only work for a specific set of file types. I tried going through the docs to try and get the right type . My files are in various different sub-formats from doc, docx, pdf. iana.org/assignments/media-types/media-types.xhtml – Venomoustoad Jul 12 '18 at 23:11
  • i am currently consistently getting an error- saying plugin is not supported for some of these formats. It seems to work for simple img/ jpeg formats. – Venomoustoad Jul 12 '18 at 23:11
  • 1
    Why an `` **within** an ` – Drazen Bjelovuk Dec 10 '21 at 22:09
  • 1
    @DrazenBjelovuk this is a pretty old thread, unless you need to support very old versions of Safari and/or to provide an alternative renderer (no, I definitely wouldn't go with Google Docs as fallback) then you _probably_ do not need the HTML page any more. It could be a bit of a PITA to test but nowadays simply `` should do. – Adriano Repetti Dec 12 '21 at 11:33
  • +1. I tried a lot of options and the only way I could display a PDF *fetched via API calls* is by using an `` element like you said. All other options I have read only work if the PDFs are part of the frontend application (i.e. local files, not something fetched from a remote server). – HuN May 24 '22 at 14:49
52

If the browser has a pdf plugin installed it executes the object, if not it uses Google's PDF Viewer to display it as plain HTML:

<object data="your_url_to_pdf" type="application/pdf">
    <iframe src="https://docs.google.com/viewer?url=your_url_to_pdf&embedded=true"></iframe>
</object>
mgutt
  • 5,867
  • 2
  • 50
  • 77
  • 2
    This one would work like charm, but I get plenty of `No Preview Available` using docs – mdmb Mar 05 '18 at 10:35
  • @Ancinek, did you replace the two `your_url_to_pdf` in mgutt (the one in object data and the one in `google.com/viewer?` – MagTun Jul 02 '18 at 10:29
  • 1
    I used above code scrollbar not showing in Ipad devices `.scroll-container { max-height: 250px; overflow: auto; -webkit-overflow-scrolling: touch; }` – user264675 Nov 20 '19 at 20:28
  • It looks like the Google viewer kills any internal bookmarks within the document. – Bangkokian Jun 07 '20 at 16:11
20

Try this out.

<iframe src="https://docs.google.com/viewerng/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" frameborder="0" height="100%" width="100%">
</iframe>
Bilal A.Awan
  • 290
  • 3
  • 7
19

Iframe

<iframe id="fred" style="border:1px solid #666CCC" title="PDF in an i-Frame" src="PDFData.pdf" frameborder="1" scrolling="auto" height="1100" width="850" ></iframe>

Object

<object data="your_url_to_pdf" type="application/pdf">
  <embed src="your_url_to_pdf" type="application/pdf" />
</object>
Muddasir Abbas
  • 1,699
  • 1
  • 20
  • 37
  • 3
    Now how to trigger print on that object, Print is not defined? – Miguel Dec 14 '16 at 12:43
  • 2
    The iFrame solution here is just what I needed to display a PDF generated by an MS MVC backend service and returned as a view. I tried all the other solutions and for some reason none of them worked. – Terry H Dec 07 '18 at 19:44
  • This is the only solution I could make work without firefox prompting to download the document. Thanks so much for this! – FloppyNotFound Mar 28 '22 at 11:45
  • 1
    The object will still show the pdf as an image. If your pdf has multiple pages you'll only see the first page. – Enrico Aug 31 '22 at 10:27
-1

In my case I set the link directly and it's working fine.

<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
</head>
<body>
    <h1>Online HTML Editor</h1>
    <div>This is real time online HTML Editor</div>
    <iframe id="if1" width="100%" height="900" style="visibility:visible" src="https://www.africau.edu/images/default/sample.pdf"></iframe>
</body>
</html>

enter image description here

Note: The above code working in html file not working on this stack overfolow in this snippest

Ahmed Sbai
  • 10,695
  • 9
  • 19
  • 38
Ganesan J
  • 539
  • 7
  • 12
  • Oh Sorry Sir . I didn't see the question correctly . I answered for show pdf in chrome and other browser only – Ganesan J Mar 10 '23 at 07:54