Download base64 data using javascript | IE11

Question

I am trying to download base64 data using “window.location.href” in JavaScript. It works fine in Chrome but the same code is not working in IE11.

Could you please let me know the fix or a workaround for the same?

Here is the code: Javascript:

function DownloadPdf() {
window.location.href = "data:application/pdf;base64,JVBERi0xLjMNJeLjz9MNCj........Pg1zdGFydHhyZWYNMTczDSUlRU9GDQ=="

}

function DownloadExcel() {
window.location.href = "data:application/vnd.ms-excel;base64,UEsDBBQABgAIAAAAIQB......BLBQYAAAAACgAKAIACAACzHAAAAAA="
}

HTML:

NOTE:

I am developing an offline website where I am storing file in browser localStorage in base64 string format which is not connected to server. I don’t have any physical file present.

score 10 · Answer 1 · edited Mar 09 '17 at 19:22

Below is working for me in all browsers

var blob = new Blob([tdData], { type: 'text/csv' });
if (window.navigator.msSaveBlob) { // // IE hack; see http://msdn.microsoft.com/en-us/library/ie/hh779016.aspx
    window.navigator.msSaveOrOpenBlob(blob, 'exportData' + new Date().toDateString() + '.csv');
}
else {
    var a = window.document.createElement("a");
    a.href = window.URL.createObjectURL(blob, { type: "text/plain" });
    a.download = "exportData" + new Date().toDateString() + ".csv";
    document.body.appendChild(a);
    a.click();  // IE: "Access is denied"; see: https://connect.microsoft.com/IE/feedback/details/797361/ie-10-treats-blob-url-as-cross-origin-and-denies-access
    document.body.removeChild(a);
}

score 1 · Answer 2 · edited Oct 30 '19 at 11:36

I have found a plugin for javascript which may be usefull for you in this case, it is developed to download the base64 content with MIME types specified . Moreover Please have a look at this answer which explains how to download the base64 encoded content .

function fnExport(base64encodedstring) {
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");
    // If Internet Explorer:
    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
        txtArea1.document.open("content type", "replace");
        txtArea1.document.write(base64encodedstring);
        txtArea1.document.close();
        txtArea1.focus();
        sa = txtArea1.document.execCommand("SaveAs", true, reportname + ".extension");
        console.log(sa);
    }
    else { //other browser not tested on IE 11
        sa = window.open('data:content-type;base64,' +base64encodedstring);
    }
    return (sa);
}

score 0 · Answer 3 · edited Aug 16 '17 at 10:33

Follow these steps to download a Word document from .NET Web API to ajax.

Convert a file to base64 format (this is just 2 lines of code in C#)
Return base64 string to front end.

Convert base64 string to blob using below function.

base64toBlob = function (base64Data, contentType) {
    contentType = contentType || '';
    var sliceSize = 1024;
    var byteCharacters = atob(base64Data);
    //var byteCharacters = decodeURIComponent(escape(window.atob(base64Data)))
    var bytesLength = byteCharacters.length;
    var slicesCount = Math.ceil(bytesLength / sliceSize);
    var byteArrays = new Array(slicesCount);

    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        var begin = sliceIndex * sliceSize;
        var end = Math.min(begin + sliceSize, bytesLength);

        var bytes = new Array(end - begin);
        for (var offset = begin, i = 0 ; offset < end; ++i, ++offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    return new Blob(byteArrays, { type: contentType });
}

Render blob as a file. This has to be handled slightly differently in Chrome vs IE. For Chrome, we need to use link download option.

Please refer to this link for IE 11:
https://msdn.microsoft.com/en-us/library/hh779016(v=vs.85).aspx

Download base64 data using javascript | IE11

3 Answers3

Linked