CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorer
steve
steve

Reputation: 694

IE download file

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?

Upvotes: 13

Views: 59737

Answers (6)

vikasrajputin
vikasrajputin

Reputation: 91

Finally, after doing hours of research I found some answer which really worked for me. Following approach worked for me.

if (navigator.msSaveBlob) { // For IE
   return navigator.msSaveBlob(blobObj, fileName);
}

In below line

navigator.msSaveBlob(blobObj, fileName)

function msSaveBlob saves the file to the disk. Parameter blobObj is the object which needs to be saved with a given name in parameter fileName

For more information please visit following link: MDN Webdocs Mozilla

Upvotes: 0

d0wn
d0wn

Reputation: 171

My javascript version for download file from IE11 with BOM and charset for excel:

$.post('/cup-frontend/requestthewholelist',
    {ipAddressList: validIpAddressListAsString},   // add custom http variables
    function (returnedData) {                      // success return
        var BOM = "\uFEFF";                        // byte order mark for excel

        if (navigator.msSaveBlob) {                // ie block
            console.log("found msSaveBlob function - is't IE")
            var blobObject = new Blob([BOM + returnedData], {type: ' type: "text/csv; charset=utf-8"'});
            window.navigator.msSaveOrOpenBlob(blobObject, "cup_database.csv");
        }
        else {                                     // non-ie block
            console.log("not found msSaveBlob function - is't not IE")
            var a = window.document.createElement('a');
            a.setAttribute('href', 'data:text/plain; charset=utf-8,' + encodeURIComponent(BOM + returnedData));
            a.setAttribute('download', 'example.csv');
            a.click();
        }

    }).fail(function () {
    console.log('post error')
});

Upvotes: 1

Issam Zoli
Issam Zoli

Reputation: 2774

Download attribute is NOT supported in IE and iOS Safari

enter image description here

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

Upvotes: 28

Amjad Aziz
Amjad Aziz

Reputation: 123

IE does not support neither navigating to a data URI nor the download attribute. You can use navigator.msSaveBlob to save file for IE 10+.
You can check window.navigator.msSaveBloband write IE specific Code otherwise use existing code to save file.
You can check following link for more details: Saving files locally using Blob and msSaveBlob

Upvotes: 3

Dharmesh Patel
Dharmesh Patel

Reputation: 1891

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

Upvotes: 4

sampathsris
sampathsris

Reputation: 22290

IE does not support download tag.

There's an ugly hack you can use however.

  • Create an invisible iframe:

    <iframe id="dummy" style="display:none; visibility:hidden"></iframe>

  • Write your data to the iframe's document:

    var ifd = document.getElementById('dummy').contentDocument;
ifd.open('text/plain', 'replace');
ifd.write('whatever you want to be in the file');
ifd.close();

  • Use execCommand to save the file (actually, to prompt the save as dialog):

    ifd.execCommand('SaveAs', true, 'request.bin');

Note that execCommand does not work in IE11. I know it is nearly impossible to detect the browser perfectly correctly. However you can try this as a backup routine if file saving fails in your code.

Upvotes: 2

Related Questions