Open links made by createObjectURL in IE11

Question

Why can't you open the link in the following demo:
http://html5-demos.appspot.com/static/a.download.html

You cannot even right click and open it in a new tab/window. Is there any setting in the browser I need to customize?

Answer 1

This demo uses Blob URL which is not supported by IE due to security restrictions.

IE has its own API for creating and downloading files, which is called msSaveOrOpenBlob.

Here is my cross-browser solution that works on IE, Chrome and Firefox:

function createDownloadLink(anchorSelector, str, fileName){
    if(window.navigator.msSaveOrOpenBlob) {
        var fileData = [str];
        blobObject = new Blob(fileData);
        $(anchorSelector).click(function(){
            window.navigator.msSaveOrOpenBlob(blobObject, fileName);
        });
    } else {
        var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str);
        $(anchorSelector).attr("download", fileName);
        $(anchorSelector).attr("href", url);
    }
}

$(function () {
    var str = "hi,file";
    createDownloadLink("#export", str, "file.txt");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="export" class="myButton" download="" href="#">export</a>

Answer 2

Here is the function for downloading any file as blob. (tested on IE and Non-IE)

var download_csv_using_blob = function (file_name, content) {
    var csvData = new Blob([content], { type: 'text/csv' });
    if (window.navigator && window.navigator.msSaveOrOpenBlob) { // for IE
        window.navigator.msSaveOrOpenBlob(csvData, file_name);
    } else { // for Non-IE (chrome, firefox etc.)
        var a = document.createElement("a");
        document.body.appendChild(a);
        a.style = "display: none";
        var csvUrl = URL.createObjectURL(csvData);
        a.href =  csvUrl;
        a.download = file_name;
        a.click();
        URL.revokeObjectURL(a.href)
        a.remove();
    }
};

Note: Please change the type of your file, if needed.

Answer 3

If the data is coming from Ajax then you can add

if (window.navigator.msSaveOrOpenBlob)
 xhttp.responseType = "arraybuffer";
else
 xhttpGetPack.responseType = "blob";

/////////////////////////////////////////////////

var a = document.createElement("a");
document.body.appendChild(a);
a.style.display = "none";

// IE
if (window.navigator.msSaveOrOpenBlob)
{
  a.onclick = ((evx) => 
  {
      var newBlob = new Blob([new Uint8Array(xhttpGetPack.response)]);
      window.navigator.msSaveOrOpenBlob(newBlob, "myfile.ts");
  });
  a.click();
}
else //Chrome and safari
{
  var file = URL.createObjectURL(xhttpGetPack.response);
  a.href = file;
  a["download"] = "myFile.ts";
  a.click();
  window.URL.revokeObjectURL(file);
}

Answer 4

        //File Object return in ajax Success in data variable
         var blob = new Blob([data]);
         if (navigator.appVersion.toString().indexOf('.NET') > 0) //For IE
          {
            window.navigator.msSaveOrOpenBlob(blob, "filename.ext");
          }
          else if (navigator.userAgent.toLowerCase().indexOf('firefox') >-1) 
              {
                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = "filename.ext";
                document.body.appendChild(link);//For FireFox <a> tag event 
                //not working
                link.click();
            }
          else
          {
                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = "filename.ext" 
                link.click();
          }

Answer 5

For inside iframe download in Internet Explorer 11, you need to use parent.window.navigator.msSaveOrOpenBlob(blob, "filename.ext");.