如何从 textarea 的值中保存 .txt 文件？

Posted 2023-05-07

【中文标题】如何从 textarea 的值中保存 .txt 文件？

【英文标题】：How can I save a .txt file from the value of a textarea?

【发布时间】：2020-12-04 03:14:43

【问题描述】：

我希望能够在 textarea 中写入一些文本，然后单击按钮让浏览器下载包含我在 textarea 中写入的文本的 .txt 文件。

我不知道该怎么做。我应该尝试什么？ 有什么方法可以在不使用数据库或服务器的情况下将其下载给我？

【问题讨论】：

从 textarea 中获取文本。并像这里一样关注***.com/questions/45789444/…

【参考方案1】：

从文本区域获取数据：

var textcontent = document.getElementById("textareaID").value;

下载为txt文件：

var downloadableLink = document.createElement('a');
downloadableLink.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(textcontent));
downloadableLink.download = "myFile" + ".txt";
document.body.appendChild(downloadableLink);
downloadableLink.click();
document.body.removeChild(downloadableLink);

【讨论】：

我试着把它放在

我又试了一次......效果很好......非常感谢。

如果你多次运行它，它会尝试多次下载同一个文件。我原以为 removeChild 会消除这个问题。我们还缺少其他什么吗？

【参考方案2】：

您可以创建一个包含<textarea> 的输入字段。

示例： html

<h2>Create .txt file</h2>
<div>
   <label for="fname">File name (without .txt):</label>
   <br>
   <input type="text" id="fname" name="fname"><br><br>
   <label for="fcontent">File Content:</label>
   <br>
   <textarea id="fcontent" name="w3review" rows="4" cols="50"></textarea>
   <br>
   <button id="create">Create File</button>
   <a download="info.txt" id="downloadlink" style="display: none">Download Here</a>
</div>

javascript：

(function() 
    var textFile = null,
        makeTextFile = function(text) 
            var data = new Blob([text], 
                type: 'text/plain'
            );

            if (textFile !== null) 
                window.URL.revokeObjectURL(textFile);
            

            textFile = window.URL.createObjectURL(data);

            return textFile;
        ;


    var create = document.getElementById('create');
    var fileContent = document.getElementById("fcontent");

    create.addEventListener('click', function() 
        const fileName = document.getElementById("fname").value;
        document.getElementById("downloadlink").setAttribute("download", fileName);
        var link = document.getElementById('downloadlink');
        link.href = makeTextFile(fileContent.value);
        link.style.display = 'block';
    , false);
)();

你可以看到现场演示here。

注意：如果您想让 HTML 文件成为默认文件而不是 .txt 文件，您可以通过将 JavaScript 文件中的 type: 'text/plain' 更改为 type: 'text/html' 来做到这一点

【讨论】：

我怎样才能使它成为默认的 HTML 文件而不是 .txt 文件。如何将其保存为 .html？ @hisam

您好，您可以通过将 JavaScript 文件中的 type: 'text/plain' 更改为 type: 'text/html' 来做到这一点

【参考方案3】：

查看JSFiddler上的工作示例

Javascript/JQuery

$('#mybutton').click(function()
     var data = $('#mytextarea').val();
     this.href = "data:text/plain;charset=UTF-8,"  + encodeURIComponent(data);
);

HTML

<textarea id="mytextarea"></textarea>
<a id="mybutton" href="" download="output.txt">Export to .txt</a>