CODEWITHSUNDEEP
htmlpdf
user2008608
user2008608

Reputation:

How to embed a PDF?

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>

Upvotes: 55

Views: 219095

Answers (7)

alekswebnet
alekswebnet

Reputation: 46

PDF.js viewer seems like a great solution. Consider using pdfjs-viewer-element to simplify PDF.js setup:

<script type="module" src="https://cdn.skypack.dev/pdfjs-viewer-element"></script>

Specify the PDF.js release directory with viewer-path and path to PDF file with src attributes:

<pdfjs-viewer-element
  id="viewer"
  src="/file.pdf"
  viewer-path="/pdfjs-4.0.379-dist"
  style="height: 600px">
</pdfjs-viewer-element>

More samples for embedding PDF.js https://github.com/alekswebnet/pdfjs-viewer-element/tree/master/demo

Upvotes: 0

John Foley
John Foley

Reputation: 4479

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

Upvotes: 55

user379888
user379888

Reputation:

This works perfectly and this is official html5.

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

Upvotes: 34

Herbert Pimentel
Herbert Pimentel

Reputation: 425

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.

Upvotes: 16

Rob Z
Rob Z

Reputation: 5

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

Upvotes: -2

Chris Peters
Chris Peters

Reputation: 18090

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.

Upvotes: 7

Vuk Vasić
Vuk Vasić

Reputation: 1408

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

Upvotes: 61

Related Questions