Scribd
Upload
7 views6 pages

How to Create and Save text file in JavaScript_

Uploaded by

ABDELLAH ABDICHE
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views6 pages

How to Create and Save text file in JavaScript_

Uploaded by

ABDELLAH ABDICHE
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

25/10/2024 13:17 How to Create and Save text file in JavaScript?

How to Create and Save text file in JavaScript?


Javascript Web Development Front End Technology

In this tutorial, we will learn to create and save the text file in JavaScript. Sometimes,
developers need to get texts or content from the user and allow users to store content in a
text file and allow the file to download to the local computer.

Many JavaScript libraries are available to achieve our goal, but we have used the best two
libraries in this tutorial to create and save the text file.

Create a text file using custom text and save it to a local computer
We will use normal JavaScript operations to create and save the text file on the user's
computer. Users can use the HTML <a> tag to create a text file from the custom content
and save it.

Developers should follow the below syntax to create a text file from the text input and
save it.

Syntax

// 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.

https://www.tutorialspoint.com/how-to-create-and-save-text-file-in-javascript 1/6
25/10/2024 13:17 How to Create and Save text file in JavaScript?

link.click();
URL.revokeObjectURL(link.href);

In the above syntax, we have taken the content from the users, converted it to blog
object, and then saved it to the text file.

Algorithm
Users should follow the below steps to understand the above syntax.

Step 1 − Create HTML <a> element.

Step 2 − Get content to add to the text file.

Step 3 − Create a Blob object of the content.

Step 4 − In the href attribute of the <a> tag, add the blog object URL.

Step 5 − Add the default file name as a value of the ‘download’ attribute of <a>
tag.

Step 6 − Call the click() event on the <a> tag to save the file on the local
computer.

Example
We have written the code in the example below by following the syntax and algorithm. We
have created the HTML <textfield>. Users can enter the content they want to add to the
file and click on the ‘save file’ button to save the text file on the computer.

When a user clicks on the 'save file' button, it will call the ‘downloadFile()’ function, in
which we have added the code to create and save the text files.

Open Compiler

<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");

https://www.tutorialspoint.com/how-to-create-and-save-text-file-in-javascript 2/6
25/10/2024 13:17 How to Create and Save text file in JavaScript?

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>
/h l

Use the FileSaver JavaScript library to create and save the text file
The ‘FileSaver’ is the JavaScript library that we can use to create a text file in vanilla
JavaScript. Users can use the CDN of the library to use it with HTML and JavaScript.

Users should use the below syntax to use the FileSaver library.

Syntax

// 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);

In the above syntax, we have used some text to create the blob object of the ‘text’ type.
Also, we have used the ‘saveAs()’ function of the FileWriter library to create and save the
text file.

Parameters
The ‘saveAs’ function takes two parameters.

Content − It is the content that needs to be stored in the file.

filename − It is a default file name when a user downloads it.

Example

https://www.tutorialspoint.com/how-to-create-and-save-text-file-in-javascript 3/6
25/10/2024 13:17 How to Create and Save text file in JavaScript?

We have added the CDN of the ‘FileWriter’ library in the <head> section of the below code.
When a user clicks on the ‘create text file’ button, it will invoke the ‘CreateTextFile()’
function in JavaScript, which creates the blob object of the sentence ‘This is a simple file
content’ and executes the ‘saveAs()’'function to save the text file.

Open Compiler

<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSa
</head>
<body>
<h2>Create text file and save it to local computer using <i> FileSaver </i> Jav
<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>

Learn JavaScript in-depth with real-world projects through our JavaScript certification
course. Enroll and become a certified expert to boost your career.

Save the content of the image in a text file using the FileSaver
JavaScript library
In this section, we have used the same library, ‘FileSaver’, but rather than storing the
normal texts to the file, we string the image after converting the image to a blob object.

Users can follow the syntax below to store the image in the text file format and save it.

Syntax

// Access the file input by Id


var element = document.getElementById("uploadedImage");

https://www.tutorialspoint.com/how-to-create-and-save-text-file-in-javascript 4/6
25/10/2024 13:17 How to Create and Save text file in JavaScript?

// 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");
};

In the above syntax, we take the file the user uploads into the HTML <input> and convert
its content to a blob object. After that, we create the text file using the blob object and
save the file to the local computer.

Example
We have used the ‘FileSaver’ JavaScript library in the example below, as shown in the
above syntax. We have created the file input field, allowing users only to upload the image
file.

In JavaScript, we have added the event listener to the file input, and as the user uploads a
file, it will create a text file using the uploaded image file and save it to the user’s
computer.

Open Compiler

<html>
<head>
<script
src = "https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.m
integrity = "sha512-csNcFYJniKjJxRWRV1R7fvnXrycHP6qDR21mgz1ZP55xY5d+aHLfo9/F
crossorigin = "anonymous"
referrerpolicy = "no-referrer">
</script>
</head>
<body>
<h2>Upload image and add its content to text file and save it to computerusing
<input
type = "file"

https://www.tutorialspoint.com/how-to-create-and-save-text-file-in-javascript 5/6
25/10/2024 13:17 How to Create and Save text file in JavaScript?

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>
/h l

https://www.tutorialspoint.com/how-to-create-and-save-text-file-in-javascript 6/6

You might also like