IE8 embedded PDF iframe
Asked Answered
W

5

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?

Wildfowl answered 29/10, 2013 at 9:42 Comment(1)
Probably look also at this tutorial or questionAcidity
V
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).

Vitriolize answered 29/10, 2013 at 9:56 Comment(14)
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?Wildfowl
Yes...not using an "iframe"! Use "object" where you can provide an error message (or an alternate view, see last part of my answer).Vitriolize
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.Wildfowl
It's same now but you have to apply style to EACH nested element (html, body, object). As usual...Vitriolize
Does embedding in an object work on Chrome Mobile for Android?Circumambulate
@Adriano_Repetti unfortunately Chrome Mobile appears to be missing the native PDF viewer. When I embed in an <object/> 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.Circumambulate
For anyone struggling to get consistent behaviour on mobile browsers see here, this helped me: #7438102Circumambulate
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?Argilliferous
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).Vitriolize
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.xhtmlDichotomous
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.Dichotomous
Why an <object> within an <iframe>? Why not just an object?Brilliancy
@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 <object> should do.Vitriolize
+1. I tried a lot of options and the only way I could display a PDF fetched via API calls is by using an <object> 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).Sweeps
F
53

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>
Finback answered 20/3, 2017 at 16:22 Comment(4)
This one would work like charm, but I get plenty of No Preview Available using docsXanthochroism
@Ancinek, did you replace the two your_url_to_pdf in mgutt (the one in object data and the one in google.com/viewer?Mammalian
I used above code scrollbar not showing in Ipad devices .scroll-container { max-height: 250px; overflow: auto; -webkit-overflow-scrolling: touch; }Persecution
It looks like the Google viewer kills any internal bookmarks within the document.Felicitation
H
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>
Hughs answered 10/10, 2019 at 11:45 Comment(2)
Works well, and you can right click it, and choose print.Innes
works like a charm. initially missed the bit: &embedded=trueLanilaniard
I
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>
Isoelectronic answered 12/2, 2016 at 12:18 Comment(4)
Now how to trigger print on that object, Print is not defined?Wheresoever
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.Probate
This is the only solution I could make work without firefox prompting to download the document. Thanks so much for this!Tyne
The object will still show the pdf as an image. If your pdf has multiple pages you'll only see the first page.Mendie
P
-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

Pentane answered 9/3, 2023 at 6:26 Comment(1)
Oh Sorry Sir . I didn't see the question correctly . I answered for show pdf in chrome and other browser onlyPentane

© 2022 - 2024 — McMap. All rights reserved.