Download attribute on A tag not working in IE

Question

From the following code I'm creating a dynamic anchor tag which downloads a file. This code works well in Chrome but not in IE. How can I get this working

<div id="divContainer">
    <h3>Sample title</h3>
</div>
<button onclick="clicker()">Click me</button>

<script type="text/javascript">

    function clicker() {
        var anchorTag = document.createElement('a');
        anchorTag.href = "http://cdn1.dailymirror.lk/media/images/finance.jpg";
        anchorTag.download = "download";
        anchorTag.click();


        var element = document.getElementById('divContainer');
        element.appendChild(anchorTag);
    }

</script>

Why do you bother appendChild it when you click it first? Ad why click it when you can do location=URL — mplungjan, Aug 23 '13 at 04:52
I see no point in creating a new a tag. Why dont you trigger the download when you click the click me button. Web users dont like to click — Swaroop Nagendra, Aug 23 '13 at 04:57

EricLaw · Accepted Answer · 2014-04-11T19:09:12.170

35

Internet Explorer does not presently support the Download attribute on A tags.

See http://caniuse.com/download and http://status.modern.ie/adownloadattribute; the latter indicates that the feature is "Under consideration" for IE12.

edited Apr 11 '14 at 19:09

answered Aug 23 '13 at 16:52

EricLaw

56,563
7
151
196

4

So there's no workaround to set the file name in IE? – ps0604 Oct 06 '14 at 15:01
Your question is insufficiently precise. The file-delivering server chooses the filename. – EricLaw Oct 06 '14 at 16:00
26

I've found a workaround for this in IE, instead of creating an `` tag. just use this one line...`navigator.msSaveBlob(blob, fileName);` Credit to [download.js](http://danml.com/download.html) for the following line: https://github.com/rndme/download/blob/master/download.js#L143 – Henners Nov 03 '16 at 15:31
1

2017 Still no IE12... This feature is supported in Edge, though. – Allen Rufolo Mar 20 '17 at 20:29
@AllenRufolo IE12 = Edge... at least the first version of Edge – Jarod Moser Mar 28 '17 at 22:41
2

This does not answer the question of "How can I get this working" – keeehlan Sep 12 '18 at 23:09
@Henners Thank you so much for your comment, if you had this as an answer, I would up-vote. This saved me a lot of head ache – Ryan Wilson Dec 18 '18 at 13:52

score 31 · Answer 2 · answered May 31 '17 at 14:28

31

In my case, since there's a requirement to support the usage of IE 11 (version 11.0.9600.18665), I ended up using the solution provided by @Henners on his comment:

// IE10+ : (has Blob, but not a[download] or URL)
if (navigator.msSaveBlob) {
    return navigator.msSaveBlob(blob, fileName);
}

It's quite simple and practical.

Apparently, this solution was found on the Javascript download function created by dandavis.

answered May 31 '17 at 14:28

António Ribeiro

4,129
5
32
49

2

