download attribute not work, anchor tag, Internet Explorer

Create JavaScript workaround so for Internet Explorer 9+ and EDGE browser there will generate absolute different links. Links for Internet Explorer 11 will contain onClick event which calls atob() method to download base64 content.

This is my 200$ solution to generate a different link in case there is Internet Explorer or EDGE browser.

Solution is to use different links on each browser.

For example use this on Chrome, Firefox, Opera, etc

<a href="data:text/plain;base64,dGhpcyBpcyBzYW1wbGUgdGV4dCBmaWxl" download="sample.txt">sample.txt</a>

On Internet Explorer 9+ and EDGE user:

<a onclick='javascript:window.navigator.msSaveBlob(dataURItoBlob("data:text/plain;base64,dGhpcyBpcyBzYW1wbGUgdGV4dCBmaWxl"), "sample.txt");' href="javascript:void(0);">sample.txt</a>

In Google Blogger I keep all attachemnt on the POST-ID database and then pull it out using JSON.

Here is my solution!

Insert into head tag:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

<script>
//<![CDATA[

function dataURItoBlob(dataURI, callback) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
    var byteString = atob(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    // write the bytes of the string to an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    // write the ArrayBuffer to a blob, and you're done
    var bb = new Blob([ab], {
        type: mimeString
    });
    return bb;
}

// detect IE browser
var isIE = false;
if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0 || window.navigator.userAgent.indexOf("Edge") > -1) {
    isIE = true;
}

// insert any kind of file
function dl(postid, insert) {
    if (!isIE) {
        $.getJSON("/feeds/posts/default/" + postid + "?alt=json", function(data) {
            $(insert).append("<a href='" + data.entry.content.$t + "' download='" + data.entry.title.$t + "'>" + data.entry.title.$t + "</a>");
        });
    } else {
        $.getJSON("/feeds/posts/default/" + postid + "?alt=json", function(data) {
            $(insert).append("<a href='javascript:void(0);' onClick='javascript:window.navigator.msSaveBlob(dataURItoBlob(&quot;" + data.entry.content.$t + "&quot;), &quot;" + data.entry.title.$t + "&quot;);'>" + data.entry.title.$t + "</a>");
        });
    }
};

//]]>
</script>

In the body tag user this function like this:

<div id="8886434909169115669"></div>
<script>dl("8886434909169115669","#8886434909169115669");</script>

Please view this page's source on different browsers to undestand how this next link is generated: