How to make download file button in react js

To create a download file button in React.js, follow these steps:

1. Import the necessary dependencies:

javascriptCopy code
import React from 'react';
import { saveAs } from 'file-saver';

2. Create a function that handles the download action:

javascriptCopy code
const handleDownload = () => {
  // Create a new Blob object with the desired content
  const fileContent = 'This is the content of the file you want to download.';
  const blob = new Blob([fileContent], { type: 'text/plain;charset=utf-8' });

  // Use the saveAs function from the file-saver library to initiate the download
  saveAs(blob, 'download.txt');
};

3. Create a button component and attach the handleDownload function to the button's onClick event:

javascriptCopy code
const DownloadButton = () => {
  return (
    <button onClick={handleDownload}>
      Download File
    </button>
  );
};

4. Use the DownloadButton component wherever you want to display the download button:

javascriptCopy code
const App = () => {
  return (
    <div>
      <h1>Download Button Example</h1>
      <DownloadButton />
    </div>
  );
};

5. Finally, render the App component in your root file (usually index.js):

javascriptCopy code
ReactDOM.render(<App />, document.getElementById('root'));

With these steps, you should have a functioning download file button in your React.js application. When the button is clicked, it will generate a Blob object with the desired content and initiate the file download using the saveAs function from the file-saver library. The downloaded file will be named "download.txt" and contain the content "This is the content of the file you want to download."