使用pdf.js加载PDF时出现PDFJS is not defined错误的技术求助

兄弟，我之前刚踩过这个坑！问题出在pdf.js的版本更新上——现在的新版pdf.js（v2.0及以后）已经废弃了PDFJS这个全局对象，改用pdfjsLib作为全局入口了，这就是你找不到它的核心原因。

下面给你一步步解决的方法：

1. 确认正确引入pdf.js库 #

首先要确保你引入了正确的库文件，推荐用官方稳定的CDN或者本地安装：

<!-- 引入pdf.js核心库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.min.js"></script>
<!-- 单独引入worker脚本（也可以通过代码配置指定路径） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.worker.min.js"></script>

2. 替换代码中的PDFJS为pdfjsLib #

把你原有代码里所有的PDFJS都改成pdfjsLib，比如原来的：

PDFJS.getDocument(url).then(pdf => {
  // 处理PDF逻辑
});

要改成：

pdfjsLib.getDocument(url).then(pdf => {
  // 处理PDF逻辑
});

3. 配置Worker路径（关键！） #

新版pdf.js依赖worker进程解析PDF，必须指定worker的路径才能正常运行。你可以在代码开头加上配置：

pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.worker.min.js';

如果是本地部署的文件，就换成对应的本地路径，比如'/static/js/pdf.worker.min.js'。

完整的最简测试示例 #

给你一个可以直接运行的示例，你可以对比自己的代码排查问题：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>PDF.js测试</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.min.js"></script>
</head>
<body>
  <div id="pdf-container"></div>

  <script>
    // 配置Worker路径
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.worker.min.js';

    // 测试用PDF地址（可替换为你自己的文件）
    const pdfUrl = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';

    // 加载并渲染PDF
    pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
      console.log('PDF加载成功！总页数：', pdf.numPages);
      // 加载第一页示例
      return pdf.getPage(1);
    }).then(page => {
      const scale = 1.5;
      const viewport = page.getViewport({ scale: scale });
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      document.getElementById('pdf-container').appendChild(canvas);
      // 渲染页面到canvas
      return page.render({ canvasContext: context, viewport: viewport }).promise;
    }).catch(error => {
      console.error('PDF加载失败：', error);
    });
  </script>
</body>
</html>

额外排查点 #

• 检查脚本引入顺序：必须先引入pdf.js，再执行你的业务代码，不能反过来
• 打开浏览器控制台的「网络」标签，确认pdf.js和worker脚本都加载成功（没有404错误）
• 如果用了jQuery的$(document).ready()，确保你的PDF操作代码完全包裹在这个回调里，保证DOM加载完成后再执行

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