Unable to download csv file even though content coming in response header

Question

I have this stupid problem that I am seeing my csv data in the response header but it's not downloading the csv. On client side, I have a button and on it's click an ajax post request is fired like

$.ajax({
    url: 'xyz/GenerateCSV',
    type: 'POST',
    data: postData,
    contentType: "application/json; charset=utf-8"
});

On the server side I have set Response as

Response.AddHeader("content-disposition", "attachment;filename=ListExport.csv");
Response.ContentType = "text/csv";

The http response header is coming fine as -

Cache-Control:private
content-disposition:attachment;filename=EncounterListExport.csv
Content-Encoding:gzip
Content-Type:text/csv; charset=utf-8
Date:Mon, 22 Sep 2014 14:18:05 GMT
Server:Microsoft-IIS/8.0
Transfer-Encoding:chunked
Vary:Accept-Encoding
X-AspNet-Version:4.0.30319
X-AspNetMvc-Version:4.0
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?

Any idea what's going on? I did not make use of any Form or 'submit' button.

Thanks, Vaibhav

How specifically does it fail? Does the response content not contain the data? Is the server-side code not writing the data to the response? Is the response handler for the AJAX call not seeing the data or erroring in some way? Something else? — David, Sep 22 '14 at 14:37
Response content has data. It fails in the sense that nothing happens. I mean the CSV doesn't get downloaded. There is no error of any sort. — Kumar Vaibhav, Sep 22 '14 at 16:43
Well, what are you *doing* with the response? You're making an AJAX call, how do you handle the result of that call? If that's your exact code above then you're essentially *ignoring* the response. If the response *contains* the data, then the data is successfully being downloaded to the client. But your client-side code doesn't do anything with it. — David, Sep 22 '14 at 16:46
The response from server side is being correctly captured. I can see through the 'Network' tab of browser's dev toolbar that the http response is in fact coming to client side. So, what else should I be doing to make the download? I have already stated the following on server side - Response.AddHeader("content-disposition", "attachment;filename=ListExport.csv"); — Kumar Vaibhav, Sep 22 '14 at 16:49

score 1 · Accepted Answer · edited May 23 '17 at 10:26

1

Regarding your comment above:

It fails in the sense that nothing happens.

That's kind of incorrect. By your own admission, "Response content has data." Therefore something does happen. The response sends the data to the client.

The question is, what do you do with that data? According to your code, nothing:

$.ajax({
    url: 'xyz/GenerateCSV',
    type: 'POST',
    data: postData,
    contentType: "application/json; charset=utf-8"
});

Look at the documentation for $.ajax(). You need to provide it with some code to invoke after the response is received. That code would handle the response in some way. Something like this:

$.ajax({
    url: 'xyz/GenerateCSV',
    type: 'POST',
    data: postData,
    contentType: "application/json; charset=utf-8"
}).done(function (response) {
    // use the data from the response
}).fail(function (response) {
    // handle an error from the response
});

What you do with that data is up to you. It's structured CSV data, I imagine there exists some JavaScript library out there which can parse that easily. If you want to save the data to a file then you're going to have to prompt the user in some way (which could involve some trickery and workarounds) or save it to local storage. JavaScript can't write directly to the file system (for obvious security reasons).

edited May 23 '17 at 10:26

Community

1
1

answered Sep 22 '14 at 16:51

David

176,566
33
178
245

So I do get what you're saying here. But in a previous situation I had used a form to specify url (server side code being exactly the same). That was also a Post request and a csv file was getting downloaded. Why is it not happening this time? – Kumar Vaibhav Sep 22 '14 at 17:44
@KumarVaibhav: You're mis-understanding. It *is* being downloaded. Your code is simply ignoring the result. The difference in this case is that you're using AJAX instead of a page-level request. In a page-level request the browser's functionality is handling the response, and it saves the file or prompts the user. In an AJAX request there is no such default functionality. You need to handle the response manually. – David Sep 22 '14 at 17:47
Alright. Got it. So how do I emulate that browser response this time? Is there a way? And yes, I now fully get that the data is getting downloaded and in the given example, I would need to handle what to do with it. – Kumar Vaibhav Sep 22 '14 at 17:50
1

@KumarVaibhav: If you want the user to be able to save it as a file then you may want to make this a page-level request instead of an AJAX request. (Since it's a request to download a file, the browser *shouldn't* unload the current page context.) The other question to which I linked also has the idea to embed an `iframe` and make a page-level request on *that*. There may be some other options available that I don't know about, Googling something like "AJAX download file" might find other ideas. – David Sep 22 '14 at 17:52
I made use of the following answer to get page level behavior from the browser. And it works just fine. Since this response has all the information necessary to answer this question, I am going to mark this as answer! – Kumar Vaibhav Sep 23 '14 at 07:32
Oops forgot the link. Here it is - http://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit – Kumar Vaibhav Sep 23 '14 at 12:34

Unable to download csv file even though content coming in response header

1 Answers1