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

Posted 2023-05-07

【中文标题】将 HTML5 文本区域内容保存到文件

【英文标题】：Saving HTML5 textarea contents to file

【发布时间】：2014-02-24 02:10:54

【问题描述】：

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

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

【问题讨论】：

到本地文件？ (html5rocks.com/en/tutorials/file/filesystem) 还是在远程服务器上？

【参考方案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

【讨论】：

这对我不起作用，解决方案是使用 button onclick cf ***.com/a/41965468/3154274 调用函数

textToWrite 是 textarea 的 innerHTML，而不是 textarea 本身。我将添加一个编辑。不过感谢您的解决方案。

非常感谢您的解决方案！这对我帮助很大。关于文件中保存的内容只有一点：我认为这是错误的，因为我们不应该读取 textarea 的 innerHTML 属性，而是读取 value 属性。

【参考方案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>

【讨论】：

我喜欢简洁。但是，换行符不会出现在下载的文件中 - 所有文本都在一行中运行。

我在这个问题上找到了您的代码的修复：***.com/questions/19190331/…

解决方法是在你的 blob 声明之前添加这一行： text = text.replace(/\n/g, "\r\n");

感谢总结。这很好用，但不适用于仅在新浏览器窗口中显示 blob 的 ios。有关如何使其正常工作并采用建议的文件名的任何建议？

【参考方案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);      

【参考方案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>

【讨论】：

这只有在服务器端有东西处理文件的实际保存时才有效......所以它不能回答问题