Workaround of showing a base64 pdf on IE9+

Question

I would like to convert a PDF to base64 and show on browser.

The problem is , the following code works for Firefox and Chrome

<iframe src="data:application/pdf;base64,encodeString></iframe>

But not in IE 9 + , suppose the user is using adobe reader plugin, are there any jquery plugin/workaround that allow embed a base64 pdf on iframe? thanks

Some approach I can think of , convert base64 to other data format? Are there any format that the IE9+ browser iframe support ? thanks — user782104, Sep 05 '13 at 03:44
Looks remarkably similar to http://stackoverflow.com/q/16857678/139010 and http://stackoverflow.com/q/1038922/139010 and http://stackoverflow.com/q/7819366/139010 and http://stackoverflow.com/q/7588262/139010. — Matt Ball, Sep 05 '13 at 03:52
Thanks for reminding, I have looked at that post and it seems not fixing my problem. — user782104, Sep 05 '13 at 03:55
Thanks for more info. , Is that possible to convert the base64 code to some other format (pdf stream ?) and ie9 iframe will support that? — user782104, Sep 05 '13 at 03:57
Possible duplicate of [Saving Base64 encoded PDF with Internet Explorer 10 and below](http://stackoverflow.com/questions/27154606/saving-base64-encoded-pdf-with-internet-explorer-10-and-below) — SanjiMika, Apr 19 '17 at 16:52
I got it working using [this solution](https://stackoverflow.com/a/66643440/5719150) — Kaisumaro, Mar 15 '21 at 18:20
I got it working with [this solution](https://stackoverflow.com/a/66643440/5719150) — Kaisumaro, Mar 15 '21 at 18:23

score 9 · Answer 1 · edited May 17 '17 at 08:51

Note: For IE and other browsers like Mozilla, Chrome this works for me

if (data == "" || data == undefined) {
    alert("Falied to open PDF.");
} else { 
    //For IE using atob convert base64 encoded data to byte array
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        var byteCharacters = atob(data);
        var byteNumbers = new Array(byteCharacters.length);
        for (var i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        var byteArray = new Uint8Array(byteNumbers);
        var blob = new Blob([byteArray], {
            type: 'application/pdf'
        });
        window.navigator.msSaveOrOpenBlob(blob, fileName);
    } else { 
        // Directly use base 64 encoded data for rest browsers (not IE)
        var base64EncodedPDF = data;
        var dataURI = "data:application/pdf;base64," + base64EncodedPDF1;
        window.open(dataURI, '_blank');
    }
}

Thanks @dinesh-rajput, this solution is working for me. I still can't figure out why this should be done on year 2017 ^^ — Tony, Jul 27 '17 at 08:27
How would you apply this code to the following file? https://drive.google.com/file/d/0B-umo7G978pdalJrdVhibHU4Y0k/view?usp=sharing — Daniel L. VanDenBosch, Sep 11 '17 at 16:04

score 3 · Accepted Answer · answered Sep 05 '13 at 08:06

3

As you've noticed, Internet Explorer does not support the use of DATA URIs as the source of IFRAMEs. The only workaround for this is to return your PDF content from a HTTP/HTTPS or FTP URI and use that as the source of the IFRAME.

answered Sep 05 '13 at 08:06

EricLaw

56,563
7
151
196

I don't understand your question. You refer to a PDF in an IFRAME like this: `` – EricLaw Sep 05 '13 at 17:19
can you please elobarate? – Sopo Dec 12 '16 at 09:51
StackOverflow comment threads aren't really the place for new questions. I'm not sure what elaboration would be helpful: the HTML snippet I provided shows exactly how to create an IFRAME pointed at a PDF. – EricLaw Dec 12 '16 at 17:42

score 1 · Answer 3 · answered Jul 28 '21 at 20:30

For those that run into this issue later on. Dinesh Rajput's answer used to work, but msSaveOrOpenBlob() is now deprecated and should only be used on older versions of IE and Legacy versions of Edge. Now you can just set the iframe src to your pdf.

I know this is old, but I have been stuck on this for a while and I figured it out.

The issue is that Edge has a char limit for URIs. You have to turn your pdf into a blob first.

//Convert to blob
var byteCharacters = atob(response);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
     byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var blob = new Blob([byteArray], { type: 'application/pdf' });

//Convert blob into URL Object
blob = window.URL.createObjectURL(blob);

 //Set URL Object as iFrame src
 document.getElementById('iframe').src = blob;

This should actually work for all modern browsers, so no need for browser/feature check.

Workaround of showing a base64 pdf on IE9+

3 Answers3

Linked