如何在 JavaScript 中创建和保存文本文件?
在本教程中，我们将学习如何在 JavaScript 中创建和保存文本文件。有时，开发人员需要从用户那里获取文本或内容，并允许用户将内容存储在文本文件中，并允许将文件下载到本地计算机。
有许多 JavaScript 库可用于实现我们的目标，但我们在本教程中使用了最好的两个库来创建和保存文本文件。
使用自定义文本创建文本文件并将其保存到本地计算机
我们将使用常规 JavaScript 操作在用户的计算机上创建和保存文本文件。用户可以使用 HTML <a> 标签从自定义内容创建文本文件并保存它。
开发人员应遵循以下语法从文本输入创建文本文件并保存它。
语法
// 使用 <a> 标签创建元素
const link = document.createElement("a");
// 使用要添加到文件的文件内容创建博客对象
const file = new Blob([content], { type: 'text/plain' });
// 在对象 URL 中添加文件内容
link.href = URL.createObjectURL(file);
// 添加文件名
link.download = "sample.txt";
// 将点击事件添加到 <a> 标签以保存文件。
link.click();
URL.revokeObjectURL(link.href);
在上述语法中，我们从用户那里获取内容，将其转换为博客对象，然后将其保存到文本文件中。
算法
用户应遵循以下步骤来理解上述语法。
步骤 1 - 创建 HTML <a> 元素。
步骤 2 - 获取要添加到文本文件的内容。
步骤 3 - 创建内容的 Blob 对象。
步骤 4 - 在 <a> 的 href 属性中标签，添加博客对象 URL。
步骤 5 - 将默认文件名添加为 <a> 标签的'download'属性的值。
步骤 6 - 调用 <a> 标签上的 click() 事件以将文件保存在本地计算机上。
示例
我们按照语法和算法编写了以下示例中的代码。我们创建了 HTML <textfield>。用户可以输入他们想要添加到文件的内容，然后单击'保存文件'按钮将文本文件保存在计算机上。
当用户单击'保存文件'按钮时，它将调用'downloadFile()'函数，在该函数中我们添加了创建和保存文本文件的代码。
<html> <body> <h2> Create a text file and save it to a local computer using JavaScript. </h2> <p> Enter the file content:- </p> <textarea> </textarea> <br/> <button onclick = "downloadFile()"> save File </button> <script> const downloadFile = () => { const link = document.createElement("a"); const content = document.querySelector("textarea").value; const file = new Blob([content], { type: 'text/plain' }); link.href = URL.createObjectURL(file); link.download = "sample.txt"; link.click(); URL.revokeObjectURL(link.href); }; </script> </body> </html>
使用 FileSaver JavaScript 库创建并保存文本文件
"FileSaver"是 JavaScript 库，我们可以使用它在原生 JavaScript 中创建文本文件。用户可以使用该库的 CDN 将其与 HTML 和 JavaScript 一起使用。
用户应使用以下语法来使用 FileSaver 库。
语法
// 使用文件内容创建 blob 对象
var blob = new Blob(["This is a sample file content."], {
type: "text/plain;charset=utf-8",
});
// 使用 FileWriter 库创建并保存文件
saveAs(Content, fileName);
在上述语法中，我们使用了一些文本来创建"text"类型的 blob 对象。此外，我们还使用了 FileWriter 库的'saveAs()'函数来创建和保存文本文件。
参数
'saveAs'函数有两个参数。
Content − 这是需要存储在文件中的内容。
filename − 这是用户下载时的默认文件名。
示例
我们已在以下代码的 <head> 部分添加了'FileWriter'库的 CDN。当用户点击'创建文本文件'按钮时，它将调用 JavaScript 中的'CreateTextFile()'函数，该函数创建'这是一个简单的文件内容'这句话的 blob 对象，并执行'saveAs()''函数来保存文本文件。
<html> <head> <script src = "https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js" integrity="sha512-csNcFYJniKjJxRWRV1R7fvnXrycHP6qDR21mgz1ZP55xY5d+aHLfo9/FcGDQLfn2IfngbAHd8LdfsagcCqgTcQ==" crossorigin = "anonymous" referrerpolicy = "no-referrer"> </script> </head> <body> <h2>Create text file and save it to local computer using <i> FileSaver </i> JavaScript Library.</h2> <button type = "button" onclick = "CreateTextFile();">Create Text File</button> <script> function CreateTextFile() { var blob = new Blob(["This is a sample file content."], { type: "text/plain;charset=utf-8", }); saveAs(blob, "download.txt"); } </script> </body> </html>
使用 FileSaver JavaScript 库将图像内容保存在文本文件中
在本节中，我们使用了相同的库"FileSaver"，但我们没有将普通文本存储到文件中，而是将图像转换为 blob 对象后将其字符串化。
用户可以按照以下语法将图像存储为文本文件格式并保存。
语法
// 通过 Id 访问文件输入
var element = document.getElementById("uploadedImage");
// 向文件输入添加 onchange 事件
element.onchange = function (event) {
// 将图像内容转换为文本
var blob = new Blob[event.target.files[0]], {
type: "text/plain;charset=utf-8",
});
// 使用图像内容创建文本文件并保存
saveAs(blob, "download.txt");
};
在上述语法中，我们将用户上传的文件放入 HTML <input> 并将其内容转换为 blob 对象。之后，我们使用 blob 对象创建文本文件并将文件保存到本地计算机。
示例
我们在下面的示例中使用了"FileSaver"JavaScript 库，如上述语法所示。我们创建了文件输入字段，只允许用户上传图像文件。
在 JavaScript 中，我们为文件输入添加了事件监听器，当用户上传文件时，它将使用上传的图像文件创建一个文本文件并将其保存到用户的计算机。
<html> <head> <script src = "https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js" integrity = "sha512-csNcFYJniKjJxRWRV1R7fvnXrycHP6qDR21mgz1ZP55xY5d+aHLfo9/FcGDQLfn2IfngbAHd8LdfsagcCqgTcQ==" crossorigin = "anonymous" referrerpolicy = "no-referrer"> </script> </head> <body> <h2>Upload image and add its content to text file and save it to computerusing <i> FileSaver </i> JavaScript Library.</h2> <input type = "file" id = "uploadedImage" accept = "image/png, image/gif, image/jpeg"/> <script> var element = document.getElementById("uploadedImage"); element.onchange = function (event) { var blob = new Blob[event.target.files[0]], { type: "text/plain;charset=utf-8", }); saveAs(blob, "download.txt"); }; </script> </body> </html>
