Workaround of showing a base64 pdf on IE9+

问题:

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

回答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.

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