如何使用 JavaScript（PDF.js）从 PDF 文件中提取文本内容-js教程-PHP中文网

如何使用 JavaScript（PDF.js）从 PDF 文件中提取文本内容

本文详解如何通过 PDF.js 在浏览器端可靠提取 PDF 文本内容，涵盖 CDN 引入、 Worker 配置、文档加载、页面解析及完整示例代码，解决常见的 Cannot read property 'getDocument' of undefined 等初始化错误。

本文详解如何通过 pdf.js 在浏览器端可靠提取 pdf 文本内容，涵盖 cdn 引入、 worker 配置、文档加载、页面解析及完整示例代码，解决常见的 `cannot read property 'getdocument' of undefined` 等初始化错误。

PDF.js 是 Mozilla 官方维护的开源库，专为在浏览器中渲染和解析 PDF 设计，支持纯前端提取文本、元数据及结构化内容。但其核心依赖 Web Worker，若未正确配置 GlobalWorkerOptions.workerSrc，调用 pdfjsLib.getDocument() 会直接报错 Cannot read property 'getDocument' of undefined——这是因为 pdfjsLib 对象本身未成功初始化，根本原因通常是脚本未加载完成或 Worker 路径缺失。

✅ 正确引入与初始化（HTML + CDN 方式）：
必须先引入 pdf.min.js，再显式设置 worker 路径（注意版本一致性），最后调用 getDocument：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script><script>
  // ⚠️ 关键：必须在调用 getDocument 前设置 worker 路径
  pdfjsLib.GlobalWorkerOptions.workerSrc = 
    "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js";

  async function extractTextFromPdf(pdfUrl) {
    try {
      const loadingTask = pdfjsLib.getDocument(pdfUrl);
      const pdf = await loadingTask.promise;
      let fullText = "";

      // 逐页提取文本
      for (let i = 1; i <= pdf.numPages; i++) {
        const page = await pdf.getPage(i);
        const textContent = await page.getTextContent();
        const textItems = textContent.items.map(item => item.str).join(" ");
        fullText += textItems + "\n";
      }

      console.log("Extracted text:", fullText.trim());
      return fullText.trim();
    } catch (err) {
      console.error("PDF parsing failed:", err);
    }
  }

  // 使用示例（确保 dummy.pdf 位于同源下，或启用 CORS）
  extractTextFromPdf("dummy.pdf");
</script>

? 注意事项：

Browser Js

轻量级CDP浏览器控制，适用于AI代理。相较于内置浏览器工具，token消耗降低3‑10倍，仅在浏览时使用。

下载

CORS 限制：浏览器禁止跨域读取本地文件（如 file:// 协议）或非同源 PDF。开发时建议使用 http-server、Vite 或后端代理；生产环境需确保 PDF 资源支持 Access-Control-Allow-Origin 头。
Worker 路径必须匹配主库版本：CDN 中 pdf.min.js 与 pdf.worker.min.js 版本号必须严格一致，否则解析失败或静默无响应。
React/Vue 等框架中：推荐使用 pdfjs-dist/esm 模块化引入，并动态设置 worker（见答案中的 React 示例），避免全局污染。
文本提取局限性：PDF.js 提取的是逻辑文本流，不保证排版顺序（尤其多栏、扫描件或图像型 PDF）。如需高精度 OCR，需结合 Tesseract.js 等工具。

? 总结：PDF.js 是当前最稳定、兼容性最佳的前端 PDF 文本提取方案。成功的关键在于三步闭环：① 正确引入主库；② 同版本配置 Worker 路径；③ 使用 getTextContent() 异步逐页解析。跳过任一环节均会导致初始化失败或内容为空。