Question

我正在开发一个项目，要求用户在填写多个文本区域后生成.txt文件。但是，需要在这些文本区域中保留格式（特别是换行符）。我研究和改编的代码将它包装成一个blob，我认为这是问题，导致.txt简单地将所有文本区域的内容连接成一个连续的行。

HTML：

<input id="fileInput"></input><br>
<textarea id="text1Input" cols="80" rows="25"></textarea><br>
<textarea id="text2Input" cols="80" rows="25"></textarea><br>
<button onclick="saveTextToFile()">Save Text to File</button>

JS：

function saveTextToFile() {
    var textToSave = document.getElementById("text1Input").value + "\n\ntext2Input\n\n" + document.getElementById("text2Input").value;
    var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
    var fileNameToSaveAs = document.getElementById("fileInput").value;

    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    downloadLink.href = textToSaveAsURL;
    downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);

    downloadLink.click();
  }

  function destroyClickedElement(event) {
    document.body.removeChild(event.target);
  }

关于如何实现生成.txt文件的目标的任何想法，该文件维护在文本区域内编写的行和php连接中指定的换行符？

Answer 1

Blob对象没问题。您没有看到换行符，因为\n不是Windows换行符，有些编辑不会显示换行符。如果您在Notepad ++中打开文件，您会看到正确的换行符。但是，记事本会显示连接的文本。

您需要在Javascript中将\n替换为\r\n。使用正则表达式：

var textToSave = document.getElementById("text1Input").value.replace(/([^\r])\n/g, "$1\r\n") + "\r\n\r\ntext2Input\r\n\r\n" + document.getElementById("text2Input").value.replace(/([^\r])\n/g, "$1\r\n");

Answer 2

我将您的代码转换为可运行的代码段。要试用它，请点击＆＃34;显示代码段＆＃34;，然后点击＆＃34;运行代码段＆＃34;按钮。

当我运行此代码段时，我会看到我在文本区域中输入的所有换行符。请注意，如果使用Windows记事本打开这些文件，则不会正确显示换行符。使用Window Wordpad或某些编程编辑器打开它应该会显示换行符。

也许这不是您问题的答案，因为它不涉及任何代码更改，只是用于检查输出的工具。如果您希望将其用于Windows记事本，请使用\n

而不是\r\n。

＆＃13;

function saveTextToFile() {
    var textToSave = document.getElementById("text1Input").value + "\n\ntext2Input\n\n" + document.getElementById("text2Input").value;
    var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
    var fileNameToSaveAs = document.getElementById("fileInput").value;

    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    downloadLink.href = textToSaveAsURL;
    downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);

    downloadLink.click();
  }

  function destroyClickedElement(event) {
    document.body.removeChild(event.target);
  }

＆＃13;

<input id="fileInput"></input><br>
<textarea id="text1Input" cols="80" rows="25"></textarea><br>
<textarea id="text2Input" cols="80" rows="25"></textarea><br>
<button onclick="saveTextToFile()">Save Text to File</button>

＆＃13;

将多个文本区域保存到可下载的.txt文件中，保持格式化

2 个答案: