HTML embedded PDF iframe

html pdf iframe internet-explorer-8

467,067

Solution 1

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).

Solution 2

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>

Solution 3

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>

Solution 4

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>

View more solutions

467,067

Author by

user2931470

Updated on January 11, 2022

Comments

user2931470 over 2 years
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?
user2931470 over 10 years

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?
Adriano Repetti over 10 years

Yes...not using an "iframe"! Use "object" where you can provide an error message (or an alternate view, see last part of my answer).
user2931470 over 10 years

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.
Adriano Repetti over 10 years

It's same now but you have to apply style to EACH nested element (html, body, object). As usual...
QFDev over 9 years

Does embedding in an object work on Chrome Mobile for Android?
QFDev over 9 years

@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.
QFDev over 9 years

For anyone struggling to get consistent behaviour on mobile browsers see here, this helped me: stackoverflow.com/questions/7437602/…
TimNguyenBSM about 9 years

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?
Adriano Repetti about 9 years

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).
Miguel over 7 years

Now how to trigger print on that object, Print is not defined?
mdmb about 6 years

This one would work like charm, but I get plenty of No Preview Available using docs
MagTun almost 6 years

@Ancinek, did you replace the two your_url_to_pdf in mgutt (the one in object data and the one in google.com/viewer?
Venomoustoad almost 6 years

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 almost 6 years

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.
Terry H over 5 years

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.
user264675 over 4 years

I used above code scrollbar not showing in Ipad devices .scroll-container { max-height: 250px; overflow: auto; -webkit-overflow-scrolling: touch; }
Chad Scira about 4 years

Works well, and you can right click it, and choose print.
Bangkokian almost 4 years

It looks like the Google viewer kills any internal bookmarks within the document.
Jay Gray almost 3 years

works like a charm. initially missed the bit: &embedded=true
Deian over 2 years

this sounds like an ad ...
pythonjsgeo over 2 years

I found this was sometimes extremely slow to render pages, it would often take 30s-60s to slowly render each element of the PDF and during that time elements would appear distorted and incomplete until finished. That was for a PDF around 3MB in size with around 10 pages. Is this typical>
Drazen Bjelovuk over 2 years

Why an <object> within an <iframe>? Why not just an object?
Adriano Repetti over 2 years

@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.
FloppyNotFound about 2 years

This is the only solution I could make work without firefox prompting to download the document. Thanks so much for this!
HuN almost 2 years

+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).