With JS, jQuery, how do I save an AJAX response to a (text) file?

Question

It seems like this question is asked periodically and the common response is "You shouldn't do that with AJAX anyway. Just set the window location to the file."

But I'm trying to request a file that doesn't actually exist out on the server anywhere. It's dynamically generated (by a Django view) given the GET/POST context parameters. The file I want to retrieve via AJAX, and then save to the client machine, is a text file (csv).

I can currently get the text to the client machine (and can verify this by seeing it in logging or an alert) but cannot then figure out how to save this text to a file inside of the AJAX success callback fn.

Essentially, is this possible, is it something JS can do? That is, to open file save dialogs for "files" that are actually AJAX response text?

Answer 1

This isn't something JavaScript (and therefore jQuery or anything other JS framework) is allowed to do, for security reasons. You may be able to do what you want to flash or another route, but not JavaScript. Bear in mind Flash has it's own slew of security restrictions for this as well.

(Yes, IE can do this via an ActiveX object, but I'm not counting that as a "solution" here)

Answer 2

Basically, no. Javascript cant save anything to the local machine due to security restrictions. Your best bet may be to have a signed applet that the user can trust to write the file, or put it in a textarea that they can then easily copy and paste into a new file.

Answer 3

Could you not use the PHP rename() function for this, instead of just Javascript? Call to a PHP file and pass the name of the file you want to copy along with where as parameters?

Answer 4

From the browser's point of view, it doesn't matter if the file exists or not, it's just a resource on a server that it's requesting. I think you're going to need to do some version of "Just set the window location to the file". If you set the content type in the header to something that the browser doesn't recognize, I believe it will ask the user if they want to save it.

Answer 5

As others mentioned, you can't do it only with JavaScript.

IMO the best option would be the Flash 10+ FileReference API.

There are some good JavaScript wrapper libraries like Downloadify that provide a JavaScript API to access those methods.

Give a look to this demo.

Answer 6

I have the same problem. You can try this

<button id="Save">Save</button>
<img src="MakeThumbnail.ashx?Image=1.jpg" id="imgCrop">

$("#Save").click(function (e) {
    url = $("#imgCrop").attr("src")+"&Action=Save"
    e.preventDefault();  //stop the browser from following
    window.location.href = url;
});