数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 JavaScript 中创建和保存文本文件？
在本教程中，我们将学习如何在 JavaScript 中创建和保存文本文件。有时，开发人员需要获取用户的文本或内容，并允许用户将内容存储在文本文件中，并允许文件下载到本地计算机。
许多 JavaScript 库可用于实现我们的目标，但我们在这个教程中使用了两个最好的库来创建和保存文本文件。
使用自定义文本创建文本文件并将其保存到本地计算机
我们将使用普通的 JavaScript 操作在用户的计算机上创建和保存文本文件。用户可以使用 HTML <a> 标签 从自定义内容创建文本文件并保存它。
开发人员应遵循以下语法从文本输入创建文本文件并保存它。
语法
// Create element with <a> tag
const link = document.createElement("a");
// Create a blog object with the file content which you want to add to the file
const file = new Blob([content], { type: 'text/plain' });
// Add file content in the object URL
link.href = URL.createObjectURL(file);
// Add file name
link.download = "sample.txt";
// Add click event to <a> tag to save file.
link.click();
URL.revokeObjectURL(link.href);
在上述语法中，我们从用户那里获取了内容，将其转换为 Blob 对象，然后将其保存到文本文件中。
算法
用户应遵循以下步骤以了解上述语法。
步骤 1 − 创建 HTML <a> 元素。
步骤 2 − 获取要添加到文本文件的内容。
步骤 3 − 创建内容的 Blob 对象。
步骤 4 − 在 <a> 标签的 href 属性中，添加 Blob 对象 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 库。
语法
// Create blob object with file content
var blob = new Blob(["This is a sample file content."], {
type: "text/plain;charset=utf-8",
});
// Create and save the file using the FileWriter library
saveAs(Content, fileName);
在上述语法中，我们使用了一些文本创建了“text”类型的 Blob 对象。此外，我们使用了 FileWriter 库的“saveAs()”函数来创建和保存文本文件。
参数
“saveAs”函数接受两个参数。
内容 − 需要存储在文件中的内容。
文件名 − 用户下载时的默认文件名。
示例
我们在下面代码的 <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 对象后将其转换为字符串。
用户可以按照以下语法将图像存储为文本文件格式并保存。
语法
// Access the file input by Id
var element = document.getElementById("uploadedImage");
// Add onchange event to file input
element.onchange = function (event) {
// Convert image content to text
var blob = new Blob[event.target.files[0]], {
type: "text/plain;charset=utf-8",
});
// Create text file using image’s content and save it
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>
103K+ 浏览量
