前端使用 pdf.js加载PDF文件

'# 前端使用 pdf.js 加载 PDF 文件

一、背景与问题

在现代 Web 应用中，PDF 文件的处理需求日益增长。传统的解决方案通常需要后端服务进行渲染或转换，但随着浏览器能力的提升，前端直接处理 PDF 已成为可能。pdf.js 是 Mozilla 开源的 PDF 渲染库，它基于 PDF 规范的实现，能够直接在浏览器中解析和渲染 PDF 文件。

然而，实际开发中会遇到诸多挑战：

如何在不依赖后端的情况下实现 PDF 预览？
如何提取 PDF 中的文本内容？
如何处理复杂的 PDF 格式（如嵌入字体、图像等）？
如何在移动端实现流畅的渲染体验？

本文将深入解析 pdf.js 的工作原理，结合实际开发场景，提供完整解决方案。

二、基本原理

pdf.js 的核心原理是将 PDF 文件的解析和渲染完全在浏览器端完成。其工作流程分为三个阶段：

1. 文件解析

PDF 文件本质上是包含多个对象的二进制文件，pdf.js 通过以下步骤解析：

将 PDF 文件读取为 ArrayBuffer
使用 pdfjsLib.PDFDocumentProxy 解析 PDF 的结构
解析 PDF 的对象树（Object Tree），包括：
- Catalog：PDF 根对象
- Pages：页面集合
- Page：单个页面的描述
- ContentStream：页面内容流

2. 文本提取

通过 TextLayer 模块提取文本内容，其原理是：

解析 ContentStream 中的文本指令
使用 TextContent 对象存储文本位置、字体等信息
构建文本布局树（Text Layout Tree）

3. 渲染

使用 canvas 元素进行渲染，核心流程：

创建 canvas 元素并设置尺寸
使用 render 方法将 PDF 页面内容绘制到 canvas
通过 TextLayer 展示文本层（可选）

三、环境准备

1. 依赖引入

<!-- 最新版 pdf.js -->
<script src="https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.min.js"></script>

2. 开发环境配置

推荐使用以下工具链：

Webpack：打包 pdf.js
TypeScript：类型支持
Vite：快速开发

四、核心实现

1. 基础加载与渲染

<!DOCTYPE html>
<html>
  <body>
    <input type="file" id="pdfInput" accept="application/pdf" />
    <canvas id="pdfCanvas" width="800" height="1000"></canvas>
    <script src="https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.min.js"></script>
    <script>
      const pdfViewer = (async () => {
        const fileInput = document.getElementById('pdfInput');
        const file = fileInput.files[0];
        const reader = new FileReader();
        
        reader.onload = async function () {
          const pdf = await pdfjsLib.getDocument(reader.result).promise;
          const page = await pdf.getPage(1);
          
          const viewport = page.getViewport({ scale: 1.5 });
          const canvas = document.getElementById('pdfCanvas');
          const context = canvas.getContext('2d');
          
          // 设置 canvas 尺寸
          canvas.width = viewport.width;
          canvas.height = viewport.height;
          
          // 渲染页面
          const renderContext = {
            canvasContext: context,
            viewport: viewport
          };
          await page.render(renderContext).promise;
        };
        
        reader.readAsArrayBuffer(file);
      })();
    </script>
  </body>
</html>

关键代码解释：

pdfjsLib.getDocument()：获取 PDF 文档对象
getPage()：获取指定页面的 Page 对象
getViewport()：计算渲染区域的尺寸
render()：将页面内容绘制到 canvas

2. 文本提取与显示

const textContainer = document.getElementById('textContainer');
const page = await pdf.getPage(1);
const textContent = await page.getTextContent();
textContent.items.forEach(item => {
  const span = document.createElement('span');
  span.textContent = item.str;
  textContainer.appendChild(span);
});

关键点：

getTextContent() 返回的 TextContent 包含所有文本项
每个文本项包含 str（文本内容）、transform（位置信息）等属性
可通过 TextLayer 实现更精确的文本展示

3. 多页渲染优化

const pages = await pdf.getPage(1);
for (let i = 1; i <= pages.length; i++) {
  const page = await pdf.getPage(i);
  const canvas = document.createElement('canvas');
  // ... 渲染逻辑
  document.getElementById('pdfContainer').appendChild(canvas);
}

性能优化建议：

使用 Web Workers 处理大文件
实现分页加载（按需渲染）
使用 requestAnimationFrame 优化渲染帧率

五、完整案例：PDF 预览器

1. 项目结构

/pdf-preview/
├── index.html
├── main.js
├── styles.css
└── assets/
    └── pdfjs-dist/

2. 完整代码

index.html

<!DOCTYPE html>
<html>
<head>
  <title>PDF Preview</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <input type="file" id="pdfInput" accept="application/pdf" />
  <div id="previewContainer"></div>
  <script src="https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.min.js"></script>
  <script src="main.js"></script>
