pdf.js实现pdf预览

'# pdf.js实现pdf预览

一、背景与问题

在Web开发中，实现PDF文件的在线预览是一个常见需求。传统方案通常依赖浏览器内置的PDF查看器或第三方库，但这些方案存在以下痛点：

浏览器内置查看器在跨平台支持上存在差异（如移动端Chrome vs Firefox）
第三方库如PDFObject存在依赖复杂、功能有限的问题
需要处理PDF文件的二进制解析、页面渲染、缩放等复杂逻辑

pdf.js作为Mozilla开源的PDF查看器，提供了完整的PDF文档解析和渲染能力，其核心优势包括：

基于Web标准技术栈（Canvas+JavaScript）
支持PDF 1.7规范
可自定义渲染样式和交互逻辑
无依赖第三方库

但其也存在性能瓶颈（尤其在处理大文件时）和安全风险（需严格校验文件内容）。

二、基本原理

pdf.js通过以下核心流程实现PDF预览：

PDF文件解析：
- 使用PDFDocumentLoadingTask加载PDF文件
- 通过getPages()获取所有页面对象
- 解析页面内容（文本、图像、矢量图形）
页面渲染：
- 使用Canvas进行像素级渲染
- 通过render()方法生成Canvas上下文
- 支持缩放、旋转等变换操作
交互逻辑：
- 实现翻页、缩放、定位等交互功能
- 支持文本选择和搜索功能

其核心依赖的是PDF的底层格式解析，需要处理：

PDF的字体解析（Type 1/TrueType）
路径绘制（Path2D）
图像处理（JPEG/PNG）
文本布局（Text Shaping）

三、环境准备

# 安装pdf.js依赖
npm install pdfjs-dist

需要引入pdf.js的构建版本（推荐使用pdfjs-dist的build目录）：

<!-- 基础引入 -->
<script src="pdf.js"></script>
<script src="pdf.worker.js"></script>

注意：pdf.worker.js必须与pdf.js版本一致，且需要在Web Worker中运行。

四、核心实现

1. PDF文件加载

// pdf.js基础加载示例
const loadingTask = pdfjsLib.getDocument('example.pdf');
loadingTask.promise.then(function(pdf) {
  // 获取第1页
  const page = await pdf.getPage(1);
  // 渲染到Canvas
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');
  await page.render({
    canvasContext: context,
    // 设置缩放比例
    scale: 1.5
  }).promise;
});

关键点：

使用getDocument()创建加载任务
通过getPage()获取具体页面
render()方法需要Canvas上下文和缩放参数

2. 页面缩放与定位

// 实现缩放功能
function scalePage(page, scale) {
  const viewport = page.getViewport({ scale });
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  canvas.height = viewport.height;
  canvas.width = viewport.width;
  
  return new Promise((resolve) => {
    page.render({
      canvasContext: context,
      viewport: viewport
    }).promise.then(() => {
      resolve(canvas);
    });
  });
}

关键点：

使用getViewport()创建渲染区域
通过Canvas的尺寸控制缩放效果
确保渲染区域与页面尺寸匹配

3. 多页面预览

// 实现多页面预览
async function previewPDF(file) {
  const reader = new FileReader();
  reader.onload = async function() {
    const loadingTask = pdfjsLib.getDocument({
      data: reader.result
    });
    const pdf = await loadingTask.promise;
    const pages = [];
    
    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 });
      
      await page.render({
        canvasContext: context,
        viewport: viewport
      }).promise;
      
      pages.push(canvas);
    }
    
    // 将canvas数组插入DOM
    document.getElementById('preview-container').appendChild(...pages);
  };
  
  reader.readAsArrayBuffer(file);
}

关键点：

使用FileReader读取文件
通过getDocument()创建PDF对象
遍历所有页面进行渲染
使用canvas元素构建预览面板

五、完整案例

1. 实现PDF预览器

<!-- HTML结构 -->
<div id="preview-container"></div>
<input type="file" id="pdf-input" accept="application/pdf">

<script src="pdf.js"></script>
<script src="pdf.worker.js"></script>
<script>
// JavaScript逻辑
const input = document.getElementById('pdf-input');
input.addEventListener('change', function(e) {
  const file = e.target.files[0];
  previewPDF(file);
});
</script>

2. 增加翻页功能

// 增加翻页控制
function addPageNavigation(pdf) {
  const totalPages = pdf.numPages;
  const pagination = document.createElement('div');
  
  for (let i = 1; i <= totalPages; i++) {
    const button = document.createElement('button');
    button.textContent = i;
    button.addEventListener('click', async () => {
      const page = await pdf.getPage(i);
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      const viewport = page.getViewport({ scale: 1.5 });
      
      await page.render({
        canvasContext: context,
        viewport: viewport
      }).promise;
      
      document.getElementById('preview-container').innerHTML = '';
      document.getElementById('preview-container').appendChild(canvas);
    });
    pagination.appendChild(button);
  }
  
  document.body.appendChild(pagination);
}

3. 实现缩放控制

// 实现缩放控制
function addZoomControl(pdf) {
  const scaleInput = document.createElement('input');
  scaleInput.type = 'range';
  scaleInput.min = '0.5';
  scaleInput.max = '3';
  scaleInput.step = '0.1';
  scaleInput.value = '1.5';
  
  scaleInput.addEventListener('input', async () => {
    const currentPage = await pdf.getPage(1); // 假设当前显示第一页
    const canvas = document.getElementById('preview-container');
    const context = canvas.getContext('2d');
    
    await currentPage.render({
      canvasContext: context,
      scale: parseFloat(scaleInput.value)
    }).promise;
  });
  
  document.body.appendChild(scaleInput);
}

六、源码解析

1. PDF解析核心

// PDFDocumentLoadingTask源码片段
class PDFDocumentLoadingTask {
  constructor(pdfData) {
    this.pdfData = pdfData;
    this.parser = new PDFParser();
    this.parser.parse(this.pdfData);
  }
  
  getPages() {
    return this.parser.pages;
  }
  
  getNumPages() {
    return this.parser.numPages;
  }
}

关键点：

使用PDFParser进行二进制解析
提取页面对象数组
支持获取总页数

2. 页面渲染核心

// PageRenderContext源码片段
class PageRenderContext {
  constructor(page, canvasContext, viewport) {
    this.page = page;
    this.canvasContext = canvasContext;
    this.viewport = viewport;
  }
  
  render() {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    
    // 绘制页面内容
    context.drawImage(this.page.image, 0, 0, this.viewport.width, this.viewport.height);
    
    return canvas;
  }
}

关键点：

创建临时Canvas进行绘制
使用drawImage绘制页面内容
通过viewport控制渲染区域

七、进阶使用

1. 文本选择与高亮

// 实现文本选择功能
function addTextSelection(page) {
  const textLayer = document.createElement('div');
  textLayer.style.position = 'absolute';
  textLayer.style.top = '0';
  textLayer.style.left = '0';
  textLayer.style.width = '100%';
  textLayer.style.height = '100%';
  textLayer.style.pointerEvents = 'auto';
  
  page.getTextContent().then(function(text) {
    text.items.forEach(item => {
      const span = document.createElement('span');
      span.textContent = item.str;
      span.style.position = 'absolute';
      span.style.left = `${item.transform[4]}px`;
      span.style.top = `${item.transform[5]}px`;
      textLayer.appendChild(span);
    });
  });
  
  document.getElementById('preview-container').appendChild(textLayer);
}

2. 文本搜索功能