I tried this and get blob is undefined. Can you explain how to define blob and what to put in it. I just have the URL of the file. Is there a way to load a file into a blob from the URL? – boilers222 Sep 19 '17 at 12:58
Perhaps [this answer](https://stackoverflow.com/questions/34000412/how-do-i-convert-url-to-blob-with-javascript-or-jquery) can help you to achieve the conversion you want. Afterwards, you just need to trigger the download as mentioned in my answer. – António Ribeiro Sep 19 '17 at 14:36

score 15 · Answer 3 · answered Mar 30 '17 at 05:47

Old question, but thought I'd add our solution. Here is the code I used on my last project. It's not perfect, but it passed QA in all browsers and IE9+.

downloadCSV(data,fileName){
  var blob = new Blob([data], {type:  "text/plain;charset=utf-8;"});
  var anchor = angular.element('<a/>');

  if (window.navigator.msSaveBlob) { // IE
    window.navigator.msSaveOrOpenBlob(blob, fileName)
  } else if (navigator.userAgent.search("Firefox") !== -1) { // Firefox
    anchor.css({display: 'none'});
    angular.element(document.body).append(anchor);

    anchor.attr({
      href: 'data:attachment/csv;charset=utf-8,' + encodeURIComponent(data),
      target: '_blank',
      download: fileName
    })[0].click();

    anchor.remove();
  } else { // Chrome
    anchor.attr({
      href: URL.createObjectURL(blob),
      target: '_blank',
      download: fileName
    })[0].click();
  }
}

Using the ms specific API worked best for us in IE. Also note that some browsers require the anchor to actually be in the DOM for the download attribute to work, whereas Chrome, for example, does not. Also, we found some inconsistencies with how Blobs work in various browsers. Some browsers also have an export limit. This allows the largest possible CSV export in each browser afaik.

`target="blank"` works fine for me on IE11, why wasn't that the entire answer? — adamdport, Mar 20 '18 at 21:48
@Kevin can you please explain me what should be the data format ? — K Kiran kumar, Apr 09 '18 at 05:42
OP mentions nothing about Angular, on which this answer is reliant. — keeehlan, Sep 12 '18 at 23:12

score 5 · Answer 4 · answered Dec 10 '15 at 00:54

As of build 10547+, the Microsoft Edge browser is now supporting the download attribute on a tags.

<a href="download/image.png" download="file_name.png">Download Image</a>

Edge features update: https://dev.windows.com/en-us/microsoft-edge/platform/changelog/desktop/10547/

a[download] standard: http://www.w3.org/html/wg/drafts/html/master/links.html#attr-hyperlink-download

Alexey · Answer 5 · 2017-04-07T08:29:51.567

This code fragment allows saving blob in the file in IE, Edge and other modern browsers.

var request = new XMLHttpRequest();
request.onreadystatechange = function() {

    if (request.readyState === 4 && request.status === 200) {

        // Extract filename form response using regex
        var filename = "";
        var disposition = request.getResponseHeader('Content-Disposition');
        if (disposition && disposition.indexOf('attachment') !== -1) {
            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
            var matches = filenameRegex.exec(disposition);
            if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
        }

        if (window.navigator.msSaveOrOpenBlob) { // for IE and Edge
            window.navigator.msSaveBlob(request.response, filename);
        } else {
            // for modern browsers
            var a = document.createElement('a');
            a.href = window.URL.createObjectURL(request.response);
            a.download = filename;
            a.style.display = 'none';
            document.body.appendChild(a);
            a.click();
        }
    }

    button.disabled = false;
    dragArea.removeAttribute('spinner-visible');
    // spinner.style.display = "none";

};
request.open("POST", "download");
request.responseType = 'blob';
request.send(formData);

For IE and Edge use: msSaveBlob

score 1 · Answer 6 · answered May 25 '19 at 01:25

Use my function

It bind your atag to download file in IE

function MS_bindDownload(el) {
    if(el === undefined){
        throw Error('I need element parameter.');
    }
    if(el.href === ''){
        throw Error('The element has no href value.');
    }
    var filename = el.getAttribute('download');
    if (filename === null || filename === ''){
        var tmp = el.href.split('/');
        filename = tmp[tmp.length-1];
    }
    el.addEventListener('click', function (evt) {
        evt.preventDefault();
        var xhr = new XMLHttpRequest();
        xhr.onloadstart = function () {
            xhr.responseType = 'blob';
        };
        xhr.onload = function () {
            navigator.msSaveOrOpenBlob(xhr.response, filename);
        };
        xhr.open("GET", el.href, true);
        xhr.send();
    })
}

score 0 · Answer 7 · answered Aug 23 '13 at 04:54

0

Append child first and then click

Or you can use window.location= 'url' ;

answered Aug 23 '13 at 04:54

Voonic

4,667
3
27
58

1

If I append child first and then click. It redirects to the image rather than downloading – Nipuna Aug 24 '13 at 07:59

score 0 · Answer 8 · answered Mar 26 '15 at 12:07

0

As mentioned in earlier answer , download attribute is not supported in IE . As a work around, you can use iFrames to download the file . Here is a sample code snippet.

function downloadFile(url){
    var oIframe = window.document.createElement('iframe');
    var $body = jQuery(document.body);
    var $oIframe = jQuery(oIframe).attr({
        src: url,
        style: 'display:none'
    });
    $body.append($oIframe);

}

answered Mar 26 '15 at 12:07

May13ank

548
2
9
24

1

How is this supposed to work? I have an iframe appended right before the closing `
` tag with a source of my file.
– Dusty Jun 23 '15 at 18:27
If the content-disposoition in the header is attachment , it will try to download instead of rendering it in iFrame. – May13ank Jun 24 '15 at 09:47
header('Content-Disposition: attachment; filename="some filename"'); – May13ank Jun 24 '15 at 09:47

score 0 · Answer 9 · answered Jul 04 '19 at 06:08

I copied the code from here and updated it for ES6 and ESLint and added it to my project.

You can save the code to download.js and use it in your project like this:

import Download from './download'
Download('/somefile.png', 'somefile.png')

Note that it supports dataURLs (from canvas objects), and more... see https://github.com/rndme for details.

Download attribute on A tag not working in IE

9 Answers9

Linked

Related