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

Stanfill

Some approach I can think of , convert base64 to other data format? Are there any format that the IE9+ browser iframe support ? thanks – Stanfill

Looks remarkably similar to https://mcmap.net/q/1770566/-embedded-base64-pdf-won-39-t-display-in-ie-when-using-iframe/139010 and https://mcmap.net/q/1770567/-setting-the-src-attribute-of-an-iframe-to-data-application-pdf-base64/139010 and https://mcmap.net/q/1770568/-how-to-show-pdf-in-internet-explorer-9-using-base64/139010 and https://mcmap.net/q/409652/-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/139010. – Nucleolar

Thanks for reminding, I have looked at that post and it seems not fixing my problem. – Stanfill

Thanks for more info. , Is that possible to convert the base64 code to some other format (pdf stream ?) and ie9 iframe will support that? – Stanfill

Possible duplicate of Saving Base64 encoded PDF with Internet Explorer 10 and below – Ariannearianrhod

I got it working using this solution – Kathe

I got it working with this solution – Kathe

Answer 1

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.

Moss

I don't understand your question. You refer to a PDF in an IFRAME like this: <IFRAME SRC="http://example.com/my.pdf" /> – Moss

can you please elobarate? – Gonium

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. – Moss

Answer 2

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

Higdon

Thanks @dinesh-rajput, this solution is working for me. I still can't figure out why this should be done on year 2017 ^^ – Pinky

How would you apply this code to the following file? drive.google.com/file/d/0B-umo7G978pdalJrdVhibHU4Y0k/… – File

Answer 3

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.

Cockahoop