</body>
</html>

main.js

const pdfViewer = (async () => {
  const fileInput = document.getElementById('pdfInput');
  const files = fileInput.files;
  if (!files.length) return;
  
  const file = files[0];
  const reader = new FileReader();
  
  reader.onload = async function () {
    const pdf = await pdfjsLib.getDocument(reader.result).promise;
    const container = document.getElementById('previewContainer');
    
    for (let i = 1; i <= pdf.numPages; i++) {
      const page = await pdf.getPage(i);
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      
      const viewport = page.getViewport({ scale: 1.5 });
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      await page.render(renderContext).promise;
      
      const div = document.createElement('div');
      div.appendChild(canvas);
      container.appendChild(div);
    }
  };
  
  reader.readAsArrayBuffer(file);
})();

styles.css

#previewContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
}
canvas {
  border: 1px solid #ccc;
}

六、源码解析

1. PDF 解析流程

pdfjsLib.PDFDocumentProxy 是核心解析器，其工作流程如下：

解析 PDF 文件的 magic number（%PDF-1.4）
解析 Catalog 对象，获取页面集合
解析每个 Page 对象，提取内容流
解析 ContentStream 中的指令（如 Tj、Td 等）

2. 渲染机制

page.render() 的核心逻辑：

function render(renderContext) {
  const { canvasContext, viewport } = renderContext;
  const { width, height } = viewport;
  
  canvasContext.clearRect(0, 0, width, height);
  
  // 绘制背景
  canvasContext.fillStyle = '#fff';
  canvasContext.fillRect(0, 0, width, height);
  
  // 绘制内容
  canvasContext.save();
  canvasContext.translate(0, height);
  canvasContext.scale(1, -1);
  
  // 执行内容流指令
  page.contentStream.execute(canvasContext);
  
  canvasContext.restore();
}

七、进阶使用

1. 文本搜索功能

const searchText = 'example';
const matches = [];
page.getTextContent().items.forEach(item => {
  if (item.str.includes(searchText)) {
    matches.push(item);
  }
});

2. 页面缩放与旋转

const scale = 2.0;
const rotation = 90; // 0, 90, 180, 270
const viewport = page.getViewport({
  scale: scale,
  rotation: rotation
});

3. 支持 PDF/A 格式

通过设置 PDFJS.disableWorker = true 可禁用 Web Worker，但会降低性能。

八、性能与工程实践

1. 性能优化策略

优化措施	说明
分页加载	仅渲染当前可见页面
资源预加载	预加载下一页内容
压缩 canvas	使用 `canvas.toDataURL()` 优化
Web Workers	避免主线程阻塞

2. 安全风险分析

风险类型	原因	解决方案
恶意 PDF	可能包含恶意代码	使用 `PDFJS.disableWorker = true`
内存泄漏	大文件未及时释放	使用 `WeakMap` 管理对象
跨域问题	需要设置 `crossOrigin`	服务器需配置 CORS

3. 异常处理

try {
  const pdf = await pdfjsLib.getDocument(reader.result).promise;
} catch (error) {
  console.error('PDF 解析失败:', error);
}

九、常见问题与踩坑

1. 常见错误

错误类型	原因	解决方案
`PDFJS: Invalid magic number`	文件不是 PDF	验证文件类型
`PDFJS: Missing PDF version`	文件格式不支持	使用 `PDFJS.PDF_VERSION` 检查
`Uncaught TypeError: page.render is not a function`	未正确初始化	确认 `page` 对象

2. 实际开发陷阱

跨域问题：使用 fetch() 加载 PDF 时需要服务器配置 CORS
内存占用：大文件可能导致内存溢出，需分页加载
字体渲染：部分 PDF 使用嵌入字体，需启用 PDFJS.workerSrc 设置

十、最佳实践

1. 推荐方案

场景	推荐方案	说明
需要渲染 PDF	使用 pdf.js	完全前端实现
需要提取文本	使用 getTextContent()	高精度文本提取
需要支持打印	使用 canvas 打印	保持原始布局

2. 推荐配置

pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.worker.min.js';
pdfjsLib.PDFJS.workerSrc = 'https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.worker.min.js';

十一、总结

pdf.js 是一个功能强大的 PDF 处理库，通过解析 PDF 的对象结构，能够在浏览器中实现完整的 PDF 预览、文本提取和渲染功能。在实际开发中，我们需要根据具体需求选择合适的实现方式，注意性能优化和安全风险。

推荐使用场景：

需要展示 PDF 预览的 Web 应用
需要提取 PDF 文本内容的文档系统
需要支持 PDF 搜索的编辑器

不推荐使用场景：

需要处理超大规模 PDF 文件（建议使用后端服务）
需要处理加密 PDF（需额外实现解密逻辑）
对渲染性能要求极高的场景（建议使用 Web Workers）

通过合理使用 pdf.js，我们可以构建出高效、安全的 PDF 处理功能，提升用户体验。