HTML5 textarea Inhalt in Datei speichern

Question

Kann mir jemand helfen, den Inhalt eines HTML5 textArea in Datei zu speichern, vorzugsweise mit JavaScript?

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

Answer 1

<textarea id = "textArea"> 
    Notes here... 
</textarea> 

<button onclick="savetextarea()" type="button">Save</button> 

<script> 
    function savetextarea(){ 
     var txt = document.getElementById("textArea").value; 
     document.getElementById("saveinput").value = txt; 
     document.forms["aForm"].submit(); 
    } 
</script> 

<form action="savecontent" name="aForm"> 
    <input id="saveinput" type="hidden" name="filecontent" value=""> 
</form> 

Answer 2

Das sollte es tun.

JSFiddle

Answer 3

testete ich engincancan's Antwort, und es war fast da, aber nicht ganz. Zunächst einmal war das Dateiformat für "ecc.plist" nirgendwo erkennbar. Damit der Code in Safari, Chrome und Firefox auf dem Desktop funktioniert, müssen Sie ein vorhandenes Anchor-Tag verwenden und keines erstellen (document.createElement ('a')). Der destroyClickedElement-Ansatz funktioniert nur in Chrome, weil er so nachsichtig und nachsichtig ist. Und damit der Download in Firefox funktioniert, müssen Sie document.body.appendChild (downloadLink.download);

Ich wollte auch meinen lokalen Speichertext in eine Datei zum Download speichern und der Code funktioniert auf dem Desktop für Safari, Chrome und Firefox auf dem Mac. Ich denke jedoch, dass es in iOS unmöglich ist, den Blob() überall mit Chrome oder Firefox zu speichern. Es funktioniert, interessanterweise in Safari. Zum Beispiel kann ich die Textdatei in meiner Wunderlist App speichern. Hier ist der Link meine Repo auf Github: The Cat Whisperer on Github gh-pages

Hier ist der JavaScript-Code:

const fileDownloadButton = document.getElementById('save'); 
function localStorageToFile() { 
    const csv = JSON.stringify(localStorage['autosave']); 
    const csvAsBlob = new Blob([csv], {type: 'text/plain'}); 
    const fileNameToSaveAs = 'local-storage.txt'; 
    const downloadLink = document.getElementById('save'); 
    downloadLink.download = fileNameToSaveAs; 
    if (window.URL !== null) { 
     // Chrome allows the link to be clicked without actually adding it to the DOM 
     downloadLink.href = window.URL.createObjectURL(csvAsBlob); 
     downloadLink.target = `_blank`; 
    } else { 
     downloadLink.href = window.URL.createObjectURL(csvAsBlob); 
     downloadLink.target = `_blank`; 
     downloadLink.style.display = 'none'; 
     // add .download so works in Firefox desktop. 
     document.body.appendChild(downloadLink.download); 
    } 
    downloadLink.click(); 
} 
// file download button event listener 
fileDownloadButton.addEventListener('click', localStorageToFile);  

Answer 4

Eine vereinfachte Version des Codes in den Antworten:

function download(){ 
    var text = document.getElementById("my-textarea").value; 
    var blob = new Blob([text], { type: "text/plain"}); 
    var anchor = document.createElement("a"); 
    anchor.download = "my-filename.txt"; 
    anchor.href = window.URL.createObjectURL(blob); 
    anchor.target ="_blank"; 
    anchor.style.display = "none"; // just to be safe! 
    document.body.appendChild(anchor); 
    anchor.click(); 
    document.body.removeChild(anchor); 
} 

und die html:

<textarea id="my-textarea"> 
    Notes here... 
</textarea> 
<button type="button" onclick="download()">Save</button>