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

Question

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 ?

Whirl

1) The class attribute value should be in quotes. 2) What on earth is that jQuery-ish attribute? 3) In what way are you indicating that this should be in an iframe at all? – Dairymaid

Answer 1

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");

Butterandeggs

That's the point. But it's loading the PDF into an object instead of an iframe. See pdfobject.com/markup/index.php – Secession

What if you don't want the src path of your pdf file exposed in the objects data tag? – Verdure

well wouldn't the src path be shown in an iFrame to? ^ – Prophecy

can this load image file as well..? – Big

Answer 2

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?

Bughouse

Actually i have copied from the IE debugger that's why jquerry and other things are coming ...other wise the class is also within the codes. And it is working fine for mozilla .. – Whirl

i have tried your link and still if you will try to run then it will open the PDF in acrobat reader not in the iframe in IE. But if you will try the same thing in chrome or mozilla then it works fine as intended. But i want to open it in iframe for IE also – Whirl

Works fine in desktop browsers but not in mobile browsers... can you please help me to make it working? – Mascagni

Define "does not work fine". Is it too big ? Just use vh and vw instead of pixels, read more: https://mcmap.net/q/211427/-shape-with-a-slanted-side-responsive – Bughouse

Answer 3

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')

Anaxagoras

Answer 4

The direct PDF didn't work on Mobile phones and it doesn't support responsive UI. Here is the best solution. https://mcmap.net/q/222802/-ie8-embedded-pdf-iframe

Eve

Answer 5

Do it like this: Remember to close iframe tag.

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

Roaster

because it just downloads the pdf instead of previewing – Floria