Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Recommended way to embed PDF in HTML?

Tags:

html

pdf

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.

like image 275
Daniel Silveira Avatar asked Nov 14 '08 23:11

Daniel Silveira


People also ask

How do you embed a PDF in HTML website?

The easiest way to put PDF in an HTML document is using the <a> tag with its href attribute. You need to add the URL or the reference link of your PDF file to the element.

What is the best way to display a PDF in a web app?

Using a Simple Link It uses an HTML <a> tag which links to the PDF document. This is, on the one hand, is great, as it delegates the responsibility of dealing with the PDF to the platform itself (e.g. your Mac or PC or phone).

Can I iframe a PDF?

The best way I found to display a PDF was to use an iframe. iframe stands for inline frame, and it allows you to embed another HTML document within the current one. You can read more about it here.


2 Answers

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

like image 37
lubos hasko Avatar answered Oct 03 '22 06:10

lubos hasko


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"> 
like image 169
Batfan Avatar answered Oct 03 '22 07:10

Batfan