Download Textarea Contents as a File Using Only JavaScript (No Server-Side)

How can I save a .txt file from the value of a textarea?

To get data from text area:

var textcontent = document.getElementById("textareaID").value;

To download as txt file:

var downloadableLink = document.createElement('a');
downloadableLink.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(textcontent));
downloadableLink.download = "myFile" + ".txt";
document.body.appendChild(downloadableLink);
downloadableLink.click();
document.body.removeChild(downloadableLink);

Handle file download from ajax post

Create a form, use the POST method, submit the form - there's no need for an iframe. When the server page responds to the request, write a response header for the mime type of the file, and it will present a download dialog - I've done this a number of times.

You want content-type of application/download - just search for how to provide a download for whatever language you're using.

How to create a file in memory for user to download, but not through server?

You can use data URIs. Browser support varies; see Wikipedia. Example:

<a href="data:application/octet-stream;charset=utf-16le;base64,//5mAG8AbwAgAGIAYQByAAoA">text file</a>

The octet-stream is to force a download prompt. Otherwise, it will probably open in the browser.

For CSV, you can use:

<a href="data:application/octet-stream,field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A">CSV Octet</a>

Try the jsFiddle demo.

Saving HTML5 textarea contents to file

That should do it.

function saveTextAsFile() {
  var textToWrite = document.getElementById('textArea').innerHTML;
  var textFileAsBlob = new Blob([ textToWrite ], { type: 'text/plain' });
  var fileNameToSaveAs = "file.txt"; //filename.extension

  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();
}

var button = document.getElementById('save');
button.addEventListener('click', saveTextAsFile);

function destroyClickedElement(event) {
  // remove the link from the DOM
  document.body.removeChild(event.target);
}

#textArea {
  display: block;
  width: 100%;
}

<textarea id="textArea" rows="3">
   Notes here...
</textarea>
<button type="button" value="save" id="save">Save</button>

Download textarea content as batch file onclick

    <textarea id="textbox" rows="1" cols="30"></textarea>
    <a href="#" download="info.txt" class="button" id="button">Download</a>
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        var anchor = document.querySelector('a#button');
        anchor.onclick = function(e) {

            var textbox_text = document.querySelector('#textbox').value;

            var textbox_file = new Blob([textbox_text], {"type":"application/bat"});  
            anchor.href = URL.createObjectURL(textbox_file);
            anchor.download = "newtext.txt";
        };
    </script>

By adding the ID attribute as button, I was able to download the content and not the whole HTML code.

Read / Write txt file on server using only javascript without involving any server side language

Only if JavaScript is your server side language (e.g. with Node.JS).

Servers don't let you write files to them by default. That would be a horrible security problem.

---

Related Topics