pdf.js如何使用

PDF.js 是一个开源的 JavaScript 库，旨在通过现代 Web 标准（例如 HTML5 和 WebGL）在浏览器中渲染 PDF 文档。 它不仅可以让开发者轻松地在网页上嵌入和显示 PDF 文件，还提供了丰富的 API 以实现自定义功能。在接下来的文章中，我们将详细介绍如何使用 PDF.js，从基本安装到高级功能的实现，全面解析如何在项目中高效地集成和使用 PDF.js。

一、PDF.js 的安装与基本使用

1、安装 PDF.js

要使用 PDF.js，首先需要将其安装到项目中。可以通过以下几种方式安装：

通过 npm 安装

npm install pdfjs-dist

通过 CDN 引入

如果不想通过 npm 安装，可以直接通过 CDN 引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>

2、基本使用方法

安装完成后，我们可以通过以下步骤在网页中显示一个 PDF 文件：

引入 PDF.js

<script src="path/to/pdf.js"></script>

创建一个用于展示 PDF 的容器

<canvas id="pdf-canvas"></canvas>

使用 JavaScript 加载 PDF 文件

const url = 'path/to/your.pdf';
const loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(pdf => {
  pdf.getPage(1).then(page => {
    const scale = 1.5;
    const viewport = page.getViewport({ scale: scale });
    const canvas = document.getElementById('pdf-canvas');
    const context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    const renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);
  });
});

二、深入理解 PDF.js 的核心功能

1、加载 PDF 文件

PDF.js 使用 pdfjsLib.getDocument 方法加载 PDF 文件。这个方法返回一个 Promise，该 Promise 解析为一个 PDFDocumentProxy 对象，代表整个 PDF 文件。

const loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(pdf => {
  // PDF 加载成功
}).catch(error => {
  // PDF 加载失败
});

2、渲染 PDF 页面

PDF.js 提供了 getPage 方法来获取 PDF 文件中的特定页面。获取到页面后，可以使用 page.render 方法将页面渲染到 HTML5 Canvas 上。

pdf.getPage(pageNumber).then(page => {
  const viewport = page.getViewport({ scale: scale });
  const canvas = document.getElementById('pdf-canvas');
  const context = canvas.getContext('2d');
  canvas.height = viewport.height;
  canvas.width = viewport.width;
  const renderContext = {
    canvasContext: context,
    viewport: viewport
  };
  page.render(renderContext);
});

3、分页功能的实现

为了在网页上实现 PDF 的分页功能，可以通过监听按钮的点击事件来加载不同的页面。下面是一个简单的分页功能实现示例：

let currentPage = 1;
const totalPages = pdf.numPages;
document.getElementById('prev-page').addEventListener('click', () => {
  if (currentPage <= 1) return;
  currentPage--;
  renderPage(currentPage);
});
document.getElementById('next-page').addEventListener('click', () => {
  if (currentPage >= totalPages) return;
  currentPage++;
  renderPage(currentPage);
});
function renderPage(pageNumber) {
  pdf.getPage(pageNumber).then(page => {
    const viewport = page.getViewport({ scale: scale });
    const canvas = document.getElementById('pdf-canvas');
    const context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    const renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);
  });
}

三、PDF.js 高级功能

1、文本层的提取与显示

PDF.js 提供了一个文本层 API，可以提取和显示 PDF 页面中的文本内容。这对于实现搜索功能和文本高亮显示非常有用。

pdf.getPage(pageNumber).then(page => {
  page.getTextContent().then(textContent => {
    const textLayerDiv = document.createElement('div');
    textLayerDiv.className = 'textLayer';
    page.getViewport({ scale: scale }).convertToViewportPoint;
    pdfjsLib.renderTextLayer({
      textContent: textContent,
      container: textLayerDiv,
      viewport: viewport,
      textDivs: []
    });
    document.getElementById('pdf-container').appendChild(textLayerDiv);
  });
});

2、注释与标记

PDF.js 还支持加载和显示 PDF 文件中的注释和标记。通过 getAnnotations 方法，可以获取页面上的注释信息，并通过自定义绘制方法将其显示在页面上。

pdf.getPage(pageNumber).then(page => {
  page.getAnnotations().then(annotations => {
    annotations.forEach(annotation => {
      // 自定义绘制注释
    });
  });
});

3、PDF 文件的下载与保存

为了实现 PDF 文件的下载功能，可以使用 HTML5 的 File API 和 PDF.js 提供的 getData 方法，将 PDF 文件的数据转换为 Blob 对象，并生成一个下载链接。

function downloadPDF() {
  pdf.getData().then(data => {
    const blob = new Blob([data], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'downloaded.pdf';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  });
}

四、在项目中集成 PDF.js 的最佳实践

1、优化性能

在处理大文件或高分辨率 PDF 时，性能优化非常重要。以下是一些优化建议：

懒加载：只在用户需要时加载和渲染页面。
缓存页面：避免重复渲染已经加载的页面。
使用 Worker：PDF.js 支持使用 Web Worker 来处理 PDF 文件，避免阻塞主线程。

2、错误处理

在加载和渲染 PDF 时，可能会遇到各种错误。建议在每个 Promise 中添加错误处理逻辑，以确保用户能够得到友好的错误提示。

const loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(pdf => {
  // PDF 加载成功
}).catch(error => {
  console.error('Error loading PDF:', error);
  alert('Failed to load PDF.');
});

3、自定义样式与交互

为了提升用户体验，可以根据需求自定义 PDF.js 的样式和交互。例如，可以添加缩放功能、旋转功能、文本搜索功能等。

function zoomIn() {
  scale += 0.1;
  renderPage(currentPage);
}
function zoomOut() {
  if (scale <= 0.2) return;
  scale -= 0.1;
  renderPage(currentPage);
}
document.getElementById('zoom-in').addEventListener('click', zoomIn);
document.getElementById('zoom-out').addEventListener('click', zoomOut);

五、案例分析：在实际项目中使用 PDF.js

1、在线文档预览系统

在一个在线文档预览系统中，我们可以使用 PDF.js 来实现 PDF 文件的预览、分页、缩放、旋转等功能。通过与项目管理系统（如研发项目管理系统PingCode和通用项目协作软件Worktile）集成，可以实现对文档的版本管理和协作编辑。

2、电子签名系统

在电子签名系统中，可以使用 PDF.js 来加载和显示 PDF 文件，并结合其他前端技术实现电子签名的绘制和保存。通过与后端 API 交互，可以将签名后的 PDF 文件保存到服务器。

六、总结

PDF.js 是一个功能强大且灵活的库，可以帮助开发者轻松地在网页中集成 PDF 文件的展示和操作功能。通过本文的介绍，我们详细了解了 PDF.js 的基本使用方法、核心功能和高级功能，并分享了一些在实际项目中的应用案例。希望这些内容能够帮助你更好地理解和使用 PDF.js，实现更多有趣和实用的功能。