React Js Download Text on Click

React Js Download Text on Click: To download text on click in ReactJS, you can create a download button with an onClick event handler that calls a function to generate a download link. Within the function, you can create a new Blob object with the text content and set its type to 'text/plain'. Then, you can create a URL object using window.URL.createObjectURL() and set the Blob as its parameter. Finally, you can create a link element with the href attribute set to the URL object and the download attribute set to the desired file name, and trigger a click event on it using a ref. This will download the text file when the button is clicked.

written

reviewed

updated

How can I enable text file download on button click in ReactJS?

This code is a React component that displays a textarea element and a button. The textarea element contains some default text, but the user can edit it. When the button is clicked, the content of the textarea is downloaded as a text file.

The code uses the React useState hook to manage the state of the textarea content. When the button is clicked, a function called downloadText is called.

This function creates a new Blob object with the text content, creates a temporary <a> element with a download attribute, sets the href attribute to the URL of the Blob object, triggers a click event on the <a> element to download the file, and cleans up the URL by revoking the object URL after some time..

React Js Download Text on Click Example

<script type="text/babel">
      const { useState } = React;

      function App() {
        const [textareaContent, setTextareaContent] = useState(
          "React.js is a progressive JavaScript framework for building user interfaces. It allows developers to create dynamic and interactive web applications by combining declarative templates, component-based architecture, and reactive data binding. Vue.js is lightweight, flexible, and easy to integrate with existing projects."
        );

        const downloadText = () => {
          const text = textareaContent; // Get the content from the textarea

          // Create a new Blob object with the text content
          const blob = new Blob([text], { type: "text/plain" });

          // Create a temporary <a> element and set its download attribute to specify the file name
          const link = document.createElement("a");
          link.href = URL.createObjectURL(blob);
          link.download = "file.txt"; // Replace with your desired file name

          // Programmatically click the link to trigger the download
          link.click();

          // Clean up the URL.createObjectURL by revoking the object URL after some time
          setTimeout(() => {
            URL.revokeObjectURL(link.href);
          }, 100);
        };

        return (
          <div class="container">
            <h3>React Js Download Text on click</h3>
            <textarea
              value={textareaContent}
              onChange={(event) => setTextareaContent(event.target.value)}
            ></textarea>
            <button onClick={downloadText}>Download Text</button>
          </div>
        );
      }

      ReactDOM.render(<App />, document.getElementById("app"));
    </script>

xxxxxxxxxx
 
<script type="text/babel">
      const { useState } = React;
​
      function App() {
        const [textareaContent, setTextareaContent] = useState(
          "React.js is a progressive JavaScript framework for building user interfaces. It allows developers to create dynamic and interactive web applications by combining declarative templates, component-based architecture, and reactive data binding. Vue.js is lightweight, flexible, and easy to integrate with existing projects."
        );
​
        const downloadText = () => {
          const text = textareaContent; // Get the content from the textarea
​
          // Create a new Blob object with the text content
          const blob = new Blob([text], { type: "text/plain" });
​
          // Create a temporary <a> element and set its download attribute to specify the file name
          const link = document.createElement("a");
          link.href = URL.createObjectURL(blob);
          link.download = "file.txt"; // Replace with your desired file name
​
          // Programmatically click the link to trigger the download
          link.click();
​
          // Clean up the URL.createObjectURL by revoking the object URL after some time
          setTimeout(() => {
            URL.revokeObjectURL(link.href);
          }, 100);
        };
​
        return (
          <div class="container">
            <h3>React Js Download Text on click</h3>
            <textarea
              value={textareaContent}
              onChange={(event) => setTextareaContent(event.target.value)}
            ></textarea>
            <button onClick={downloadText}>Download Text</button>
          </div>
        );
      }
​
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

Output of React Js Download Text on Click

React JS Tutorial

React Js Download Text on Click

Feedback for Abhishek

How can I enable text file download on button click in ReactJS?

React Js Download Text on Click Example