pdfjs 使用指南

PDF.js 是一个功能丰富的库，它提供了许多 API 用于加载、解析、渲染和操作 PDF 文件。以下是 PDF.js 的主要 API 概述，以及一些常用的函数和对象。

PDF.js 主要 API 概述

• pdfjsLib.getDocument()
  用于加载 PDF 文档的核心函数。返回一个包含 PDF 文档信息的 PDFDocumentProxy 对象。

• PDFDocumentProxy
  代表整个 PDF 文档的代理对象，包含文档级别的操作方法。

• PDFPageProxy
  代表 PDF 文档中的单个页面的代理对象，包含与页面渲染、获取文本等相关的操作方法。

• PDFRenderTask
  表示页面渲染操作的对象，通常是通过调用 page.render() 方法返回的。

• TextContent
  表示页面的文本内容，包含每个字符的位置和样式信息。

常用的 API 和函数

1. 加载 PDF 文档
   pdfjsLib.getDocument(src).promise
   参数：
   src: 文件的 URL 或 ArrayBuffer。
   返回：
   Promise：加载完成后返回 PDFDocumentProxy 对象。
2. PDFDocumentProxy 对象的方法
   • getPage(pageNumber)
     获取指定页码的页面对象。
     pdfDoc.getPage(1).then((page) => { … });
   • numPages
     pdfDoc.numPages
     返回 PDF 文件的总页数。
   • getMetadata()
     获取 PDF 文档的元数据，包括信息和元标签。
     pdfDoc.getMetadata().then((metadata) => { … });
   • getOutline()
     获取 PDF 文档的目录大纲（书签）。
     pdfDoc.getOutline().then((outline) => { … });
   • getAttachments()
     获取 PDF 文档的附件。
     pdfDoc.getAttachments().then((attachments) => { … });
   • getDestinations()
     获取文档中的命名目的地。
     pdfDoc.getDestinations().then((destinations) => { … });
   • getJavaScript()
     获取 PDF 文档中嵌入的 JavaScript。
     pdfDoc.getJavaScript().then((js) => { … });
3. PDFPageProxy 对象的方法
   • render(renderContext)
     渲染 PDF 页面到指定的渲染上下文中，如 Canvas。
     const renderTask = page.render({
     canvasContext: canvas.getContext(‘2d’),
     viewport: page.getViewport({ scale: 1.0 }),
     });
   • getViewport(scale)
     获取页面视口，允许设置缩放比例。
     const viewport = page.getViewport({ scale: 1.5 });
   • getTextContent()
     获取页面的文本内容，包括每个字符的位置和样式。
     page.getTextContent().then((textContent) => { … });
   • getAnnotations()
     获取页面上的注释和标注信息。
     page.getAnnotations().then((annotations) => { … });
   • getOperatorList()
     获取页面的操作符列表，通常用于自定义渲染。
     page.getOperatorList().then((ops) => { … });
4. 其他常用对象和方法
   GlobalWorkerOptions.workerSrc
   设置 PDF.js 使用的 Web Worker 文件路径，以提升性能。
   pdfjsLib.GlobalWorkerOptions.workerSrc = ‘path/to/pdf.worker.js’;
   PDFJS.version 和 PDFJS.build
   获取当前 PDF.js 库的版本和构建号。

使用示例

以下是一个完整示例，展示如何使用 PDF.js 加载 PDF 文档并渲染第一页到 Canvas：

<canvas id="pdfCanvas"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
<script>
  const url = 'path/to/your/file.pdf';

  // 设置 PDF.js worker 文件路径
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';

  // 加载 PDF 文档
  pdfjsLib.getDocument(url).promise.then((pdfDoc) => {
    console.log(`PDF loaded with ${pdfDoc.numPages} pages`);

    // 获取第一页
    return pdfDoc.getPage(1);
  }).then((page) => {
    const viewport = page.getViewport({ scale: 1.5 });
    const canvas = document.getElementById('pdfCanvas');
    const context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    // 渲染页面到 Canvas
    const renderContext = {
      canvasContext: context,
      viewport: viewport,
    };
    return page.render(renderContext).promise;
  }).then(() => {
    console.log('Page rendered');
  }).catch((error) => {
    console.error('Error loading PDF:', error);
  });
</script>

总结

PDF.js 提供了丰富的 API，可以满足各种 PDF 文档解析、渲染和操作的需求。从简单的渲染到复杂的文本和元数据提取，PDF.js 都可以轻松实现。要全面掌握其功能，可以参考官方文档并结合实际项目中的应用需求进行深入学习。