PDF Embedded in <object> or <embed> tag not loading in IE 11

jquery html pdf embed galleriffic

65,070

Solution 1

I was now able to embed the PDF file IE using "<iframe>" tag.

I replaced "<object>" and "<embed>" tag with <iframe> and its working fine now with all 3 browsers, Firefox, Chrome and IE.

There are 2 ways of embedding PDF in IE.

1st way: Call PDF directly in <iframe>

Below is the updated code:

<div id="pdf">
   <iframe src="https://www.adobe.com/products/pdfjobready/pdfs/pdftraag.pdf" style="width: 100%; height: 100%;" frameborder="0" scrolling="no">
        <p>It appears your web browser doesn't support iframes.</p>
   </iframe>
</div>

2nd way: if the browser doesn't have PDF reader the u can call an HTML page in <iframe> which contains <object> tag .

Below is the code for 2nd option

    <div id="pdf">
          <iframe src="pdf.html" style="width: 100%; height: 100%;" frameborder="0" scrolling="no">
               <p>It appears your web browser doesn't support iframes.</p>
          </iframe>
   </div>

Code for "pdf.html"

<body>
    <object data="lorem.pdf" type="application/pdf">
        <p>It appears you don't have Adobe Reader or PDF support in this web browser. <a href="lorem.pdf">Click here to download the PDF</a>. Or <a href="http://get.adobe.com/reader/" target="_blank">click here to install Adobe Reader</a>.</p>
       <embed src="lorem.pdf" type="application/pdf" />
    </object>
</body>

This worked for me!!!

Here is the WORKING Fiddle : http://jsfiddle.net/stmjvz4f/

Hope it will be helpful for others in future!

Solution 2

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 all the way back to 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");

Solution 3

Don't put a 'type' attribute in the <object>, just in <embed> like this: The type attribute in <object> caused a permission error from Adobe Reader in IE11.

<object data="mydocument.pdf">
<p><a href="mydocument.pdf">Download</a></p>
<embed type="application/pdf" src="mydocument.pdf" />
</object>

You don't have to put this in an iframe. It can show controls, so I don't think it will work inside a slider as expected.

65,070

Author by

UID

Updated on October 04, 2020

Comments

UID over 3 years

I have to create an Image slider for which I am using:

"Galleriffic plugin > http://www.twospy.com/galleriffic/",

in the Image slider, along with images, I have to show PDFs for some cases.

And to show that, I am putting the <div> which embeds PDF inside "<div class="caption">" where you can show the description related to the image.

For the Slider with PDF, you can see the full code here: http://jsfiddle.net/Z99gr/2/

I am trying to embed the PDF using <object> or <embed> tag, It works fine in Chrome and Firefox. BUT not in IE11.

I am not able to understand what is missing as I have create one more fiddle with just one div which embeds the PDF and its works fine in all three browser, Chrome, Firefox and IE11.

http://jsfiddle.net/dmAM3/1/

Please look into the issue and suggest ASAP what am I missing for IE 11.

Thanks!
UID over 10 years

I did try that too... even this is not working.. .and another issue with PDF Ovject is its playing with ID... and as I mentioned mine is image slider.. so I have to show couple of PDFs so I get error as there are more than one div having same ID...and this JS doesnt support class...
UID over 10 years

Thanks for looking into the issue, I tried PDFObject but it didnt work, i was able to do it by simply using <iframe>... and it worked... no pluggins required
Stephan almost 6 years

The 1st way is with the URL of the pdf set in the src attribute. On your 2nd approach you use the file directly. IE11 seems to have an issue (security constraint) passing a url or blob to the object or embed element.