React+Gatsby环境PDF渲染失败，如何实现指定URL访问简历PDF？

1. 修复Webpack PDF加载错误 #

Gatsby 不直接修改原生 webpack.config.js，需通过 gatsby-node.js 钩子自定义Webpack配置：

步骤1：安装依赖 #

如果未安装 file-loader，执行：

npm install file-loader --save-dev
# 或 yarn
yarn add file-loader -D

步骤2：配置Webpack处理PDF #

在项目根目录创建或修改 gatsby-node.js，添加如下代码：

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.pdf$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name].[ext]',
                outputPath: 'assets/', // 构建后PDF的输出目录，可按需调整
                publicPath: '/assets/' // 访问路径前缀
              }
            }
          ]
        }
      ]
    }
  })
}

步骤3：在Resume组件中正确加载PDF #

修改 resume.tsx，确保导入路径正确：

import React from 'react'
import { Document, Page, pdfjs } from 'react-pdf'
// 导入静态PDF文件，路径根据你的项目结构调整
import resumeFile from '../path/to/your/resume.pdf'

// 解决Gatsby SSR环境下的PDF Worker加载问题
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`

const Resume = () => {
  return (
    <div style={{ width: '100%', maxWidth: 800, margin: '0 auto' }}>
      <Document file={resumeFile}>
        <Page pageNumber={1} />
      </Document>
    </div>
  )
}

export default Resume

2. 实现mysite.com/resume.pdf直接访问 #

Gatsby 的 static 目录下的文件会被直接复制到构建后的网站根目录，按以下操作：

• 在项目根目录创建 static 文件夹（若不存在）
• 将你的简历PDF文件命名为 resume.pdf 放入该文件夹

构建后，即可通过 mysite.com/resume.pdf 直接访问PDF文件。

常见问题排查 #

• 确认PDF文件路径正确，导入时避免拼写错误
• 若仍报错，重启Gatsby开发服务器，确保 gatsby-node.js 配置生效
• 若react-pdf渲染异常，检查是否已设置 workerSrc 解决SSR环境限制

内容的提问来源于stack exchange，提问作者NobinPegasus