0

Is there anyway at all to generate a preview of a PDF in an IE browser?

I know that you could use an iframe in either Chrome or Firefox, and a blob in IE, but they both require their own code, I'm looking for something that will work cross browsers.

LatentDenis
  • 2,839
  • 12
  • 48
  • 99
  • I'm a bit confused as to why you put emphasis on IE if you're looking for a cross-browser solution. You just want to display a PDF inside a HTML page in a way that works across all (modern) browsers, right? Or what do you mean with "generate a preview"? – Brecht Machiels Apr 07 '16 at 07:42
  • @BrechtMachiels yes, you're correct. – LatentDenis Apr 07 '16 at 12:34
  • I'm no HTML expert, but I think – Brecht Machiels Apr 07 '16 at 12:39
  • @BrechtMachiels, this works fine in Firefox and Chrome, but prompts for download or to "open" file which unfortunately also does NOT open in iframe, so IE is out on the iframe option.. See this in IE: http://mrrio.github.io/jsPDF/ – LatentDenis Apr 07 '16 at 12:44
  • 1
    Can't test on IE (on Mac), but I believe this may be because there is no PDF plugin installed for IE. You might want to handle PDF rendering yourself instead of hoping that the visitor has a PDF plugin installed: https://mozilla.github.io/pdf.js/. This also has some disadvantages though: see the comments to this answer: http://stackoverflow.com/a/291823/438249. – Brecht Machiels Apr 07 '16 at 13:13
  • @BrechtMachiels If the case involved only my computer, I would go about it in that way, yet I have to roll this out so that many other people can use/not worry about plugins. Good resource you posted, but how would that be displayed in the same window as say other content? meaning pretty much the same way it's showing as that link but just like an iframe in a different page? – LatentDenis Apr 07 '16 at 13:19
  • I did this for a website I created. With my limited HTML knowledge, I ended up using an iframe for embedding pdf.js in my page, but there could be better ways. where viewer.html is provided by PDF.js. – Brecht Machiels Apr 07 '16 at 14:56
  • @BrechtMachiels Hey man, I found the solution through tinkering around. I tried your suggestion at the very beginning and like I said, it worked for Chrome and Firefox, but it didn't work for IE. I'll post my solution to this question. – LatentDenis Apr 07 '16 at 20:25
  • @BrechtMachiels could you please upvote my answer too, that would help so much. – LatentDenis Apr 07 '16 at 20:31

1 Answers1

3

Finally found a solution, that generates an in-browser preview window for a PDF file that is supported by all browsers!

Here's my code (I've put in an input box so that anyone could test any PDF URL):

<div class="wizard-content">
     <div class="col-md-6">
          <input id="pdfsrc" class="form-control">
          <a id="refresh" href="#" class="btn btn-lg btn-success">Refresh PDF</a>
     </div>
     <div id="myDiv" class="col-md-6">
          <object id="objsrc" data="" type="application/pdf" style="width:100%;height:100%">
              <embed id="embsrc" src="" type="application/pdf" style="width:100%;height:100%/">
          </object>
     </div>
</div>

JS:

$(function() {
    $("#refresh").click(function() {
        var url=document.getElementById('pdfsrc').value;
        $("#objsrc").attr("data", url);
        $("#embsrc").attr("src", url);
        var container = document.getElementById("myDiv");
        var content = container.innerHTML;
        container.innerHTML = content;
    })
})
LatentDenis
  • 2,839
  • 12
  • 48
  • 99