I am being asked to make a "download" button that downloads the contents of a textarea on the same page as a file, with the browser's "Save As..." dialog showing up. Copy/paste would do the job just fine, but it is a "requirement".
Right now, I am just posting the contents of the textarea to the server, which echos them back with Content-disposition: attachment slapped on. Is there a way to do this with just client-side Javascript?
This may be what you are looking for: http://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/
It uses the browser's download dialogue, but supports only FF and Chrome, and maybe more browsers now?
function saveTextAsFile(textToWrite, fileNameToSaveAs)
{
var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (window.webkitURL != null)
{
// Chrome allows the link to be clicked
// without actually adding it to the DOM.
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
}
else
{
// Firefox requires the link to be added to the DOM
// before it can be clicked.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
}<textarea id=t>Hey</textarea><br>
<button onclick=saveTextAsFile(t.value,'download.txt')>Download</button>
I found a simple solution here: https://codepen.io
My text area:<br />
<textarea rows='10' cols='80' id='myTextArea' ></textarea>
<br /><br />
Download button: <br />
<input value='download' type='button'
onclick='doDL(document.getElementById("myTextArea").value)' />
<script type='text/javascript'>
function doDL(s){
function dataUrl(data) {return "data:x-application/text," + escape(data);}
window.open(dataUrl(s));
}
</script>
Hope it will help.
You could try window.location = "data:application/octet-stream,"+text but that doesn't provide a mechanism through which you can suggest a name, and also IE has a very small cap on the maximum length of a data URI which could be a problem.
There were some javascript libraries that did this kind of thing, via small embedded SWF file. For example this one.
Absolutely possible using this cross browser JavaScript implementation of the HTML5 saveAs function: https://github.com/koffsyrup/FileSaver.js
If all you want to do is save text then the above script works in all browsers(including all versions of IE), no SWF required.
Based on @Cyrlop's answer and https://stackoverflow.com/a/41948732/3096687, this gives a way to specify a filename:
function doDownload(str) {
function dataUrl(data) {
return "data:x-application/xml;charset=utf-8," + escape(data);
}
var downloadLink = document.createElement("a");
downloadLink.href = dataUrl(str);
downloadLink.download = "foo.xml";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
@Superphonic's solution is likely nicer if you don't mind including more bytes in your JavaScript.
You can use data: URIs and give it a file name, while still downloading the text. Try this:
document.getElementById("dload").onclick = function(){
var l = document.createElement("a");
l.href = "data:text/plain;charset=UTF-8," + document.getElementById("dload-txt").value;
l.setAttribute("download", document.getElementById("dload-fn").value);
l.click();
}textarea {width: 200px; height: 75px;}
input {width: 200px;}<!DOCTYPE html>
<html>
<head>
<title>Download File</title>
<meta charset="UTF-8"/>
</head>
<body>
<textarea placeholder="Enter text to download" id="dload-txt"></textarea><br/>
<input placeholder="Enter file name to download as" id="dload-fn"/><br/><br/>
<button id="dload">Download</button>
</body>
</html>This works in most browsers.
What it does is get the <textarea> and <input> tags that contain the necessary data, create a link that has an href to data:text/plain;UTF-8,<textarea data>, and set a download attribute with the name set by the <input> tag. Then click the link, which will download the text.
The only not-all-browser-compatible things here are:
data: URIs for having the data to download as a downloadable link. Click here for CanIUse browser compatability tables
click() function to click the link. Click here for CanIUse browser compatability tables
download attribute to signify a download. Click here for CanIUse browser compatability
So basically:
Does not work in IE
Does not work in Opera Mini
Does not work in early versions of Firefox, Chrome, Safari, Opera, and iOS Safari
Otherwise, this works in all major browsers, and doesn't need any Blob object.
It might be possible by creating a frame, writing contents there, then calling
document.execCommand('saveas', ...) in IE and something with nsIFilePicker in Mozilla, but I believe that would require some extraordinary privileges (like being part of the browser itself).
Not working
document.getElementById("dload").onclick = function(){
var l = document.createElement("a");
l.href = "data:text/plain;charset=UTF-8," + document.getElementById("dload-txt").value;
l.setAttribute("download", document.getElementById("dload-fn").value);
l.click();
}textarea {width: 200px; height: 75px;}
input {width: 200px;}<!DOCTYPE html>
<html>
<head>
<title>Download File</title>
<meta charset="UTF-8"/>
</head>
<body>
<textarea placeholder="Enter text to download" id="dload-txt"></textarea><br/>
<input placeholder="Enter file name to download as" id="dload-fn"/><br/><br/>
<button id="dload">Download</button>
</body>
</html>
Short answer: it's not posible. You have to POST it to server, and response from server can be "Content-disposition: attachment".
