ReactJS tutorial explains both fundamental and sophisticated ReactJS ideas. One of the most widely used JavaScript front-end libraries right now, ReactJS has a solid basis and a sizable community. ReactJS is a declarative, practical, and adaptable JavaScript framework for creating reusable UI components. In this blog, we will give you some solutions for “How to Download File in React js“. Read on it.

What Can We Do To Download File in React js?

Solution 1: Utilize a Link tag

The simplest solution for you to download file in React js is utilizing a Link tag.

The “link” tag in HTML is used to specify a connection between a document and an outside resource. External style sheets are frequently linked using the link tag. This element may be used more than once, but only in the head section. The only thing in the link element is its characteristics. The link element’s values indicate the relationship between the linked-to and contained items.

Syntax:

<link rel="stylesheet" type="text/css" href="styles.css">

First of all, Your_file.txt need to be put into the public folder and then let’s utilize a Link tag like the following:

<Link to="/your_file.txt" target="_blank" download>Download</Link>

After doing that, you can download file in React js.

Solution 2: Utilize Anchor Tag

An HTML element known as an anchor tag establishes a link to a destination URL. The link can wrap around text, images, or buttons when it is done correctly, allowing users to interact with it and go to the link’s destination. It is recommended practice to give information regarding the link’s target through clear anchor text or an illustrative image. Visitors to the website will know what to expect, and Search Engine crawlers can discern the relationship between the two URLs.

The second solution for you is utilizing Anchor Tag. Using the anchor element in your React app in the manner shown here makes it easy to download files in React apps:

import myTxtFile from '../path/to/file.txt';
<a href={myTxtFile} download>Click Here to download</a>

Solution 3: Add a download property to an anchor element

When a download property is added to an anchor element, you also can easily download file in React js. Look at the following example to understand more about this method:

import React from "react"; 
export default function App() { 
  return ( 
    <div> 
      <a 
        href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" 
        download 
      > 
        Click to download 
      </a> 
    </div> 
  ); 
}

To perform the download, add the download prop. You can download our file using the file-saver package if you don’t want to use an anchor element.

Run the following command to install it.

npm i file-saver

After that, you can use the package’s saveAs function by writing:

import React from "react"; 
import { saveAs } from "file-saver"; 
export default function App() { 
  const saveFile = () => { 
    saveAs( 
      "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", 
      "example.pdf" 
    ); 
  }; 
  return ( 
    <div> 
      <button onClick={saveFile}>download</button> 
    </div> 
  ); 
}

The download URL is the first input, and the file name of the downloaded file is the second argument.

Conclusion

We hope you will enjoy our article about fixing the problem “How to Download File in React js”. We know that this problem can be frustrating to deal with, so we hope that our information has helped you fix it. If you have any other questions or concerns about working with Conda, please leave a comment below. Thank you for reading; we are always excited when one of our posts can provide useful information on a topic like this!

Read more

→ Uploading Files with Pre Signed URLs in React – What Are The Best Solutions For It?