时间戳

首页 > 解决方案 > 如何在 Gatsby JS 中渲染 PDF？

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

但是，我从 Gatsby 那里收到一个错误 /resume.pdf 上还没有页面

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

标签： reactjsgatsby

解决方案

您必须指向您的 PDF。您可以像其他组件一样导入它，也可以使用静态文件夹。

  • 使用静态文件夹：

    创建一个以/static项目根目录命名的文件夹，然后将 PDF 放在那里。当您构建站点时，此文件夹会以相同的内部结构“克隆”，因此其中的所有内容都将保留相对路径。一旦你创建了一个结构，如/static/pdfName.pdf：

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

    由于它位于/static文件夹下，因此您以前的路径将起作用。如果您像这样/static/pdf/pdfName.pdf更新路径，则还需要更新组件中的路径。

  • 像组件一样导入：

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

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

推荐阅读