React-PDF加载本地PDF失败问题求助

错误原因分析 #

• Uncaught SyntaxError: Unexpected token '<'：本质是webpack或项目构建工具未正确识别PDF资源，请求PDF时返回了index.html内容（前端路由 fallback 机制导致），解析HTML时遇到<触发语法错误。
• fetch获取Blob后仍显示加载失败：大概率是未指定响应类型为blob，或资源路径错误，导致拿到的Blob并非有效PDF数据。

具体解决方案 #

1. 调整资源存放位置（最简方案）

将PDF文件移至项目根目录的public文件夹下，直接通过绝对路径引用：

import { Document, Page } from 'react-pdf';

export default function PdfViewer() {
  return (
    <div>
      <Document file="/sample.pdf">
        <Page pageNumber={1} />
      </Document>
    </div>
  );
}

public文件夹下的资源会被构建工具直接复制到输出目录，不会被当作模块解析，避免路由 fallback 干扰。

2. 配置构建工具处理src/assets中的PDF（适合保留原目录结构场景）

如果使用Create React App，默认未配置PDF资源处理，需通过craco或eject修改webpack配置：

• 安装@craco/craco：npm install @craco/craco --save-dev
• 在项目根目录创建craco.config.js，添加PDF资源规则：

module.exports = {
  webpack: {
    module: {
      rules: [
        {
          test: /\.pdf$/,
          type: 'asset/resource',
          generator: {
            filename: 'static/media/[name].[hash][ext]'
          }
        }
      ]
    }
  }
};

• 修改package.json中的启动脚本为craco start、craco build
• 之后即可直接从src/assets导入PDF：

import samplePdf from './assets/sample.pdf';
import { Document, Page } from 'react-pdf';

export default function PdfViewer() {
  return (
    <Document file={samplePdf}>
      <Page pageNumber={1} />
    </Document>
  );
}

3. 修复fetch加载Blob的问题

若坚持使用fetch方式，需明确指定响应类型为blob，并正确创建Object URL：

import { useState, useEffect } from 'react';
import { Document, Page } from 'react-pdf';

export default function PdfViewer() {
  const [pdfUrl, setPdfUrl] = useState(null);

  useEffect(() => {
    // 路径根据实际位置调整，public下用'/sample.pdf'，src/assets下需配置webpack后用相对路径
    fetch('./assets/sample.pdf')
      .then(res => {
        if (!res.ok) throw new Error('资源请求失败');
        return res.blob();
      })
      .then(blob => {
        const url = URL.createObjectURL(blob);
        setPdfUrl(url);
      })
      .catch(err => console.error(err));
    
    // 组件卸载时释放URL对象
    return () => {
      if (pdfUrl) URL.revokeObjectURL(pdfUrl);
    };
  }, []);

  if (!pdfUrl) return <div>加载中...</div>;

  return (
    <Document file={pdfUrl}>
      <Page pageNumber={1} />
    </Document>
  );
}

4. 额外排查点

• 确认PDF文件无损坏：用本地PDF阅读器打开测试，排除文件本身问题
• 更新react-pdf版本：执行npm install react-pdf@latest，避免版本兼容问题
• 检查路由配置：若使用React Router，确保未将PDF资源路径误当作路由规则处理

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