How to open dialog for file download in JQuery after Ajax Call?

Question

Working with IE-10/11

I am downloading a file in JQuery

Common.ajax({
    dataType: 'text',
    type: 'GET',
    url: link,
    data: {'_CONV_ID': convId},
    success: function (data) {
        alert("File DOwnloaded" + data);
       //How to say Browser to open dialog to open, save cancel the file download
    },
    error: function (result) {
        $.unblockUI();
        $.log(result.responseText);
    }
});

Alert message successfully getting displayed on screen but dialog to save or open file does not appear. Anyone suggest what to write in success to get that?

It must be Byte Array which we are getting in response. You may suggest more parameters which i can add here — fatherazrael, May 26 '16 at 05:52

sangram parmar · Answer 1 · 2016-05-26T10:43:15.943

1

try this..

var a = document.createElement('a');
var fileurl=  window.URL.createObjectURL(new Blob([byteArray], { type: 'application/octet-stream' }));
a.href =  fileurl;
a.download = filename; // Set the file name.
a.style.display = 'none';
document.body.appendChild(a);
a.click();
delete a;
window.URL.revokeObjectURL(fileurl);

byteArray should be from your data

edited May 26 '16 at 10:43

answered May 26 '16 at 05:57

sangram parmar

8,462
2
23
47

Oh It displays file inside web browser. It should give download dialog instead of changing page – fatherazrael May 26 '16 at 06:22
also it is giving stay on page and leave the page dialog – fatherazrael May 26 '16 at 06:33

score 0 · Answer 2 · edited May 23 '17 at 11:46

Bluish is completely right about this, you can't do it through Ajax because JavaScript cannot save files directly to a user's computer (out of security concerns). Unfortunately pointing the main window's URL at your file download means you have little control over what the user experience is when a file download occurs.

I created jQuery File Download which allows for an "Ajax like" experience with file downloads complete with OnSuccess and OnFailure callbacks to provide for a better user experience. Take a look at my blog post on the common problem that the plugin solves and some ways to use it and also a demo of jQuery File Download in action. Here is the source

Here is a simple use case demo using the plugin source with promises. The demo page includes many other, 'better UX' examples as well.

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });

It is not working for my case. My link contains QueryString which it is not picking for IE10/IE11 — fatherazrael, May 26 '16 at 06:00

How to open dialog for file download in JQuery after Ajax Call?

2 Answers2