网页PDF文档加载异常及语法错误排查求助

问题描述 #

我需要在网页中展示PDF文档，用户阅读后点击确认按钮，确认后才能提交。但当前代码有时会出现文档加载失败（页面显示“failed to load document”），甚至导致整个网页崩溃，本地环境抛出错误：

Uncaught SyntaxError: Unexpected token '<' at handleError (http://localhost:3000/static/js/bundle.js:76476:58)

相关代码 #

页面渲染代码 #

<div>
  <h3>Document</h3>
  <Document
    file={process.env.PUBLIC_URL + '/Docs/test.pdf'} // Specify the path to your PDF document
    onLoadSuccess={onDocumentLoadSuccess}
  >
    <Page pageNumber={pageNumber} />
  </Document>
  {!userData.documentAcknowledged && (
    <button type="button" onClick={handleDocumentAcknowledgement}>
      Acknowledge Document
    </button>
  )}
</div>  

函数与状态定义 #

const handleDocumentAcknowledgement = () => {
  setUserData({ ...userData, documentAcknowledged: true });
};

const onDocumentLoadSuccess = ({ numPages }) => {
  setNumPages(numPages);
};

const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);

排查方向 #

• 路径有效性验证：直接在浏览器地址栏访问process.env.PUBLIC_URL + '/Docs/test.pdf'对应的完整URL，确认是否能正常打开PDF。如果返回HTML页面（比如404页面），PDF解析器会尝试解析HTML内容，从而触发Unexpected token '<'错误——因为HTML以<开头，不符合PDF格式规范。
• 依赖兼容性检查：确认使用的PDF渲染库（如react-pdf）版本与当前React版本兼容。版本不匹配可能导致加载逻辑异常，引发崩溃或加载失败。
• 添加错误处理逻辑：当前代码未处理文档加载失败的场景，可通过onLoadError回调捕获错误，避免网页崩溃，同时便于定位问题：

  <Document
    file={process.env.PUBLIC_URL + '/Docs/test.pdf'}
    onLoadSuccess={onDocumentLoadSuccess}
    onLoadError={(error) => {
      console.error('PDF加载失败:', error);
      // 可在此添加用户可见的错误提示
    }}
  >
    <Page pageNumber={pageNumber} />
  </Document>
  

• 静态资源部署检查：确认PDF文件在构建后被正确放置到目标目录。以Create React App为例，PUBLIC目录下的文件会被直接复制到构建产物中，需检查构建后的文件结构，确保Docs/test.pdf存在。
• 缓存清理：浏览器缓存可能保留了错误的响应内容，尝试清除缓存或强制刷新页面（Ctrl+F5）后重新测试。
• 跨域配置验证：如果PDF文件部署在外部域名，需确认服务器已配置CORS允许当前域名访问，否则会因跨域限制导致加载失败。

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