CODEWITHSUNDEEP
javascripthtmlpdfiframebrowser
user1753210
user1753210

Reputation: 459

How to open a PDF file in an <iframe>?

I want to open the pdf file in an iframe. I am using following code:

<a class="iframeLink" href="https://something.com/HTC_One_XL_User_Guide.pdf"> User guide </a>

It is opening fine in Firefox, but it is not opening in IE8.

Does anyone know how to make it work also for IE ?

Upvotes: 39

Views: 339096

Answers (6)

KJ Price
KJ Price

Reputation: 5964

It's been awhile I know but there has been some changes to PDFObject. According to the docs, this is how you would render a PDF:

<div id="my-pdf"></div>
<script src="https://unpkg.com/pdfobject"></script>
<script>PDFObject.embed("/path/to/file.pdf", "#my-pdf");</script>

Upvotes: 0

Aimanzaki
Aimanzaki

Reputation: 634

The direct PDF didn't work on Mobile phones and it doesn't support responsive UI. Here is the best solution. https://stackoverflow.com/a/66548544/2078462

Upvotes: -1

Atif Tariq
Atif Tariq

Reputation: 2772

Do it like this: Remember to close iframe tag.

<iframe src="http://samplepdf.com/sample.pdf" width="800" height="600"></iframe>

Upvotes: -6

Andrea Ligios
Andrea Ligios

Reputation: 50193

This is the code to link an HTTP(S) accessible PDF from an <iframe>:

<iframe src="https://research.google.com/pubs/archive/44678.pdf"
   width="800" height="600">

Fiddle: http://jsfiddle.net/cEuZ3/1545/

EDIT: and you can use Javascript, from the <a> tag (onclick event) to set iFrame' SRC attribute at run-time...

EDIT 2: Apparently, it is a bug (but there are workarounds):

PDF files do not open in Internet Explorer with Adobe Reader 10.0 - users get an empty gray screen. How can I fix this for my users?

Upvotes: 23

Roey
Roey

Reputation: 1725

It also important to make sure that the web server sends the file with Content-Disposition = inline. this might not be the case if you are reading the file yourself and send it's content to the browser:

in php it will look like this...

...headers...
header("Content-Disposition: inline; filename=doc.pdf");
...headers...

readfile('localfilepath.pdf')

Upvotes: 7

Aamir
Aamir

Reputation: 5440

Using an iframe to "render" a PDF will not work on all browsers; it depends on how the browser handles PDF files. Some browsers (such as Firefox and Chrome) have a built-in PDF rendered which allows them to display the PDF inline where as some older browsers (perhaps older versions of IE attempt to download the file instead).

Instead, I recommend checking out PDFObject which is a Javascript library to embed PDFs in HTML files. It handles browser compatibility pretty well and will most likely work on IE8.

In your HTML, you could set up a div to display the PDFs:

<div id="pdfRenderer"></div>

Then, you can have Javascript code to embed a PDF in that div:

var pdf = new PDFObject({
  url: "https://something.com/HTC_One_XL_User_Guide.pdf",
  id: "pdfRendered",
  pdfOpenParams: {
    view: "FitH"
  }
}).embed("pdfRenderer");

Upvotes: 45

Related Questions