Loading the AJAX file (or AJAX-esque)
This is a common question, asked in various ways, and I've collected some links below and explain why they don't work. I am looking for a complete solution for the following.
In a web application I am developing, there is a need to load an AJAX-esque file with the following requirements.
- The user can click the link to download the file and not be redirected to the new page, will receive the usual "Save As .." dialog that we are all used to in web browsers to download files.
- If for some reason the server is unable to execute the file, a javascript callback should be called. Likewise, if the server successfully serves the file
- You must be able to modify the HTTP request headers to indicate, for example, the HTTP content-type header in the request
- Support for all browsers A-grade
Things researched so far:
and. jquery.fileDownload solves requirements 1, 2 and 4 very elegantly with a combination of form submission , hidden frames, and having a specific cookie on the server.I am very familiar with this project (have contributed to it too). Requirement 3 is not supported, although due to the HTML form submission and iframes (which this library uses) do not allow HTTP headers to be specified to the requested server resource. ( jdownloader also uses a similar iframe / form technique, but also doesn't address requirement 3).
b. It is possible to get binary data from a file using XMLHttpRequest (with different hacks for different browsers ( link 1 , link 2 , link 3 , link 4 , link 5 , link 6 , link 7 , link 8 ). But none of them meet the requirements 1. Binary data can be stored in a javascript variable, but there is no way to invoke the browser's Save As ... dialog box to allow the user to save this binary data to a file on their hard drive.
from. This link (under the heading "DOWNLOAD + SAVE FILES TO HTML5 FILE SYSTEM") has a complete end-to-end solution using XHR2 and satisfies requirements 1, 2 and 3. But it is poorly supported (uses a very new HTML5 FileWriter).
Any complete solutions?
EDIT We have a few more options that I plan to test. Perhaps the only option is to create a library for this problem, bundling all the hacks / solutions together to create a one-stop solution.
-
As per fibtech's solution below: use solution (b) above to store the file in a variable, then:
For Internet Explorer: Save this data with IE execCommand ()
For others: use uris data ( link 2 ) and HTML5 load <a> attribute to specify the name ( link 1 , link 2 , link 3 , link 4 )
-
This link mentions something to do with the ability to upload files with canvas
-
Downloadify (and this link too)
-
Apparently a relevant link that is web worker related but does something with Blob and FileApi to create files.
source to share
IE's only solution:
function SaveContents(element) {
if (typeof element == "string")
element = document.getElementById(element);
if (element) {
if (document.execCommand) {
var oWin = window.open("about:blank", "_blank");
oWin.document.write(element.value);
oWin.document.close();
var success = oWin.document.execCommand('SaveAs', true, element.id)
oWin.close();
if (!success)
alert("Sorry, your browser does not support this feature");
}
}
}
Required HTML sample:
<textarea id="myText"></textarea><br />
<button type="button" onclick="SaveContents('myText');">Save</button>
This will save the contents of the given text box to a file with a name equal to the ID of the text box.
For other browsers, you might want to read the following: Does execCommand SaveAs work in Firefox?
Test case and working example: http://jsfiddle.net/YhdSC/1/ (IE only)
source to share