CODEWITHSUNDEEP
javascripthtmlinternet-explorerblob
user648340
user648340

Reputation:

Open links made by createObjectURL in IE11

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?

Upvotes: 74

Views: 78259

Answers (5)

dinesh ygv
dinesh ygv

Reputation: 1890

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>

Upvotes: 121

user1552391
user1552391

Reputation: 11

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

Upvotes: 1

Arti Gaikwad
Arti Gaikwad

Reputation: 21

        //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();
          }

Upvotes: 1

Pedro Fabi&#225;n More Barrios
Pedro Fabi&#225;n More Barrios

Reputation: 81

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

Upvotes: 3

Souvik
Souvik

Reputation: 823

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.

Upvotes: 45

Related Questions