Question

有人可以帮我将HTML5 textArea的内容保存到文件中，最好是使用JavaScript吗？

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

Answer 1

应该这样做。

function saveTextAsFile() {
  var textToWrite = document.getElementById('textArea').innerHTML;
  var textFileAsBlob = new Blob([ textToWrite ], { type: 'text/plain' });
  var fileNameToSaveAs = "ecc.plist";

  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>

JSFiddle

Answer 2

答案中代码的简化版本：

function download(){
    var text = document.getElementById("my-textarea").value;
    text = text.replace(/\n/g, "\r\n"); // To retain the Line breaks.
    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);
 }

和html：

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

Answer 3

我测试了engincancan's的答案，它几乎就在那里，但并不完全。首先，“ecc.plist”的文件格式无法在任何地方识别。其次，为了使代码在Safari，Chrome和Firefox中的桌面上工作，您必须使用现有的锚标记而不是创建一个（document.createElement（'a'））。 destroyClickedElement方法仅适用于Chrome，因为它非常宽容和宽松。并且，为了使下载在Firefox中运行，您必须拥有document.body.appendChild（downloadLink.download）;

我还想将我的本地存储文本保存到文件中进行下载，代码适用于Mac上的Safari，Chrome和Firefox的桌面。但是，我认为在iOS中无法使用Chrome或Firefox将Blob（）保存在任何地方。它确实有用，有趣的是在Safari中。例如，我可以将文本文件保存到我的Wunderlist应用程序中。这是我在Github上的回购链接：The Cat Whisperer on Github gh-pages

以下是JavaScript代码：

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

<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>

将HTML5 textarea内容保存到文件

4 个答案: