2

I am having a difficult time attempting to download a pdf file from my react app onto my Desktop. I've posted the question before with the details found here How to download pdf file with React. Now I've received an answer but implementing it and the subsequent suggestions have turned out flat. I thought however that people who have not seen this question yet could potentially help me because I'm having a real tough time solving this one. So here goes.

I have a react app with the following tree structure:

app
|
|- Readme.md
|- index.html
|- node_modules
|- package.json
|- resume.pdf  -------> This is the file I want downloaded
|- src
    |
    |-App.css
    |- App.js
    |- App.test.js
    |- favicon.ico
    |- index.css
    |- index.js
    |- assets
    |-modules
       |-skills.js -----> Here is where I reference it.

This is part of my skills.js where I reference the <a> link:

class Skills extends Component {
render() {
    return (
      <div>
        <ReactHighcharts neverReflow={true} config={highchartConfig} domProps={{id: 'chartId'}}></ReactHighcharts>
        <a href="resume.pdf" download="resume.pdf">Click to Download My Resume</a>
      </div>
    );
  }
}

When I click the button on Chrome I get a Failed - No File error. I was told to have this directory structure like so and reference the pdf document as such in the <a> link.

When I try hit the link localhost:3000/resume.pdf in the the console I see this error browser.js:49 Warning: [react-router] Location "/resume.pdf" did not match any routes

and in the Network tab I see enter image description here

When I try the same thing in Firefox and download it firefox says

The file resume.pdf could not be opened. It may be damaged or use a file format that Preview doesn't recognize.

I could really use some help here. I am not sure why I'm unable to download this pdf at all. Does anyone out there know what could be the problem?

Community
  • 1
  • 1
Dan Rubio
  • 4,709
  • 10
  • 49
  • 106
  • Have you tried relocating `resume.pdf` into `src/assets`, importing the file into your `Skills` component, and referencing this in the `href` attribute of your anchor tag? – Charles Salmon May 25 '18 at 13:29

6 Answers6

2

There's a couple of ways I think you could solve this...

1. Add path to your server.

Assuming you're using Express, add the static path. You then need to create a public folder in your app root, and place the file in there.

// add static path
app.use(express.static(path.join('public')));

You could technically manually define the route too.

app.get('resume.pdf',(req, res) => {
  res.sendFile('/resume.pdf')
})

2. Webpack

If you're using Webpack to bundle your app, you can add a loader to process the pdf file and make it available in the final bundle. It's the same way JS modules get required and then included in the build.

$ npm install --save file-loader
// add the loader to webpack.config.js
...
loaders: {
  {
    test: /\.pdf$/,
    loader: 'file?name=[name].[ext]'
  }
 ...
}

Then, in your component require the file instead of referencing the path.

<a href={require(../relativeToDirectory/resume.pdf)} download="resume.pdf">Click to Download My Resume</a>

(Note, I'm the least confident on this one, because my use of it is a different use case as I take the final build folder, zip it, and upload to my server. It might only work if the server is already handling static paths). There's also url-loader, which turns the file into a base64 string and embeds it in the url... it could work instead of file-loader.

BradByte
  • 11,015
  • 2
  • 37
  • 41
1

another option is to use 'window.open()'. e.g.:

<div onClick={ () => window.open(require('../path-to-your/filename.pdf'), '_none')}>
</div>
tomyhomie
  • 344
  • 2
  • 6
0

The code below worked in my project, I'm just downloading a static text file :

import React from 'react'
import agent_file from './MANIFEST.txt';

class HelpPage extends React.Component{
state = {}
render() {
return(
<div>
    <a href={agent_file} download="MANIFEST.txt">Click to download manifest</a>        
</div>
);
}
}
export default HelpPage;
Bulent Balci
  • 644
  • 5
  • 11
0

Well if you try to upload your resume in frontend then that might not work when you host because in prod env, it takes build folder, and npm run build would be executed only once, so whatever you upload in your directory it won't reflect unless you execute npm run build

Suresh TR
  • 1
  • 2
-1

Just put your pdf file in public folder near your index.html and then

<a href="your_file.pdf" download>Description</a>

Sergey Frolov
  • 1,317
  • 1
  • 16
  • 30
-1

Sometimes, we want to download a file with React.js.

In this article, we’ll look at how to download a file with React.js.

Download File in React.js To download a file with React.js, we can add the download attribute to an anchor element.

For instance, we can write:

import React from "react";

export default function App() {
  return (
    <div>
      <a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
        download
      >
        Click to download
      </a>
    </div>
  );
}

We just add the download prop to do the download.

If we don’t want to use an anchor element, we can also use the file-saver package to download our file.

To install it, we run:

npm i file-saver

Then we can call the saveAs function from the package by writing:

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>
  );
}

The first argument is the URL to download and the 2nd argument is the file name of the downloaded file.

David Ray Riley
  • 50
  • 5