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?

Uranometry

Maybe the download attribute used on the a tag is not supported. status.modern.ie/adownloadattribute – Tetanize

The download attribute isn't supported in IE and Safari. But I'm not going to download/save the link: as mentioned in my question title it doesn't even open/navigate to the link. Safari works as expected. Here's a demo without the download attribute. – Uranometry

Did you have a look here? Looks like the same problem. – Melodie

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>

Thing

Seems like it doesnt work within a web worker: #26929492 – Cancer

I really hoped the time of "if stupid internet explorer then" would be over. Thank you for your submission, it helped me a lot. – Cousin

this solution works in Edge too. I was trying to download a browser audio recoding, worked like a charm! – Baler

Not working for me either in IE 11, any thing I might need to change, settings etc? – Mme

JS Fiddle recently changed its website to show the result inside iframe. The IE part doesn't work in an iframe. If you try this code in a regular page, it works in IE 11 too. – Thing

What do we do then if we want to embed the pdf into the page? – Toilette

@Toilette Do you want to generate PDF on the client side or is the PDF already on server? If it is already on server, I recommend PDF.JS(https://mcmap.net/q/41928/-recommended-way-to-embed-pdf-in-html). For client-side pdf generation(on the fly), use jsPDF(parall.ax/products/jspdf) – Thing

The PDF is already on the server, but due to security reasons, we don't have web-accessible links to these PDFs. In order to preview content in our application, we send the base64 data to render in the browser with the <object> tag. It works for images and PDFs in other browsers. – Toilette

@Toilette Unfortunately, IE has no support for inline PDFs. The only way is to show a download link to user. PDFObject(pdfobject.com) can detect browser support and switch between inline PDF and download link. – Thing

Yeah, I'm just gonna go with msSaveOrOpenBlob function, and then let the user decide whether to Open or Save it. Technically I have a distnict "Save/Download" link separately to my "Preview" link, but this will work. Thanks for the help! – Toilette

this works with angular2+spring boot rest controller but in angular1+spring boot rest controller it not works... – Cofsky

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.

Phenice

There's no need to actually append the element to the body, so setting the style and calling remove() are also unnecessary. Tested this on Chrome, FF, and Edge Chromium. – Esp

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

Orel

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

Quincentenary

Answer 5

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

H