I need to display a PDF on a website and have it embedded inline.
The following code works if the data attribute is local, but not remote. I just get a large grey box in place of the PDF. I'm open to any solution as long as it works in all browsers. We are using Rails 3 and jQuery.
<object data='https://remotesite.com/uploads/pdf/5/mypdf.pdf' type='application/pdf' width='100%' height='100%'>
<p>
It appears your Web browser is not configured to display PDF files.
No worries, just <a href='https://remotesite.com/uploads/pdf/5/mypdf.pdf'>click here to download the PDF file.</a>
</p>
</object>
Thanks,
Nick
I tried this. works fine. just the link you supported is not OK. (I cannot reach\download that pdf other way)
But you can try this also:
<iframe src="http://people.seas.harvard.edu/~chong/pubs/oopsla04.pdf" width="100%" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
your code worked fine with this pdf I used for the iframe.
(i tested both on chrome and internet explorer)
Related
I have a basic html code to preview some pdf
<iframe src="file.pdf" />
But from time to time, should depend on the user browser config the file is downloaded and nothing is displayed in the preview. Is there any way to force the preview ?
I also tried
<object data="file.pdf" type="application/pdf">
<embed src="file.pdf" type="application/pdf" />
</object>
But not compatible on all browser
This is the older way of doing it. Now these methods have started to be deprecated.
Few methods by which you can implement this is:
Google Docs Embed
You can upload the file on google docs and get the embed link from the share option and embed it into the site using iframe.
Pdf.js
This is a library in javascript that helps in dealing with pdf files.
I am embedding a PDF via the Object tag like so:
<object data="data:application/pdf;base64,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Ov13tp/GVErPAwLG7+zmXwIASMmP2r96wPxefdN4x/LAeb9WdltedrMfW1JBzFlcdZMbzV9VNTdwKntKXdWGSlVrvbb8Wwu2pCQk4ltcQpWO3tSm4fDlFB2/nWnhaTR0Rnca2+wpFYq2tnaFvP2stcsVp00ub1doDzHkDFNa7KclHlfFTt21NZBaAeBk/LeyOwliVn8yzRp9Y3Yo2vN4+CC6YFfzR1ZnZ6FZlvPVgW84Fe7lY0aSUptaJ55yiH0tlFWnjGJnq9kmKtXeOEpSE35hsB1MzLLXZh+hDFVJWPY26qsOmRI2mBrNBjKze6+ej+fRKQtizGKyhUD3qJHtDdmHmBKba54hGB91sBzuw7ZlGW/RxejGLKZ8AeSz+SOkkEeOc/k8ks2g5jGCLspB5hgUTs5pXQ5AbA7Lwv4DIeYF7H6A/bFmbcmPRCqcYL32v9CFLnSh/0f9CjHCsjsKZW5kc3RyZWFtCmVuZG9iagoxMiAwIG9iagoxNjkyCmVuZG9iagoxMyAwIG9iago8PAovTGVuZ3RoIDE0IDAgUgo+PgpzdHJlYW0K////AAAAHx8fPz8/f39/39/fv7+/n5+fX19fGBgYQEBANjY2bGxs/Pz8KCgofn5+hoaG9vb2NDQ08PDwiIiIOjo6cHBwCmVuZHN0cmVhbQplbmRvYmoKMTQgMCBvYmoKNjkKZW5kb2JqCjE1IDAgb2JqCjw8Cj4+CmVuZG9iagoxNiAwIG9iago2OQplbmRvYmoKMTcgMCBvYmoKPDwKL1RpdGxlICgvdG1wL21hZ2ljay1YWFFiZ1ZONikKL0NyZWF0aW9uRGF0ZSAoRDoyMDE0MDExOTExMzQ0MCkKL01vZERhdGUgKEQ6MjAxNDAxMTkxMTM0NDApCi9Qcm9kdWNlciAoSW1hZ2VNYWdpY2sgNi41LjQtNyAyMDEyLTA1LTA3IFExNiBPcGVuTVAgaHR0cDovL3d3dy5pbWFnZW1hZ2ljay5vcmcpCj4+CmVuZG9iagp4cmVmCjAgMTgKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4gCjAwMDAwMDAwNTkgMDAwMDAgbiAKMDAwMDAwMDExOCAwMDAwMCBuIAowMDAwMDAwMzAwIDAwMDAwIG4gCjAwMDAwMDAzODMgMDAwMDAgbiAKMDAwMDAwMDQwMSAwMDAwMCBuIAowMDAwMDAwNDM5IDAwMDAwIG4gCjAwMDAwMDA0NjAgMDAwMDAgbiAKMDAwMDAwMzg4NyAwMDAwMCBuIAowMDAwMDAzOTA3IDAwMDAwIG4gCjAwMDAwMDM5MzUgMDAwMDAgbiAKMDAwMDAwNTc2OCAwMDAwMCBuIAowMDAwMDA1Nzg5IDAwMDAwIG4gCjAwMDAwMDU5MTMgMDAwMDAgbiAKMDAwMDAwNTkzMiAwMDAwMCBuIAowMDAwMDA1OTU0IDAwMDAwIG4gCjAwMDAwMDU5NzMgMDAwMDAgbiAKdHJhaWxlcgo8PAovU2l6ZSAxOAovSW5mbyAxNyAwIFIKL1Jvb3QgMSAwIFIKPj4Kc3RhcnR4cmVmCjYxNjcKJSVFT0YK"
type="application/pdf" width="100%" height="400">
</object>
It works perfectly in Chrome; however, it doesn't show up in IE!
This is the JS Fiddle so you can see for yourself:
http://jsfiddle.net/KGfUm/
How can I make it work in IE and Chrome?
Currently PDF can't be displayed in IE without Adobe Reader or some 3rd party plugin. I think this is the cause of issue
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.
I have a very simple html page with following content:
<embed width="260" height="282" src="rtuner.wmv" showstatusbar="true" showgotobar="true" showdisplay="true" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" type="application/x-mplayer2" name="rTuner" />
Note that 'src' attribute of embed element takes a relative url. This very simple html element plays the video in older browsers like Firefox 10, IE8 etc., but it doesn't play in FF 17 and Chrome 27. If 'src' attribute is assigned a absolute URL then the video works again.
Any ideas why so?
EDIT: Observed Firebug console shows this warning - 'Error: Permission denied to access object'. Does this message give any hint?
It's an WMP plugin issue. If browsers have old wmp plugin npdsplay.dll, a new wmp plugin np-mswmp.dll has to be installed. http://kb.mozillazine.org/Windows_Media_Player
If you want to embed a video, do it like this..
First, click on the desired video in youtube and click on share
Next, you click on Embed button
Now you just copy the code that youtube has provided and paste it in your code..This will make the video appear in your web page..
Try it..
<h1>Video examples:</h1>
<iframe src="https://www.youtube.com/embed/j6gNKR0TMMo"></iframe>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/error-lolcat-problemz.jpg">
<embed src="https://www.youtube.com/embed/j6gNKR0TMMo" width="1000" height="600">
<h1>Image examples:</h1>
<h1>Link examples:</h1>
Link
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