8

Here is the Fiddle link "http://jsfiddle.net/Z99gr/2/" which similar to my code, I have created a Image slider using Galleriffic. In the image slider along with images I am showing PDF embedded.

The Fiddle link and my image slider works fine in Chrome and Firefox, but in IE I its not loading. I am testing in IE 11

In IE, when I open the "DOM Explorer (F12 - debug tool of IE)" and selects the <div> which contains the <embed> tag for PDF, it show below code.

   <div id="pdf">
        <embed width="500" height="375" src="https://www.adobe.com/products/pdfjobready/pdfs/pdftraag.pdf" type="application/pdf">
        </embed>
    </div>

And when I just edit anything in this HTML TAG within the "DOM Explorer (F12 - debug tool of IE)", it loads the PDF.

This is a very weird nature of this issue.

I don't understand how to fix this issue.

Please suggest!

I am getting below results inm IE11:

enter image description here

Where as the results should be something like this (its a screencapture from Chrome): enter image description here

UID
  • 4,434
  • 11
  • 45
  • 75
  • It is working fine for me in IE11. Have you tried turning off all add ons – mseifert Jan 24 '14 at 19:37
  • @mseifert: Are you checking the same Fiddle "http://jsfiddle.net/Z99gr/2/"? – UID Jan 24 '14 at 19:38
  • Yes, (not the link in the comment has an extra quote mixed into it)/ – mseifert Jan 24 '14 at 19:42
  • 1
    Correction, it is working if you remove all gallery code and leave divs and embedded pdf, I am working to see what is conflicting with it. – mseifert Jan 24 '14 at 20:30
  • Thanks!!.. yeah I tried that too... if you add just the PDF with DIV.. it will show.... the issue is with Galleriffic code.. which i tried to find a lot.. but not able to... – UID Jan 24 '14 at 20:33
  • Odd. It's now working in IE11 for me using your fiddle. Did you change anything? Have you checked your path references to your libraries? – mseifert Jan 24 '14 at 20:50
  • I didnt change anything... how come its now working?? which path to reference libraries you mean??? – UID Jan 24 '14 at 20:52
  • It not working for me still!!! :( – UID Jan 24 '14 at 20:57
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/46042/discussion-between-at-uid-and-mseifert) – UID Jan 24 '14 at 20:57

4 Answers4

26

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 in page <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/Z99gr/9/

Hope it will be helpful for others in future!

UID
  • 4,434
  • 11
  • 45
  • 75
0

To anyone that has this issues in the future, you have to turn off compatibility mode for intranet sites.

Tools > Compatibility View Settings > Uncheck "Display Intranet sites in Compatibility View"

Developer tools overrides the compatibility view and displays the page in IE11. Compatibility makes the page display as IE5

Haros
  • 25
  • 1
  • 9
-1

Found a fix that worked for me...

I was using IE11, Win7 enterprise, and latest version of adobe reader XI which I had just updated.

The website I had a problem with, was using <object></object> to do the imbedded PDF (it was a CQ5 component, if that matters).

I didn't have to modify the html -- this is what i did:

1) Go to internet options in IE

2) Go to Advanced

3) Click "Reset...". I also clicked "delete personal settings" since I mainly use IE for testing web development so there's no much there...

4) Requires computer restart, so do that.

5) When you are back in, open IE11.

6) It will prompt you if you want to use it's default settings/accelerators. I said YES (i usually always said NO to this, in the past).

7) Open site, and enjoy success.

It also fixed this example site for me, so I know something good happened. http://acroeng.adobe.com/Test_Files/browser_tests/embedded/embed2.html

I tried doing the "TabProcGrowth" fix in the registry (some other solution i found earlier), but that didn't work either. Only resetting IE to scratch worked for me.

Ralph N
  • 4,240
  • 8
  • 28
  • 36
-1

Solution: Install adobe acrobat reader.

It appears to me that IE uses whatever reader is installed to view embedded or natively opened PDFs, whereas chrome, edge and other modern browsers comes with a PDF viewer of sorts.

gunslingor
  • 1,358
  • 12
  • 34