// 实现文本搜索功能
async function searchPDF(pdf, query) {
  const results = [];
  
  for (let i = 1; i <= pdf.numPages; i++) {
    const page = await pdf.getPage(i);
    const text = await page.getTextContent();
    
    text.items.forEach(item => {
      if (item.str.includes(query)) {
        results.push({
          page: i,
          text: item.str
        });
      }
    });
  }
  
  return results;
}

八、性能与工程实践

1. 性能优化策略

分页加载：仅加载当前可见页面
Canvas优化：使用canvas的willReadFrequently属性
Web Workers：将PDF解析移到后台线程
缓存机制：缓存已加载的页面内容

// 分页加载优化
async function lazyLoadPDF(pdf, currentPage) {
  const pages = [];
  
  for (let i = currentPage - 2; i <= currentPage + 2; i++) {
    if (i > 0 && i <= pdf.numPages) {
      const page = await pdf.getPage(i);
      pages.push(page);
    }
  }
  
  return pages;
}

2. 异常处理机制

// 异常处理示例
try {
  const pdf = await pdfjsLib.getDocument('example.pdf').promise;
  // ...处理逻辑
} catch (error) {
  console.error('PDF加载失败:', error);
  // 显示错误提示
}

3. 安全防护措施

文件类型校验：确保文件为PDF格式
内存限制：限制PDF文件大小
沙箱环境：在隔离环境中运行PDF解析

// 文件类型校验
function validatePDF(file) {
  if (file.type !== 'application/pdf') {
    throw new Error('仅支持PDF文件');
  }
  
  if (file.size > 10 * 1024 * 1024) { // 10MB
    throw new Error('文件过大');
  }
}

九、常见问题与踩坑

1. 常见错误

错误类型	原因	解决方案
`PDFJS: Invalid PDF file`	文件损坏或格式不正确	使用`file.type`校验
`Uncaught TypeError: Cannot read property 'length' of undefined`	未正确加载PDF	确保`pdf.worker.js`正确引入
`Canvas is not defined`	未正确获取Canvas上下文	使用`getContext('2d')`

2. 性能瓶颈

大文件加载时内存占用过高
多页同时渲染时卡顿
高缩放比例导致渲染延迟

3. 安全风险

PDF文件可能包含恶意代码（如JavaScript）
某些PDF格式可能触发CVE漏洞（如CVE-2023-43427）

十、最佳实践

使用最新版本：始终使用最新版pdf.js（当前最新版本：2.16.123）
按需加载：只加载当前需要的页面
内存管理：及时释放不再需要的页面对象
缓存策略：对频繁访问的页面进行缓存
错误处理：全面覆盖可能的异常情况

十一、总结

pdf.js作为开源的PDF查看器，提供了完整的PDF解析和渲染能力，适用于需要高度定制化的PDF预览场景。其核心优势在于基于Web标准的技术栈，支持丰富的交互功能，但同时也带来了性能优化和安全防护的挑战。

在实际开发中，应根据项目需求选择合适的方案：

选择pdf.js时，适合需要自定义渲染、跨平台支持的场景
避免在对PDF格式要求不高或需要快速集成的场景中使用

通过合理的设计和优化，可以充分发挥pdf.js的潜力，构建高效、安全的PDF预览系统。同时，开发人员需要关注PDF文件的合法性校验和安全防护，避免潜在的安全风险。

pdf.js实现pdf预览

一、背景与问题

二、基本原理

三、环境准备

四、核心实现

1. PDF文件加载

2. 页面缩放与定位

3. 多页面预览

五、完整案例

1. 实现PDF预览器

2. 增加翻页功能

3. 实现缩放控制

六、源码解析

1. PDF解析核心

2. 页面渲染核心

七、进阶使用

1. 文本选择与高亮

2. 文本搜索功能

八、性能与工程实践

1. 性能优化策略

2. 异常处理机制

3. 安全防护措施

九、常见问题与踩坑

1. 常见错误

2. 性能瓶颈

3. 安全风险

十、最佳实践

十一、总结

评论已关闭

推荐阅读