How to Download Files in React

1. Use the download Attribute to Download Files in React
2. Use the js-file-download Plugin to Download Files in React
3. Front-End Limitations in Downloading a File in React

When building a React application, sometimes you need to allow the user to download a file. For instance, if they purchase a ticket, they might want to download them in PDF.

This article will explore multiple ways to download files in React.

Use the download Attribute to Download Files in React

Typically, web developers use the anchor element <a> to navigate another page. The <a> element also accepts the download attribute. It tells the browser to save the file located at the specified URL instead of changing the URL.

Without a specified value, the browser will guess the file’s name and its extension. If you specify the value, it will be interpreted as a filename.

The <Link> component is a part of the react-router package. It’s a great tool for seamless navigation within Single Page Applications. Like the anchor element, it also accepts the download attribute and works the same way.

Currently, 94.5% of the worldwide internet surfers use the browsers that support this attribute. It has other limitations and conditions. To learn more about the download attribute, read the official docs.

In some cases, if the browser doesn’t support the download attribute, the file will be opened in the new tab.

Use the js-file-download Plugin to Download Files in React

The most convenient is to use an external package to download a file. There are many options, but js-file-download is the easiest to use.

It tells the browser to save the file from the specified URL source. It has advantages over using the download attribute because it can save more files.

Let’s take a look at the example:

import "./styles.css";
import axios from 'axios'
import fileDownload from 'js-file-download'
export default function App() {
  const handleClick = (url, filename) => {
    axios.get(url, {
      responseType: 'blob',
    })
    .then((res) => {
      fileDownload(res.data, filename)
    })
  }
  return (
    <div className="App">
      <button onClick={() => {() => handleClick('https://avatars.githubusercontent.com/u/9919?s=280&v=4', 'sample')}}>
        Download the File</button>
    </div>
  );
}

In this example, we specify the source and preferred name of the file. Then we pass these values to the fileDownload function, imported from the js-file-download package. This function does everything else for us.

If you run this code in your local create-react-app environment, it will download the image from the link.

Front-End Limitations in Downloading a File in React

You can use either one of the two approaches described in this article for rare occasions. However, as a general rule of thumb, using front-end code to trigger a download is a bad idea.

Browsers usually block immediate downloads for security reasons. It’s done to stop the website owners from forcing their users to download malware.

Instead, you should create an endpoint that will return the response headers to trigger the download of a file. And remember not to start the file download without the user’s permission.