Javascript: Download data to file from content within the page
Tested on Safari 5, Firefox 6, Opera 12, Chrome 26.
<a id='a'>Download CSV</a><script> var csv = 'a,b,c\n1,2,3\n'; var a = document.getElementById('a'); a.href='data:text/csv;base64,' + btoa(csv);</script>HTML5
<a id='a' download='Download.csv' type='text/csv'>Download CSV</a><script> var csv = 'a,b,c\n1,2,3\n'; var data = new Blob([csv]); var a = document.getElementById('a'); a.href = URL.createObjectURL(data);</script>
Simple solution :
function download(content, filename, contentType){ if(!contentType) contentType = 'application/octet-stream'; var a = document.createElement('a'); var blob = new Blob([content], {'type':contentType}); a.href = window.URL.createObjectURL(blob); a.download = filename; a.click();}Usage
download("csv_data_here", "filename.csv", "text/csv");
Update:
Time certainly changes things ;-) When I first answered this question IE8 was the latest IE browser available (Nov 2010) and thus there was no cross browser way to accomplish this without a round trip to the server, or using a tool requiring Flash.
@Zectburno's answer will get you what you need now, however for historical context be aware of which IE browsers support which feature.
- btoa() is undefined in IE8 and IE9
- Blob is available in IE10+
Be sure to test in the browsers you need to support. Even though the Blob example in the other answer should work in IE10+ it doesn't work for me just clicking the link (browser does nothing, no error)... only if I right click and save target as "file.csv" then navigate to the file and double-click it can I open the file.
Test both approaches (btoa/Blob) in this JSFiddle.(here's the code)
<!doctype html><html><head></head><body> <a id="a" target="_blank">Download CSV (via btoa)</a> <script> var csv = "a,b,c\n1,2,3\n"; var a = document.getElementById("a"); a.href = "data:text/csv;base64," + btoa(csv); </script> <hr/> <a id="a2" download="Download.csv" type="text/csv">Download CSV (via Blob)</a> <script> var csv = "a,b,c\n1,2,3\n"; var data = new Blob([csv]); var a2 = document.getElementById("a2"); a2.href = URL.createObjectURL(data); </script></body></html>Original Answer:
I don't think there is an option available for this.
I would just adjust your code such that if Flash 10+ is detected (93% saturation as of September 2009) on the user's system, provide the Downloadify option, otherwise fallback to a server-side request.