How do I link to local pdf file in a create-react-app project?

Question

I have a create-react-app project in which I want to link to a pdf file I have saved in my project. I suppose my questions are twofold:

1) I'm not sure where exactly I need to save the PDF file (src folder vs public folder)

2) How do I properly link to the pdf file? Right now I have something like this:

<a href="/portfolio-revamp/public/documents/resume.pdf">Resume</a>

and it's not displaying - it changes the URL but doesn't take you to the PDF.

Any advice greatly appreciated!

TDJ11111 · Accepted Answer · 2020-05-14 10:21:59Z

10

You need to have the file in the public folder. If you want it to open in a browser, that's what it will do. If you want to force users to download, you can add the 'download' attribute to the anchor tag.

edited May 14, 2020 at 10:21

TDJ11111

33 bronze badges

answered Aug 20, 2018 at 19:14

efischency

4712 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

akorn3000 Over a year ago

I added the PDF to the public folder but it still doesn't link. I have the leading slash in my href because without it, each time I click the link it keeps adding to the URL. Still not sure if I need to do something else.

efischency Over a year ago

did you add the download attribute to the anchor tag as well?

akorn3000 Over a year ago

I added the download tag to the anchor tag. I also had to import the pdf directly at the top of the file - that did the trick.

Ryan · Accepted Answer · 2021-01-30 15:42:29Z

6

Place the file somewhere in src/, for example src/static/my-file.pdf.
Import the file at the top of your component, like import myFile from "./static/my-file.pdf"; (path is relative to src/).
Reference the object in your a tag: <a href={myFile}>Link to My File</a>

answered Jan 30, 2021 at 15:42

Ryan

3223 silver badges4 bronze badges

4 Comments

kenS Over a year ago

This is a better approach than using the /public folder, which provides no compile-time errors if the path to the file is not specified correctly

Alex Over a year ago

Does this even work? Maybe in normal JavaScript because TypeScript throws an error at the import line: Cannot find module '../.../abc.pdf' or its corresponding type declarations. TS2307 ?

Georgio Over a year ago

Ugly, but u can bypass TS error using // @ts-ignore

Herbertusz Over a year ago

@Alex You have to add this to /src/react-app-env.d.ts file to make it work: declare module '*.pdf' { const src: string; export default src; }

Stephen · Accepted Answer · 2021-02-04 06:34:20Z

2

I had this issue in two different areas of my project, in the App component in the src folder and in a link from a child Navigation component. I created a 'docs' folder in the src directory and used require syntax to link to my file and it worked for me.

In the instance of the navigation component I accessed the file by changing the directory up two levels.

<Link href={require("../../docs/FILE_NAME.PDF")} target="blank">
  Resume    
<Link>

In the instance of the App component I searched in the same directory.

<Link href={require("./docs/FILE_NAME.PDF")} target="blank">
  Resume
</Link>

answered Feb 4, 2021 at 6:34

Stephen

236 bronze badges

Comments

atazmin · Accepted Answer · 2021-03-15 02:01:26Z

2

Adding "download" helped me using Create React App

<a
  href="/pdfname.pdf"
  download
>
  Download Resume
</a>

pdf location:

in public folder

answered Mar 15, 2021 at 2:01

atazmin

5,8651 gold badge41 silver badges31 bronze badges

Collectives™ on Stack Overflow

How do I link to local pdf file in a create-react-app project?

4 Answers 4

3 Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related