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?
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).
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>
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>
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>
Use Adobe Embed PDF API. This is the solution i used in the end, Works perfectly.
Related
There's a section on my site where I display data from another site, using:
<embed src="URL"></embed>
I recently discovered that this works fine for most people, but that Firefox users get an error telling them they need to install a plugin. I searched around for a solution and people seemed to find that specifying the MIME type worked:
<embed type="text/html" src="URL"></embed>
But this isn't working. I can switch to iFrames, but I dislike how they display the information. Any other suggestions?
Per spec, embed elements are only handled via plug-ins or an SVG renderer (and in the latter case behave just like iframe).
You can do <object data="URL"></object>, but of course that will also behave like iframe...
I've been having the same issue with an html5 game. It appears that Firefox doesn't support if you want to embed an external html file. This tag should only be used for plugins.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed
To embed an external html file into another page in Firefox you have to use iframe or object tags instead. For the interactive nature of my external page I used iframe and it worked in IE / Chrome and FF, I had to make the margins larger than the game itself.
I want to display pdf file view in a division on a webpage for reading. I was using iframe for that. But as i searched about it. iframe is deprecated in html5.
Any other compatible(non flash and if possible not html5) way to show pdf content on webpage just like a pdf displayed with an iframe?
The <iframe> is not deprecated at all. At least, the current HTML5 spec draft on <iframe> doesn't say anything about deprecation. In the future please read the specification itself before making ungrounded assumptions.
There's however an alternative to the <iframe> which allows graceful degradation: the <object> tag which in the below example gracefully degrades to a link when the specified content type is not supported by the browser nor any of its plugins (you know, displaying a PDF file inline requires the Acrobat Reader plugin).
<object data="/url/to/file.pdf" type="application/pdf" width="500" height="300">
Download file.pdf
</object>
This is a perfectly acceptable use of an iframe. It has not been deprecated in HTML5, it even has three new tags (sandbox, seamless, and srcdoc). Or you can use <object> as the other answer suggests.
I am trying to embed a PDF in an HTML document, but this seems to work only with Chrome. Other browsers appear to either require plugins or require a user to click a link which is not what I want. Here is what I have tried:
<object data="pdfFiles/interfaces.pdf" type="application/pdf">
<embed src=" pdfFiles/interfaces.pdf" type="application/pdf"> </embed>
alt :<a href="pdfFiles/interfaces.pdf">
</object>
Here is the code you can use for every browser:
<embed src="pdfFiles/interfaces.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">
Tested on firefox and chrome
<iframe src="http://docs.google.com/gview?url=http://example.com/pdf.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>
Google docs allows you to embed PDFs, Microsoft Office Docs, and other applications by just linking to their services with an iframe. Its user-friendly, versatile, and attractive.
This works perfectly and this is official html5.
<object data="https://link-to-pdf"></object>
do you know about http://mozilla.github.io/pdf.js/ it is a project by mozila to render pdf inside of your html using canvas. it is super simple to use.
I recommend using PDFObject for PDF plugin detection.
This will only allow you to display alternate content if the user's browser isn't capable of displaying the PDF directly though. For example, the PDF will display fine in Chrome for most users, but they will need a plugin like Adobe Reader installed if they're using Firefox or Internet Explorer.
At least PDFObject will allow you to display a message with a link to download Adobe Reader and/or the PDF file itself if their browser doesn't already have a PDF plugin installed.
FlexPaper is probably still the best viewer out there to be used for this kind of stuff. It has a traditional viewer and a more turn page / flip book style viewer both in flash and html5
http://flexpaper.devaldi.com
I want to display the contents of PDF file in a webpage. I don't want the browser to download when the user clicks.
Use the Google PDF Viewer:
<iframe src="http://docs.google.com/gview?url=URL_TO_YOUR_PDF&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
You could embed the adobe acrobat plugin inside your markup. Of course the user must have installed some the appropriate plugin in his browser for this to work. Another possibility is to set your server side script to send proper HTTP headers to instruct the browser embedding the file.
You aren't going to be able to control the browser config from the server side. Some people's browsers will be configured to show PDFs inline, and others won't.
What you can do (reading this as a programming question) is to convert the PDF to HTML and deliver the results. Apache PDFBox might prove useful for such an effort.
Use an <iframe>.
<iframe src="/url/to/file.pdf" width="500" height="300"></iframe>
Or an <object> when you're actually using XHTML.
<object data="/url/to/file.pdf" type="application/pdf" width="500" height="300">
alt : file.pdf
</object>
Note that the above is not supported by the ancient browsers, the above construct would let them degrade gracefully to a plain vanilla link.
I'm attempting to embed a PDF file into a HTML page using the object tag. The following HTML crashes Firefox 3.0.7:
<object id="pdfObject40" type="application/pdf" data="/file.ashx?id=40" width="432" height="600">
<param name="src" value="/file.ashx?id=40" />
</object>
I don't have a problem in Internet Explorer.
Check the MIME-type the ‘file.ashx’ script is returning. If it's something other than application/pdf, or Content-Disposition is getting sent, there might be wrinkles.
Otherwise, it can only be (a) something odd in the document — do other documents load OK? — or (b) your setup.
In any case I would personally avoid ever embedding a PDF in a web page. A PDF plugin is a pretty inconvenient way to view a document, and the Adobe Reader plugin in particular is both historically awfully unreliable in IE, and also an ongoing security disaster. I'm advising all my clients to uninstall it ASAP.
I ended up using that code for IE and failing over to a link with a about:blank in Firefox. If any has a solution, feel free to add. I'll accept it down the road.
Incase anyone else has this problem, I ended up using object element tag with Firefox and embed element tag with everything else.
I think if I'd not been serving the PDF through an .ashx I could have used the embed tag for everything.
See: http://blogs.adobe.com/pdfdevjunkie/2007/08/using_the_html_embed_tag_to_di.html