Easy fix is to put the pdf file in your public folder and set href="resume.pdf".

You can also create a folder named resume in your public and put the pdf file inside your resume folder.

<a href="/resume/resume.pdf" download><strong>Download my Resume!</strong></a>
Answer from balumn on Stack Overflow
🌐
Stack Overflow
stackoverflow.com › questions › 70961956 › html-download-just-says-failed-no-file
reactjs - html download just says 'Failed - No file' - Stack Overflow
Using create-react-app. Thanks for the help ... Have you read CRA's documentation for styles and assets? You'll probably find an answer under "adding images, fonts, and files" or "using the Public folder" ... Something that worked for me was to import it on top. The file is in my assets folder, and not in public :) import pdf from "../assets/cv/resume.pdf"; <a href={pdf} className='btn' download rel='noopener noreferrer' target='_blank' > Download cv </a>
🌐
Stack Overflow
stackoverflow.com › questions › 61617358 › downloading-file-with-javascript-is-giving-failed-no-file-error
reactjs - Downloading file with Javascript is giving "Failed - No file" error - Stack Overflow
May 5, 2020 - Do that later but as a simple fix first try <a href='/test.txt' download target="_blank" id="download" ... Join us for our first community-wide AMA (Ask Me Anything) with Stack... bigbird and Frog have joined us as Community Managers ... Is it better to redirect users who attempt to perform actions they can't yet... ... Is there a specific named fallacy for bringing up other more sympathetic cases than the one at issue? ... Prove that the equality, 1/a+ 1/b + 1/c + 1/d + 1/e + 1/f = 1 has no solutions in odd natural numbers
🌐
Stack Overflow
stackoverflow.com › questions › 71098519 › file-download-failed-in-reactjs
File download failed in ReactJS
You can not download files in the src folder. If you need this file and change it in every build, you can use a script and run it before building for copying files from src to the public folder.
🌐
GitHub
github.com › react-csv › react-csv › issues › 76
File not being download on click · Issue #76 · react-csv/react-csv
Hi, I found that the only way to download the file is to right click and do "save file as.." If I click (either in your demo) a new tab it's openened and closed without the file being downloaded. I'm testing this with latest chrome on Mac.
🌐
GitHub
github.com › facebook › react › issues › 10994
Link to download html File is not working on this page · Issue #10994 · facebook/react
September 30, 2017 - ON MAC AND CHROME BROWSER, WHEN I CLICK ON LINK, IT DOWNLOADS SOMETHING AND IT SAYS "NO FILE" AND I CANNOT OPEN IT. IT APPEARS LIKE NOTHING IS DOWNLOADED. What is the expected behavior? YOU SHOULD BE ABLE TO DOWNLOAD THIS HTML FILE · Which versions of React, and which browser / OS are affected ...
Author   dbnex14
🌐
Stack Overflow
stackoverflow.com › questions › 72526421 › react-download-file-button
reactjs - React - download file button - Stack Overflow
<a href={"/test.xlsx"} download target='_blank'> <button> click </button> </a> However, when I go to the website, it says Failed - No file. How can I fix it? Do I have to edit webpack.config.js? ... Could you try this method, this should work. Using a file-saver hook. import React from "react"; import { saveAs } from "file-saver"; export default function App() { const saveFile = () => { saveAs( "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", "example.pdf" ); }; return ( <div> <button onClick={saveFile}>download</button> </div> ); }
🌐
GitHub
github.com › facebook › react › issues › 25525
Bug: React 18 Downloading a file on-demand doesn't work · Issue #25525 · facebook/react
October 21, 2022 - Creating an anchor tag that downloads a file on demand works fine in React 17 but in React 18 it doesn't work ... The first click gives a valid 200 call to get the file and you can view the file in preview on the network tab (devtools) but nothing downloads in downloads
Author   72gm
Find elsewhere
🌐
Stack Overflow
stackoverflow.com › questions › 68002419 › download-file-with-react-failed-even-though-the-request-was-successful
Download file with react failed even though the request was successful
June 16, 2021 - import React from "react"; import { Button } from 'react-bootstrap'; import 'bootstrap/dist/css/bootstrap.min.css'; class DownloadBtn extends React.Component { constructor(props) { super(props); this.state ={ fileDownloadUrl: "" } } dofileDownload(){ console.log(this.state.fileDownloadUrl); } handleFile (response){ console.log(response); const blob = new Blob([response]); // Step 3 const fileDownloadUrl = URL.createObjectURL(blob); // Step 4 this.setState ({fileDownloadUrl: response.url},//fileDownloadUrl}, // Step 5 () => { this.dofileDownload.click(); // Step 6 URL.revokeObjectURL(fileDownlo
🌐
Stack Overflow
stackoverflow.com › questions › 61420877 › unable-to-download-the-file-using-reactjs
Unable to download the file using reactjs - Stack Overflow
April 25, 2020 - What is file extension ? Codesandbox doesnt show any file name, therefore file extension is not clear yet. Please check if you are able to download using CURL. 2020-04-25T04:37:31.403Z+00:00 ... No idea, i'm new to react, Do we need to give file extensions while downloading.
🌐
Roy Tutorials
roytuts.com › home › javascript › react js › download file from server using react
Download file from server using React - Roy Tutorials
November 15, 2025 - Make sure you check the application runs at http://localhost:3000/ by executing npm start on project directory react-file-download using cmd prompt. Note that when we open a file or edit a file in subsequent sections we will by default refer ...
🌐
DevPress
devpress.csdn.net › react › 62f650787e6682346618b01d.html
After downloading the file from the file stream, you will be prompted that opening this type of file is not supported or the file is damaged_reactnative_rAc-React
The result is really because of the responseType. After setting, the downloaded files can be opened! Solution: 1. First, let the back-end turn the file passed down into a blank document. First of all, you can be sure that there is no problem downloading the file.
🌐
Stack Overflow
stackoverflow.com › questions › 57700450 › i-am-trying-to-download-react-js-but-i-am-getting-this-error-again-and-again
I am trying to download React js, but I am getting this error again and again?
August 29, 2019 - 2 TypeError: Failed to fetch - react js · 0 I get an error when trying to create a React app · 31 Could not find a required file. Name: index.html · 2 I got this error while installing react app · 0 Reactjs installation failed · 0 I have been trying to install or create a react app but I kept getting this error message ·
🌐
Stack Overflow
stackoverflow.com › questions › 69981951 › why-does-it-download-an-empty-file-using-react
reactjs - Why does it download an empty file using React? - Stack Overflow
download anchor tag opens file in a browser but not download it in React component · 7 · download file in react · 3 · ReactJS download file from Express Server · 3 · ReactJS- downloading a pdf file "Failed - no file" 2 · Download Files from Url using React ·
🌐
Medium
medium.com › yellowcode › download-api-files-with-react-fetch-393e4dae0d9e
Download API Files With React & Fetch | by Manny | yellowcode | Medium
April 11, 2020 - There is also the issue that if ... will fail because it doesn’t contain the Authorization token in the header when performing a GET request. Another method would be to generate the document on the server side and provide a URL to download the file once it’s ready. The issue with this is that it leaves the location of the document exposed for further download after the initial request, which might not be that much ...
🌐
Stack Overflow
stackoverflow.com › questions › 78490730 › react-download-button-works-but-downloaded-file-is-empty
reactjs - React: Download Button Works, but Downloaded File Is Empty - Stack Overflow
It's a lot of code but I see that your downloadBook function is not quite correct. You're doing unnecessary steps there. I haven't read your full code so I don't see the point in the files array.
Top answer
1 of 16
149

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) => response.blob())
  .then((blob) => {
    // Create blob link to download
    const url = window.URL.createObjectURL(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.

2 of 16
105

This is not related to React. However, you can use the download attribute on the anchor <a> element to tell the browser to download the file.

<a href='/somefile.txt' download>Click to download</a>

This is not supported on all browsers: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a