如何在 Gatsby JS 中渲染 PDF？答案

【问题标题】：How to render PDF in Gatsby JS?如何在 Gatsby JS 中渲染 PDF？
【发布时间】：2020-10-03 00:08:04
【问题描述】：

你好到目前为止，我的一个组件中有这段代码

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 组件，此页面将自动刷新以显示您创建的新页面组件。

【问题讨论】：

标签： reactjs gatsby

【解决方案1】：

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

使用静态文件夹：

在项目的根目录中创建一个名为/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">

【讨论】：

【解决方案2】：

如果您还没有，您可能想尝试将resume.pdf 放入项目的/static 文件夹中。

【讨论】：