Reactjs 如何在Gatsby JS中呈现PDF？

您好，到目前为止，我的一个组件中有此代码

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

导出默认应用程序；
返回(
500？this.state.height:350}px`}>
你好，我是
下载简历
{this.shapes（）}
);

然而，我从盖茨比那里得到了一个错误 在/resume.pdf上还没有页面

---

在src/pages/resume.pdf.js的站点目录中创建一个React.js组件，该页面将自动刷新以显示您创建的新页面组件。

如果您还没有，您可能想尝试将

resume.pdf

放入项目的

/static

文件夹。

您必须指向您的pdf。可以像导入其他组件一样导入它，也可以使用

• 使用静态文件夹：
  在项目的根目录中创建一个名为

  /static

  的文件夹，并将PDF放在那里。当您构建站点时，此文件夹是以相同的内部结构“克隆”的，因此其中的所有内容都将保留相对路径。创建类似于

  /static/pdfName.pdf的结构后：
  
  <Resume rel="noopener noreferrer" href={withPrefix('./resume.pdf')} target="_blank">
  
  

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

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