How to start a file download in react

Well, chances are if you've got web-pack it's going to try and minify it. So, I suggest to place the asset into the public folder, under a resource or an asset name. Webpack doesn't touch the public folder and index. The zip file would download, and somehow would unzip properly. Rohan Kumar Rohan Kumar 7 7 silver badges 14 14 bronze badges. This is kind of a cool library.

It still opened PDFs in a new tab unfortunately though. It makes opening the file on the fly a really clean process though. Suprabhat Kumar Suprabhat Kumar 1 1 silver badge 7 7 bronze badges. I was able to add an epub file in the same way — fatemeh kazemi.

We can user react-download-link component to download content as File. Asha Gadad Asha Gadad 1. Download file For downloading you can use multiple ways as been explained above, moreover I will also provide my strategy for this scenario.

The package that solved my download link issue was: npm install --save react-download-link Use it like this: fileDownload axiosResponse. GetBytes serializedObj ; return File sitemapString.

Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown. The Overflow Blog. Who owns this outage? Building intelligent escalation chains for modern SRE. Podcast Who is building clouds for the independent developer? Featured on Meta. Now live: A fully responsive profile. Reducing the weight of our footer. Visit chat. Linked 1. See more linked questions. Related Hot Network Questions.

React Hooks. Material UI. Storybook for React. Top React Libraries. Shards React. React Suite. Vue Show sub menu. Vue Answers. Vue 3 Show sub menu. Vue 3 Testing. Vue 3 Projects. Vue Testing. NativeScript Vue. Vue and D3. Top Vue Packages. Vue Ionic. Ant Design Vue. Chakra UI Vue. Nodejs Show sub menu. Angular Show sub menu.

Angular Material. TypeScript Show sub menu. TypeScript Best Practices. Modern JavaScript. JavaScript Mistakes. JavaScript APIs. Python Show sub menu. Python Answers. Beautiful Soup. Careers Show sub menu. Practice Project Ideas. Reviews Show sub menu. Useful APIs. Books Show sub menu. Book Reviews. Sign Up for My Mailing List. Developer Tools Show sub menu. Code Formatters Show sub menu. As we said in Introduction section that we will give users two options for downloading file using link or using button.

So in this render function we define our HTML elements with button and link to download 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. Notice I had included download. This file is put under the src directory. The download. Update the index. To import a class you must first have to export it as we did for DownloadFile in the last line. When you click any one of the download options — link or button, then you will see below output on the browser.

You can choose any location to save your file. You may also like to read How to download file from server using Angular. Hello I have implemented an express. I have used your solution to download files and have made a request to that express server but the results are empty files.

NOTE: my files are of types.