How to embed a PDF?

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>

In order to display PDFs in webpages, you need a plug-in. Chrome just happens to have one built-in. — gen_Eric, Feb 04 '13 at 15:36
Is there a reason why you don't just add a hyperlink? e.g. `Relais D2D` — scunliffe, Feb 04 '13 at 15:36
@scunliffe I didnt want hyperlink as i just wanted the user to open the pdf file in the browser with pdf embedded inside a different page — , Feb 04 '13 at 15:38

score 61 · Answer 1 · answered Feb 04 '13 at 16:15

61

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

answered Feb 04 '13 at 16:15

Vuk Vasić

1,398
10
27

score 56 · Answer 2 · edited Jul 01 '22 at 11:56

56

<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.

edited Jul 01 '22 at 11:56

Stephen Ostermiller

23,933
14
88
109

answered Apr 28 '15 at 15:00

John Foley

4,373
3
21
23

6

IMHO this is the best answer. The top-voted one will be browser dependent, and will use the available plugin. By using google viewer , a consistent experienced is guaranteed. – Shaunak Feb 01 '16 at 18:22
6

Note that this probably only works if the file in question isn't behind a password or other kind of wall. – starbeamrainbowlabs Apr 06 '16 at 14:30
16

This is bad if you are on an intranet without internet access. – CesarD May 21 '16 at 09:42
10

I don't understand how a proprietary solution is the best answer. If you have to work on device that doesn't have access to google docs you are just out of luck... Back to IBM times... – Gi1ber7 Jun 01 '17 at 18:14
11

A no go when the pdf needs to remain private ... which probably covers a majority of use cases, if not a significant chunk. – David Simic Sep 26 '18 at 00:47
1

Google no longer allows you to embed this service in an iframe, due to serving an "X-Frame-Options: SAMEORIGIN" response header. – Nicole Ashley Mar 03 '21 at 04:28

score 32 · Answer 3 · 2019-01-25T10:35:42.737

32

This works perfectly and this is official html5.

<object data="https://link-to-pdf"></object>

edited Jan 25 '19 at 10:35

answered May 09 '16 at 14:20

1

IT works on every browser but It does not work in Google crome while on mobile devices. – jerryurenaa Jun 01 '21 at 15:00

score 16 · Answer 4 · answered Mar 06 '17 at 23:52

16

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.

answered Mar 06 '17 at 23:52

Herbert Pimentel

425
5
11

if you are using reactJS, check this project https://github.com/wojtekmaj/react-pdf – Herbert Pimentel Nov 24 '20 at 12:27

score 6 · Answer 5 · answered Feb 04 '13 at 16:20

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.

score -2 · Answer 6 · answered Oct 03 '13 at 03:21

-2

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

answered Oct 03 '13 at 03:21

Rob Z

5
1

1

This is now FlowPlayer, and comes with significant restrictions (e.g. 10 page limit) for their free version: https://flowpaper.com/download/ – fooquency Jan 17 '17 at 14:42

How to embed a PDF?

6 Answers6

Linked