How to create a download link (PDF) in React

Question

The PDF file is in my local folder. In fact the same folder where my component is:

I checked few answers on stackoverflow and my code is:

...
const Footer = (props) => {
    return (
      <a href="./Tanzeel_Mirza_Resume.pdf" download="Tanzeel_Mirza_Resume.pdf">Download</a>
    )
}
...

When I click on this link, the PDF gets downloaded but it is blank and size is also 9kb while the actual PDF is 2MB in size.

Clearly I'm doing some silly mistake here. Please point it out.

silencedogood · Accepted Answer · 2021-09-22T18:25:17.903

1

Try importing the PDF, then downloading with the link, like so:

import pdf from "./Tanzeel_Mirza_Resume.pdf"

const Footer = (props) => {
return (
  <a href={pdf}>Download</a>
)
}

Also, I wanted to point out that you can avoid the ugly hash appended to the file name with this method by specifying a file name with the download property, like this:

<a href={pdf} download="FileName.pdf">Download</a>

edited Sep 22 '21 at 18:25

answered Sep 22 '21 at 18:08

silencedogood

3,209
1
11
36

Yes, i tired the second approach also i.e. without using `.` but it didnt work. But your `import ...` approach worked like charm. – Tanzeel Sep 22 '21 at 18:15
I actually meant to try it even without the `/` (I edited to reflect this). Either way, glad to hear it's workin for ya! – silencedogood Sep 22 '21 at 18:17
1

yes yes, i tried that way also. Still didnt work :) – Tanzeel Sep 22 '21 at 18:22
Noted... And removed. Though surprising as I seem to remember using that technique. – silencedogood Sep 22 '21 at 18:26

How to create a download link (PDF) in React

1 Answers1