React项目使用pdfjs加载PDF时提示“Invalid pdf structure”问题求助

以下是几个针对性的排查和解决方向：

• 检查静态资源路径
  你当前使用的fileUrl='./test.pdf'是相对组件文件的路径，但在React项目（尤其是Create React App）中，静态资源需要放在public目录下，此时路径应该改为'/test.pdf'（根路径）。如果PDF文件不在public里，webpack不会将其作为静态资源处理，导致加载的内容不是有效的PDF文件，进而触发结构错误。

• 确保pdfjs版本与viewer兼容
  你指定的worker版本是pdfjs-dist@2.15.349，需要确认@react-pdf-viewer/core的版本是否和这个pdfjs版本匹配。不同版本的viewer依赖特定版本的pdfjs，版本不匹配会导致解析逻辑冲突。可以查看你项目中package.json里@react-pdf-viewer/core的版本，然后对应使用官方推荐的pdfjs worker版本。

• 改用ArrayBuffer方式加载文件
  避免路径问题的另一种方式是通过fetch获取文件并转为ArrayBuffer，直接传给Viewer的file属性：

  import * as React from 'react';
  import { Viewer, Worker } from '@react-pdf-viewer/core';
  import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
  
  import '@react-pdf-viewer/core/lib/styles/index.css';
  import '@react-pdf-viewer/default-layout/lib/styles/index.css';
  
  export default function Trial() {
      const defaultLayoutPluginInstance = defaultLayoutPlugin();
      const [pdfFile, setPdfFile] = React.useState(null);
  
      React.useEffect(() => {
          fetch('/test.pdf')
              .then(response => response.arrayBuffer())
              .then(buffer => {
                  setPdfFile({ data: new Uint8Array(buffer) });
              })
              .catch(err => console.error('加载PDF失败:', err));
      }, []);
  
      return (
          <Worker workerUrl="https://unpkg.com/pdfjs-dist@2.15.349/build/pdf.worker.js">
              <div
                  style={{
                      height: '750px',
                      width: '900px',
                      marginLeft: 'auto',
                      marginRight: 'auto',
                  }}
              >
                  {pdfFile && <Viewer file={pdfFile} plugins={[defaultLayoutPluginInstance]} />}
              </div>
          </Worker>
      );
  };
  

• 验证PDF文件的有效性
  即使是Acrobat生成的PDF，也可能存在某些非标准的元数据或损坏情况。你可以将PDF上传到pdfjs官方的在线演示工具中测试，如果工具也无法加载，说明文件本身需要重新导出（比如用Acrobat重新保存为PDF/A格式）；如果能正常加载，再回到项目中排查环境问题。

• 检查webpack配置（自定义项目）
  如果是自定义的React项目而非Create React App，需要确保webpack配置了file-loader或asset/resource来处理PDF文件，避免文件被错误编译：

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

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