使用react-pdf显示PDF遇bundle.js语法错误：Unexpected token '<'及加载失败

错误原因 #

这个错误的核心是react-pdf拿到的不是有效的PDF文件，而是HTML内容——<是HTML里<的转义字符，说明请求返回的是HTML页面（比如404错误页、跨域拦截提示页），代码把HTML当PDF解析就会抛出语法错误。

解决步骤 #

• 先确认PDF资源的可访问性
  直接在浏览器地址栏打开你用的PDF链接，看能不能正常加载出PDF文件。如果打不开，要么是链接失效，要么是目标服务器限制了跨域访问。

• 配置react-pdf的Worker（v3+版本必需）
  新版本react-pdf需要手动指定pdf.js的Worker脚本，否则会导致解析异常。修改代码如下：

  import React from "react";
  import { Document, Page, pdfjs } from "react-pdf";
  
  // 配置pdf.js的Worker路径
  pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
  
  const ResumeDisplay = () => {
    return (
      <div>
        <Document
          file="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
        >
          <Page pageNumber={1} />
        </Document>
      </div>
    );
  };
  
  export default ResumeDisplay;
  

• 规避跨域问题的替代方案
  如果目标服务器没开CORS，直接跨域请求会被浏览器拦截，返回的可能是跨域提示HTML。这时可以把PDF文件下载下来，放到项目的public目录里，用相对路径引用：

  // 假设dummy.pdf放在public文件夹下
  <Document file="/dummy.pdf">
    <Page pageNumber={1} />
  </Document>
  

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