how to download file in react js

Question

I receive file url as response from api  when user clicks on download button  the file should be downloaded without opening file preview in a new tab  How to achieve this in react js

User · Answer

This is how I did it in React  import MyPDF from     path to file pdf    lt a href  myPDF  download  quot My File pdf quot  gt  Download Here  lt  a gt   It s important to override the default file name with download  quot name of file you want pdf quot  or else the file will get a hash number attached to it when you download

User · Answer

Triggering browser download from front-end is not reliable    What you should do is  create an endpoint that when called  will provide the correct response headers  thus triggering the browser download    Front-end code can only do so much  The  download  attribute for example  might just open the file in a new tab depending on the browser   The response headers you need to look at are probably Content-Type and Content-Disposition  You should check this answer for more detailed explanation

User · Answer

browsers are smart enough to detect the link and downloading it directly when clicking on an anchor tag without using the download attribute   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   const link   document createElement  a    link href    your link pdf   document body appendChild link   link click    document body removeChild link

User · Answer

Download file  For downloading you can use multiple ways as been explained above  moreover I will also provide my strategy for this scenario   npm install --save react-download-link import DownloadLink from  quot react-download-link quot   React download link for client side cache data  lt DownloadLink      label  quot Download quot       filename  quot fileName txt quot      exportFile       gt   quot Client side cache data here    quot     gt    Download link for client side cache data with Promises  lt DownloadLink     label  quot Download with Promise quot      filename  quot fileName txt quot      exportFile       gt  Promise resolve  quot cached data here     quot      gt    Download link for data from URL with Promises Function to Fetch data from URL  getDataFromURL    url    gt  new Promise  resolve  reject    gt        setTimeout      gt            fetch url               then response   gt  response text                 then data   gt                    resolve data                             2000     DownloadLink component calling Fetch function  lt DownloadLink       label    Download          filename    filename txt          exportFile       gt  Promise resolve this  getDataFromURL  url      gt     Happy coding

User · Answer

You can use FileSaver js to achieve this goal  const saveFile        gt    fileSaver saveAs    process env REACT APP CLIENT URL    quot  resources cv pdf quot      quot MyCV pdf quot          lt button className  quot cv quot  onClick  saveFile  gt      Download File  lt  button gt

User · Answer

I have the exact same problem  and here is the solution I make use of now   Note  this seems ideal to me because it keeps the files closely tied to the SinglePageApplication React app  that loads from Amazon S3  So  it s like storing on S3  and in an application  that knows where it is in S3  relatively speaking  Steps 3 steps   Make use of file saver in project  npmjs package file-saver  npm install file-saver or something  Place the file in your project You say it s in the components folder  Well  chances are if you ve got web-pack it s going to try and minify it  someone please pinpoint what webpack would do with an asset file in components folder   and so I don t think it s what you d want  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 html and your resources get copied over in production build as is  where you may refer them as shown in next step  Refer to the file in your project Sample code  import FileSaver from  file-saver   FileSaver saveAs      process env PUBLIC URL    quot  resource file anyType quot        quot fileNameYouWishCustomerToDownLoadAs anyType quot       Source  Create-React-App dev   Using the public folder Github   File saver documentation  Appendix  I also try Link component of react-router react-router-docs Link  The zip file would download  and somehow would unzip properly  Generally  links have blue color  to inherit parent color scheme  simply add a prop like  style  color  inherit  or simply assign a class of your CSS library like button button-primary or something if you re Bootstrappin  Other sage questions it s closely related to   download file in react how to download file in react js button to download a file in reactJS download sample file in public folder  react

User · Answer

This is not related to React  However  you can use the download attribute on the anchor  lt a gt  element to tell the browser to download the file    lt a href   somefile txt  download gt Click to download lt  a gt    This is not supported on all browsers  https   developer mozilla org en-US docs Web HTML Element a

User · Answer

We can user react-download-link component to download content as File   lt DownloadLink label  quot Download quot  filename  quot fileName txt quot  exportFile       gt   quot Client side cache data here    quot    gt   https   frugalisminds com how-to-download-file-in-react-js-react-download-link

User · Answer

Solution  Work Perfect for React JS  Next JS  You can use js-file-download and this is my example  import axios from  axios  import fileDownload from  js-file-download         handleDownload    url  filename    gt      axios get url        responseType   blob           then  res    gt        fileDownload res data  filename                 lt button onClick       gt   this handleDownload  https   your-website com your-image jpg    test-download jpg      gt Download Image lt  button gt   This plugin can download excel and other file types

User · Answer

You can define a component and use it wherever   import React from  react   import PropTypes from  prop-types     export const DownloadLink      to  children     rest      gt       return        lt a           rest        href  to        download      gt         children       lt  a gt            DownloadLink propTypes       to  PropTypes string    children  PropTypes any      export default DownloadLink

User · Answer

tldr  fetch the file from the url  store it as a local Blob  inject a link element into the DOM  and click it to download the Blob I had a PDF file that was stored in S3 behind a Cloudfront URL  I wanted the user to be able to click a button and immediately initiate a download without popping open a new tab with a PDF preview  Generally  if a file is hosted at a URL that has a different domain that the site the user is currently on  immediate downloads are blocked by many browsers for user security reasons  If you use this solution  do not initiate the file download unless a user clicks on a button to intentionally download  In order to get by this  I needed to fetch the file from the URL getting around any CORS policies to save a local Blob that would then be the source of the downloaded file  In the code below  make sure you swap in your own fileURL  Content-Type  and FileName  fetch  https   cors-anywhere herokuapp com     fileURL        method   GET       headers           Content-Type    application pdf                  then  response    gt  response blob       then  blob    gt           Create blob link to download     const url   window URL createObjectURL        new Blob  blob               const link   document createElement  a        link href   url      link setAttribute         download          FileName pdf                  Append to html link element page     document body appendChild link           Start download     link click            Clean up and remove the link     link parentNode removeChild link          This solution references solutions to getting a blob from a URL and using a CORS proxy  Update As of January 31st  2021  the cors-anywhere demo hosted on Heroku servers will only allow limited use for testing purposes and cannot be used for production applications  You will have to host your own cors-anywhere server by following cors-anywhere or cors-server

User · Answer

React gives a security issue when using a tag with target   blank    I managed to get it working like that    lt a href  uploadedFileLink  target   blank  rel  noopener noreferrer  download gt      lt Button gt         lt i className  fas fa-download   gt        Download File     lt  Button gt   lt  a gt

User · Answer

If you are using React Router  use this    lt Link to   files myfile pdf  target   blank  download gt Download lt  Link gt    Where  files myfile pdf is inside your public folder

[javascript] how to download file in react js

Examples related to javascript

Examples related to reactjs

Examples related to download