Recommended way to embed PDF in HTML? – Dev

The best answers to the question “Recommended way to embed PDF in HTML?” in the category Dev.

QUESTION:

What is the recommended way to embed PDF in HTML?

  • iFrame?
  • Object?
  • Embed?

What does Adobe say itself about it?

In my case, the PDF is generated on the fly, so it can’t be uploaded to a third-party solution prior to flushing it.

ANSWER:

Probably the best approach is to use the PDF.JS library. It’s a pure HTML5/JavaScript renderer for PDF documents without any third-party plugins.

Online demo:
https://mozilla.github.io/pdf.js/web/viewer.html

GitHub:
https://github.com/mozilla/pdf.js

ANSWER:

This is quick, easy, to the point and doesn’t require any third-party script:

<embed src="http://example.com/the.pdf" width="500" height="375" 
 type="application/pdf">

UPDATE (2/3/2021)

Adobe now offers it’s own PDF Embed API.

https://www.adobe.io/apis/documentcloud/dcsdk/pdf-embed.html

UPDATE (1/2018):

The Chrome browser on Android no longer supports PDF embeds. You can get around this by using the Google Drive PDF viewer

<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">

ANSWER:

You do have some control over how the PDF appears in the browser by passing some options in the query string. I was happy to this working, until I realized it does not work in IE8. 🙁

It works in Chrome 9 and Firefox 3.6, but in IE8 it shows the message “Insert your error message here, if the PDF cannot be displayed.”

I haven’t yet tested older versions of any of the above browsers, though. But here’s the code I have anyway in case it helps anyone. This sets the zoom to 85%, removes scrollbars, toolbars and nav panes. I’ll update my post if I do come across something that works in IE as well.

<object width="400" height="500" type="application/pdf" data="/my_pdf.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0">
    <p>Insert your error message here, if the PDF cannot be displayed.</p>
</object>

ANSWER:

You can also use Google PDF viewer for this purpose. As far as I know it’s not an official Google feature (am I wrong on this?), but it works for me very nicely and smoothly. You need to upload your PDF somewhere before and just use its URL:

<iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>

What is important is that it doesn’t need a Flash player, it uses JavaScript.