1

I am posting some data to the server using jquery ajax. The server spews out a file (if the request is successful). I am just wondering how to initiate the save file dialog within the success callback given the results? Thanks.

PS:

The simplest solution is:

$('#ExportToExcel').click(function () {
                $('#form').attr({ action: 'bla' });
                $('#form').submit();
                return false;
            });
cs0815
  • 16,751
  • 45
  • 136
  • 299
  • You mean to ask how to save a local file using javascript (which you can't, as far as I know)? Your question is not very clear. – sinelaw Mar 16 '11 at 11:49
  • the server produces the file depending on the posted data. – cs0815 Mar 16 '11 at 11:54
  • please use a more descriptive title in the future. This will help others looking for the same to find the answer quicker. – Aron Rotteveel Mar 16 '11 at 11:55
  • @aron your solution works (can you repost it as you deleted your answer)? Please note, however, that i do not need to save the file first and send the uri back as i stream the data. thanks anyway! – cs0815 Mar 16 '11 at 12:35

2 Answers2

10

It is possible to ask the browser to offer the Save File dialog in your situation, yes, with a combination of JavaScript, the server response, and the handling of that response by the browser.

Here's how:

  1. Create a form to POST the data to the server.
  2. Create a hidden iframe with a unique name.
  3. Set the form's target to be the name of the iframe.
  4. Send the form (e.g., formElement.submit()).
  5. Have your server respond using the Content-Disposition header with the value attachment. This is a suggestion to the browser that the result should be saved rather than displayed in the browser itself.

If you want to get really fancy, you can use the cookie trick I describe in this other answer so you can get notification when the response is received (whether the server responds with the requested data, or an error). I use that very successfully in a browser-based DHML+JavaScript application where the user can request a custom PDF, and choose to either view it in a browser window (in which case I have the server include the Content-Disposition: inline header) or save it as a file (Content-Disposition: attachment).

Community
  • 1
  • 1
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Can you please let me know how to this: "Set the form's target to be the name of an iframe." Please note I am using the same form for filtering a grid. – cs0815 Mar 16 '11 at 16:10
  • can you please have a look at the my not working iframe solution (see PS of question)? Thanks. – cs0815 Mar 16 '11 at 16:28
  • @csetzkom: You can't do it via `$.ajax` at all, that's what I meant with steps 1-4 above. You literally fill in fields in a form (they can be hidden fields if you like) and use the `submit` method of the form's DOM element to do it. This doesn't tear down your page the way a form submit usually would, because the form has a `target`. You use the cookie trick to know when the response has been received. The user experience is largely the same as your `$.ajax` solution, it's just how you make it happen that's different. – T.J. Crowder Mar 16 '11 at 16:48
  • I am using the same form to filter my grid so I think the 'target solution' would not work. Or should I use a hidden form for the exporttoexcel button (after pressing this button the the user gets the data as excel file depending on the entered form values). I will give it another go tomorrow. Thanks so far. – cs0815 Mar 16 '11 at 18:51
  • @csetzkorn: No reason not to use a form specifically for this purpose. It doesn't even have to pre-exist in the markup, you can create it on-the-fly. – T.J. Crowder Mar 16 '11 at 23:11
  • Hi @T.J.Crowder canyou give me an example for this? – bleyk Jan 13 '16 at 01:28
  • @bleykFaust: The steps above are all quite straightforward. I suggest giving it a go, and if you run into trouble, post a question showing your code and saying what trouble you've run into. – T.J. Crowder Jan 13 '16 at 10:04
2

You can't open a save file dialog with pure JavaScript.

EDIT: it seems you can. See T.J. Crowder's answer.

Original answer is still valid:

You could use Flash, or simply redirect to the download page using JavaScript.

For example:

$.post('/some/url', function(data) {
    // lets for the moment, assume that you 
    // return a JSON string containing some
    // parameters, data.url being the URL of 
    // your download file
    var downloadUrl = data.url;
    window.location.href = downloadUrl;
});

It is not possible to download the file that is being returned directly by your AJAX-request. Instead, save the file on the server - perhaps in a temporary file - and return a URL that downloads the file and removes it from the server afterwards.

Community
  • 1
  • 1
Aron Rotteveel
  • 81,193
  • 17
  • 104
  • 128