Embed a PDF in HTML5

Question

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">&nbsp; </embed>
                    alt :<a href="pdfFiles/interfaces.pdf">
                </object>

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

<iframe src="http://docs.google.com/gview?url=http://domain.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.

Answer 6

This works perfectly and this is official html5.

<object data="http://www.inspuratesystems.com/clf/wp-content/uploads/2016/05/pdfjoiner.pdf"></object>