IE download file

Question

Using the following lines of code I am able to download a file in the response of a Ajax call in Firefox, Chrome, Opera. However in IE the href attribute download is not supported. Therefore the below does not work in IE.

HTML:

 <div class="fRight" style="margin-left:5px; margin-rigth:5px" >
    <input type="button" value="Request File"  id = "chReqFileBtn"  onclick = "handleClick"/>
    <a href="#" id="challengeReqFileAnchor" style="visibility: hidden"></a>
 </div>

JavaScript:

function handleClick()
{
    var code = $('#code').val();
    var quantity = $('#quantity').val();

    var req = $.ajax(
    {
        'type': 'POST',
        'url' : $apiBasePath+'config/challenge-file',
         contentType : 'application/json',
        'data': JSON.stringify({'code':code, 'quantity':quantity}),
        'success':function(response, status, xhr)
        {
            var code = xhr.getResponseHeader('Operation-Code');

            var anch = $('#challengeReqFileAnchor');
            anch.attr(
            {
                "download" : 'request.bin',
                "href" : "data:text/plain," + response       
            });
            anch.get(0).click();
        },
        'error': function(request,status,errorThrown) 
        {
           ......
        }
    });
    $pendingReqs.push(req);  
}

What options would I have to accomplish the same behavior in IE as well?

Answer 1

Download attribute is NOT supported in IE and iOS Safari

IE<10:

Command SaveAs using execCommand can do the trick, by making element's contents downloadable.

Cons:

• Problems in some versions of IE running on Win7 [I don't know if it's fixed Here]
• Need a DOM element to contain data

IE>=10

Using msSaveBlob, it's a method that allows to save Blob or File by sending this headers:

Content-Length: <blob.size>
Content-Type: <blob.type>
Content-Disposition: attachment;filename=<defaultName>
X-Download-Options: noopen

Check Saving files locally using Blob and msSaveBlob

Cons:

• Need a to define a Blob

Other browsers

If you don't want to implement all that by yourself, there is a nice library FileSaver.js to save generated files on client side. It supports Firefox, Chrome, Chrome for Android, IE 10+, Opera and Safari. For IE<10 there is a fork of the library that adds saveTextAs to save text files (.htm, .html, .txt)

Cross browsers solution

A server side script that receives filename, data, meme type then send the file with the header Content-Disposition: attachment; filename=FILENAME

Answer 2

I think this is related to the anch.get(0).click(); not supported by all browser specially for hidden anchors, so you may try following code instead,

anch.get(0).show().focus().click().hide();