How to Download Files on Button Click ReactJS?

So, I suggest to place the asset into the public folder, under a resource or an asset name. After getting your file link from the api, just use plain javascript by creating anchor tag and delete it after clicking on it dynamically immediately on the fly. Browsers are smart enough to detect the link and downloading it directly when clicking on an anchor tag without using the download attribute. The compressed, production version of react.js and react-dom.js . The uncompressed, development version of react.js and react-dom.js with inline documentation .

You may also like to read How to download file from server using Angular. Update the index.js file under src directory to import the DownloadFile class. To import a class you must first have to export it as we did for DownloadFile in the last line. You can use any one of the approaches to download file from server.

thoughts on “Download file from server using React 16/17”

To overcome the issue faced in approach one, we’ll have to access the file by calling the API. In the API request we can additionally provide necessary details to make the backend application aware that we have access to the requested file. Embed the link of the file to be downloaded on tag, and download the file in the new tab.

• It still opened PDFs in a new tab unfortunately though.
• Did you know that you can use spreadsheets as a database?
• This function can be used as a post hook to do any tasks which needs to be doneafterthe API call is made.
• I didn’t know how to attach a link in comment, so I posted an answer.
• In this example, we specify the source and preferred name of the file.
• Browsers usually block immediate downloads for security reasons.

Go through the following steps to for creating a React application to download a text file. Finally let us stitch in all the pieces of code to download a sample csv file on click of a button. A simple reusable component for a button which can handle state for loading when calling the API. On click of the button, call the download API for the file which needs to be downloaded as a BLOB. This is the approach we are going to discuss, i.e., call the API, get the data download this data as a file on the browser. This will result in error when downloading the file, and you’ll find the backend error shown on the UI.

Appendix

// Create a link pointing to the ObjectURL containing the blob. Here, we will see how to download a text file using React JS framework. Have you ever felt the pain of writing and maintaining the same piece of code at multiple places? It could be a small code snippet or a third-party component, the pain and frustration are constant. Custom hook can be enhanced to support more functionalities. In case of any error,onErrorfunction will be invoked to handle the error. This function can be used as a post hook to do any tasks which needs to be doneafterthe API call is made.

If you run this code in your local create-react-app environment, it will download the image from the link. When I was building 100 Ideas, I wanted to give users an option to export their content in a text file. This post is an attempt to share that knowledge and log it for the future. Assuming you already know the basics of React, let’s begin. You have two approaches in coding style for downloading the file and give users Save As option to save the file according to their choice of place.

Individual Downloads #

I didn’t know how to attach a link in comment, so I posted an answer.

Notice how we render the React elements using render() from DownloadFile into a div called root, which is present on the public/index.html file. Export the DownloadFile at the end of the DownloadFile class so that you can use this class in other modules, such as, I have used it later in below index.js file. Here the server URL sends JSON data which will be downloaded into a file. The response headers you need to look at are Content-Type and Content-Disposition. You should check this answer for a more detailed explanation on those headers. The ‘download’ attribute for example, might just open the file in a new tab depending on the browser and the type of the file.

Development vs. Production Builds #

The download.css file contains simple style to for the div with id container and defines the width of the div with auto margin. Notice I had included download.css style file into the above file but I didn’t say anything about it earlier. This file is put under the src directory. The downloadEmployeeData() function is called on onClick() function .

Next we have render() function to render the elements of React app. Elements are the building blocks of React apps. Alot of good answers, I think Brian Li’s answer was good. To nitpick, the Content-Type in fetch is for when you’re sending data to the server and not receiving. Be aware that if the page is not reloaded in your app, the blob passed to “URL.createObjectURL” will remain in memory until you call URL.revokeObjectUrl. For a long-running app, this may lead to wasted memory and perfomance issues. Download the starter kit to get everything you need toget started with React.

For downloading you can use multiple ways as been explained above, moreover I will also provide my strategy for this scenario. Browsers usually block immediate downloads for security reasons. It’s done to stop the website owners from forcing their users to download malware. If nothing happens, download GitHub Desktop and try again.

CreateDownloadFile.jsfile undersrcdirectory with below content. Notice that you need to import the required module or component such as import React from ‘react’. 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. 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.