CODEWITHSUNDEEP
reactjsgatsby
tryingToBeBetter
tryingToBeBetter

Reputation: 425

How to render PDF in Gatsby JS?

Hello So far I have this code in one of my components

export default App;

return (
  <Section id="home">
    <Overlay
      style={{height: `${this.state.width > 500 ? this.state.height : 350}px`}}>
      <HeadingBox className="parallax-hero-item animate">
        <SubHeading className="parallax-hero-item">Hello, I'm</SubHeading>
        <Heading className="parallax-hero-item">
          <Glitch text="Julius Oh" />
        </Heading>
        <Type className="parallax-hero-item">
          <Typewriter
            options={{
              strings: [
                'Full Stack Developer',
                'Problem Solver',
                'Programming Enthusiast',
              ],
              autoStart: true,
              loop: true,
            }}
          />
        </Type>
        <Resume
          rel="noopener noreferrer"
          href={withPrefix('./resume.pdf')}
          target="_blank">
          Download Resume
        </Resume>
      </HeadingBox>
      {this.shapes()}
    </Overlay>
  </Section>
);

however, I am getting an error from Gatsby There's not a page yet at /resume.pdf

Create a React.js component in your site directory at src/pages/resume.pdf.js and this page will automatically refresh to show the new page component you created.

Upvotes: 0

Views: 2795

Answers (2)

Ferran Buireu
Ferran Buireu

Reputation: 29335

You have to point to your PDF. You can import it like another component or using the static folder.

  • Using the static folder:

    Create a folder named /static in the root of your project and place your PDF there. This folder is "cloned" with the same internal structure when you build the site so everything inside will keep the relative paths. Once you've created a structure like /static/pdfName.pdf:

    <Resume rel="noopener noreferrer" href={withPrefix('./resume.pdf')} target="_blank">

    Since it's under /static folder, your previous path will work. If you update your paths like /static/pdf/pdfName.pdf you'll need to update also the paths in your component.

  • Importing like a component:

    import PDF from 'your/pdf/path/pdfName.pdf'

<Resume rel="noopener noreferrer" href={PDF} target="_blank">

Upvotes: 1

loremdipso
loremdipso

Reputation: 389

If you haven't already, you might want to try putting resume.pdf into your project's /static folder.

Upvotes: 0

Related Questions