将 HTML5 文本区域内容保存到文件

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

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 中。例如，我可以将文本文件保存到我的奇妙清单应用程序中。这是我在 Github 上的 repo 链接：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>