React download a file from server

Books Show sub menu. Book Reviews. Sign Up for My Mailing List. Developer Tools Show sub menu. Code Formatters Show sub menu. JavaScript Code Beautifier. Crypto Show sub menu.

AES Encryptor and Decryptor. MD5 Hash Generator. SHA Hash Generator. SHA Generator. CSV Show sub menu. Content Generators Show sub menu. Canadian Province Array and Select Element. Countries Array and Select Element. Credit Card Number Validator. Dummy Image Generator. Dummy Text Generator. Fake Address Data Generator. Fake Internet Data Generator. Fake Person Data Generator.

Fake Phone Data Generator. Fake Product Data Generator. Indian States Array and Select Element. Mexican States Array and Select Element.

Test Credit Card Numbers. File Show sub menu. Base64 to Image Converter. Image Compressor. Image to Base64 Converter. JSON Show sub menu. String Show sub menu. Escape and Unescape JavaScript Code. Get Character Info. String Utilities. Time Show sub menu. Timestamp to Human Readable Date. URL Show sub menu. Improve this answer. Shashwat Prakash Shashwat Prakash 3 3 silver badges 10 10 bronze badges.

Yes we can use axios also. Actually i tried fetch where I passed the location of server where the file is kept to download at some location but on click I am getting redirected to application again and file is not downloaded — maggie.

Hi there I have used your solution to download files of type. You don't need IIFE to execute the code. You don't need to create arrow function inside the render method. Mariana Ferreira 5 4 4 bronze badges. If you run open codesandbox link and click on download button, it will download file with name downloadApi.

The second code I have commented if you want to open in new window. For you case you don't need to un-comment the open in new window code. No I only commented to view what's it opening and when I tried it giving blob: soemvalue and when uncommenting it doing nothing. May you have to enable downloading from page. You have to give permission to open a file because for me the same code or codesandbox is working — tarzen chugh.

Sign up or log in Sign up using Google. Sign up using Facebook. Here I will see how to download file from server using React JS framework. You can use any server side technology to download file but we will focus on client side technology React JS framework.

I will provide link as well as button on which user will click and download file from server. User will get Save As option when clicks on download link or button. Go through the following steps for creating React project to download file from server using React. Make sure to give the project name as react-file-download. Wait till the project directory creation is not finished.

When done you will get successful message. Note that when we open a file or edit a file in subsequent sections we will by default refer to the project root directory react-file-download and later we may not mention this directory name.

When project directory creation is finished with all of its components then first task is to change the default title of the page. Create DownloadFile. It is always good idea to call the super constructor even if we do not initialize any variable here. 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. I have the below code snippets that create URL with anchor tag, we pass the file name as employees.