Open In App

JavaScript Program to write data in a text File

Last Updated : 21 Jun, 2025
Suggest changes
Share
Like Article
Like
Report

Here are two simple methods for writing data to a text file using JavaScript.

1. Using the Blob Object

The Blob object is a built-in JavaScript feature that allows you to create file-like objects of immutable raw data. Using a Blob, you can easily generate text files directly in the browser. Here's how to use it:

Steps:

  • Create a Blob object containing the data you want to write to a text file.
  • Use the URL.createObjectURL() method to create a downloadable link.
  • Trigger the file download automatically when the user clicks a button.
HTML
<html>
<head>
    <title>Write Data to a Text File</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            text-align: center;
            padding-top: 50px;
        }

        textarea {
            margin-bottom: 10px;
            padding: 10px;
            font-size: 16px;
            width: 300px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div>
        <h2>JavaScript Program to Write Data to a Text File</h2>
        <textarea id="textData" rows="6" cols="50" placeholder="Enter text to save"></textarea><br><br>
        <button onclick="downloadTextFile()">Download Text File</button>
    </div>
    <script>
        function downloadTextFile() {
            var text = document.getElementById("textData").value;
            var blob = new Blob([text], { type: 'text/plain' });
            var link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = 'myTextFile.txt';
            link.click();
        }
    </script>
</body>

</html>

Output

In this example

  • downloadTextFile() retrieves the text from the <textarea>.
  • A Blob is created with the text, and a temporary download link is generated.
  • The link triggers the download of the text file named myTextFile.txt.

2. Using FileSaver.js Library

For more complex use cases or browser compatibility, we might prefer using a library like FileSaver.js, which simplifies saving files in JavaScript. It provides a more robust solution for triggering file downloads.

Steps:

  • Include the FileSaver.js library in your project.
  • Use the saveAs() function to trigger the download of the file.
HTML
<html>
<head>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            text-align: center;
            padding-top: 50px;
        }

        textarea {
            margin-bottom: 10px;
            padding: 10px;
            font-size: 16px;
            width: 300px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <div>
        <h2>JavaScript Program to Write Data to a Text File</h2>
        <textarea id="textData" rows="6" placeholder="Enter text to save"></textarea><br><br>
        <button onclick="downloadTextFile()">Download Text File</button>
    </div>

    <script>
        function downloadTextFile() {
            var text = document.getElementById("textData").value;
            var blob = new Blob([text], { type: 'text/plain' });
            var link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = 'myTextFile.txt';
            link.click();
        }
    </script>

</body>

</html>

Output

In this example

  • HTML: Displays a heading, a textarea for input, and a button.
  • JavaScript: When the button is clicked, the text from the textarea is saved as a .txt file and downloaded automatically.

Conclusion

Writing data to a text file using JavaScript is an easy and effective way to allow users to download content directly from the web. By using the Blob object or the FileSaver.js library, you can easily create files in the browser and provide them for download.


Next Article

Similar Reads