[英]How can I save a .txt file from the value of a textarea?
I want to be able to write some text in a textarea and click a button to have the browser download a.txt file with the text I wrote in my textarea.我希望能够在 textarea 中写一些文本,然后单击一个按钮让浏览器下载我在 textarea 中写的文本的 a.txt 文件。
I have no idea how to go about this.我不知道如何 go 关于这个。 What should I try?
我应该尝试什么? Is there any way I cam have it downloaded to me without using a database or a server?
有什么方法可以在不使用数据库或服务器的情况下将其下载给我?
To get data from text area:从文本区域获取数据:
var textcontent = document.getElementById("textareaID").value;
To download as txt file:下载为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);
You can create an input field with <textarea>
inside it.您可以在其中创建一个带有
<textarea>
的输入字段。
Example: HTML示例: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: 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);
})();
You can see the live demo here .你可以在这里看到现场演示。
NOTE: If you want to make an HTML file be the default instead of a.txt file, you can do that by changing the type: 'text/plain'
in the JavaScript file into type: 'text/html'
注意:如果要将 HTML 文件设置为默认文件而不是 .txt 文件,可以通过将 JavaScript 文件中的
type: 'text/plain'
更改为type: 'text/html'
实现
See the working example on JSFiddler请参阅JSFiddler上的工作示例
Javascript/JQuery Javascript/JQuery
$('#mybutton').click(function(){
var data = $('#mytextarea').val();
this.href = "data:text/plain;charset=UTF-8," + encodeURIComponent(data);
});
HTML HTML
<textarea id="mytextarea"></textarea>
<a id="mybutton" href="" download="output.txt">Export to .txt</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.