pdf.js 如何查看页数

PDF.js 如何查看页数

要查看 PDF.js 的页数，可以通过获取 PDF 文档对象并调用其 numPages 属性来实现、加载 PDF 文件并渲染页面、使用事件监听器来处理页面导航。下面详细讲述如何实现这一过程。

PDF.js 是一个非常流行的开源 JavaScript 库，用于在 Web 浏览器中显示 PDF 文档。在使用 PDF.js 时，一个常见的需求是查看和导航 PDF 文档的页数。本文将详细介绍如何使用 PDF.js 查看 PDF 文档的页数，并提供一些实用的代码示例。

一、PDF.js 的基本介绍

PDF.js 是 Mozilla 提供的一个开源项目，旨在通过纯 JavaScript 实现 PDF 文档的解析和渲染。PDF.js 允许开发者在不依赖于外部插件的情况下，在浏览器中显示 PDF 文档。它的主要组件包括：

PDF 文档加载器：负责加载和解析 PDF 文件。
PDF 渲染器：负责将 PDF 内容渲染到 HTML5 Canvas 上。
API：提供各种方法和属性，便于与 PDF 文档进行交互。

二、加载 PDF 文档

在查看 PDF 文档页数之前，首先需要加载 PDF 文档。以下是一个基本的示例代码，展示了如何使用 PDF.js 加载 PDF 文档：

<!DOCTYPE html>
<html>
<head>
  <title>PDF.js 示例</title>
  <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
</head>
<body>
  <div>
    <button id="prev">上一页</button>
    <button id="next">下一页</button>
    <span>页数：<span id="page_num"></span> / <span id="page_count"></span></span>
  </div>
  <canvas id="pdf-canvas"></canvas>
  <script>
    var url = 'https://example.com/your-pdf-file.pdf'; // PDF 文件的 URL
    var pdfDoc = null,
        pageNum = 1,
        pageRendering = false,
        pageNumPending = null,
        canvas = document.getElementById('pdf-canvas'),
        ctx = canvas.getContext('2d');
    // 加载 PDF 文档
    pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
      pdfDoc = pdfDoc_;
      document.getElementById('page_count').textContent = pdfDoc.numPages;
      // 初始渲染第一页
      renderPage(pageNum);
    });
    // 渲染指定页码的页面
    function renderPage(num) {
      pageRendering = true;
      pdfDoc.getPage(num).then(function(page) {
        var viewport = page.getViewport({ scale: 1.5 });
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        var renderContext = {
          canvasContext: ctx,
          viewport: viewport
        };
        var renderTask = page.render(renderContext);
        renderTask.promise.then(function() {
          pageRendering = false;
          if (pageNumPending !== null) {
            renderPage(pageNumPending);
            pageNumPending = null;
          }
        });
      });
      document.getElementById('page_num').textContent = num;
    }
    // 处理上一页按钮点击事件
    document.getElementById('prev').addEventListener('click', function() {
      if (pageNum <= 1) {
        return;
      }
      pageNum--;
      renderPage(pageNum);
    });
    // 处理下一页按钮点击事件
    document.getElementById('next').addEventListener('click', function() {
      if (pageNum >= pdfDoc.numPages) {
        return;
      }
      pageNum++;
      renderPage(pageNum);
    });
  </script>
</body>
</html>

在这个示例中，我们首先通过 pdfjsLib.getDocument 方法加载 PDF 文件，并获取一个 pdfDoc 对象。然后，我们使用 pdfDoc.numPages 属性获取 PDF 文档的总页数，并将其显示在页面上。接着，我们通过 renderPage 函数渲染指定页码的页面，并处理“上一页”和“下一页”按钮的点击事件。

三、获取 PDF 文档页数

在上面的示例中，我们已经展示了如何加载 PDF 文档并渲染页面。接下来，我们重点讲述如何获取 PDF 文档的页数。

1. 使用 pdfDoc.numPages 属性

在 PDF.js 中，每个加载的 PDF 文档对象都包含一个 numPages 属性，该属性表示 PDF 文档的总页数。我们可以通过以下代码获取 PDF 文档的页数：

pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
  pdfDoc = pdfDoc_;
  var totalPages = pdfDoc.numPages;
  console.log('PDF 文档总页数：' + totalPages);
});

在这个示例中，我们通过 pdfjsLib.getDocument 方法加载 PDF 文件，并在加载完成后使用 pdfDoc.numPages 属性获取 PDF 文档的总页数。

2. 将页数显示在页面上

我们可以将获取到的页数显示在页面上，方便用户查看。例如，在上面的示例中，我们已经通过以下代码将页数显示在页面上：

document.getElementById('page_count').textContent = pdfDoc.numPages;

四、实现页面导航

除了查看 PDF 文档的页数，我们通常还需要实现页面导航功能，以便用户可以方便地在 PDF 文档中进行浏览。以下是实现页面导航的步骤：

1. 渲染指定页码的页面

在上面的示例中，我们已经展示了如何通过 renderPage 函数渲染指定页码的页面。该函数首先调用 pdfDoc.getPage 方法获取指定页码的页面对象，然后将页面内容渲染到 HTML5 Canvas 上。

2. 处理页面导航按钮点击事件

我们可以通过处理“上一页”和“下一页”按钮的点击事件，实现页面导航功能。例如：

document.getElementById('prev').addEventListener('click', function() {
  if (pageNum <= 1) {
    return;
  }
  pageNum--;
  renderPage(pageNum);
});
document.getElementById('next').addEventListener('click', function() {
  if (pageNum >= pdfDoc.numPages) {
    return;
  }
  pageNum++;
  renderPage(pageNum);
});

在这个示例中，我们为“上一页”和“下一页”按钮添加了点击事件监听器。当用户点击按钮时，页面编号会相应地增加或减少，并调用 renderPage 函数渲染新的页面。

五、处理页面缩放

除了查看页数和页面导航，我们还可以实现页面缩放功能，以便用户可以调整页面的显示比例。以下是实现页面缩放的步骤：

1. 添加缩放按钮

首先，我们在 HTML 页面中添加两个缩放按钮：“放大”和“缩小”：

<button id="zoom_in">放大</button>
<button id="zoom_out">缩小</button>

2. 处理缩放按钮点击事件

接着，我们为缩放按钮添加点击事件监听器，并在事件处理函数中调整页面的显示比例。例如：

var scale = 1.5;
document.getElementById('zoom_in').addEventListener('click', function() {
  scale += 0.1;
  renderPage(pageNum);
});
document.getElementById('zoom_out').addEventListener('click', function() {
  if (scale <= 0.5) {
    return;
  }
  scale -= 0.1;
  renderPage(pageNum);
});

在这个示例中，我们通过调整 scale 变量的值来实现页面缩放。当用户点击“放大”按钮时，scale 变量的值增加；当用户点击“缩小”按钮时，scale 变量的值减少。然后，我们调用 renderPage 函数重新渲染当前页面。

3. 调整渲染上下文

在 renderPage 函数中，我们需要根据 scale 变量的值调整渲染上下文。例如：

function renderPage(num) {
  pageRendering = true;
  pdfDoc.getPage(num).then(function(page) {
    var viewport = page.getViewport({ scale: scale });
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    var renderContext = {
      canvasContext: ctx,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);
    renderTask.promise.then(function() {
      pageRendering = false;
      if (pageNumPending !== null) {
        renderPage(pageNumPending);
        pageNumPending = null;
      }
    });
  });
  document.getElementById('page_num').textContent = num;
}

在这个示例中，我们通过 page.getViewport 方法获取指定缩放比例的视口对象，并调整 Canvas 的宽高。然后，我们将调整后的视口对象传递给 page.render 方法，以实现页面缩放效果。

六、处理页面旋转

除了页面缩放，我们还可以实现页面旋转功能，以便用户可以调整页面的显示方向。以下是实现页面旋转的步骤：

1. 添加旋转按钮

首先，我们在 HTML 页面中添加一个旋转按钮：

<button id="rotate">旋转</button>

2. 处理旋转按钮点击事件

接着，我们为旋转按钮添加点击事件监听器，并在事件处理函数中调整页面的旋转角度。例如：

var rotation = 0;
document.getElementById('rotate').addEventListener('click', function() {
  rotation += 90;
  if (rotation >= 360) {
    rotation = 0;
  }
  renderPage(pageNum);
});

在这个示例中，我们通过调整 rotation 变量的值来实现页面旋转。当用户点击旋转按钮时，rotation 变量的值增加 90 度，然后我们调用 renderPage 函数重新渲染当前页面。

3. 调整渲染上下文

在 renderPage 函数中，我们需要根据 rotation 变量的值调整渲染上下文。例如：

function renderPage(num) {
  pageRendering = true;
  pdfDoc.getPage(num).then(function(page) {
    var viewport = page.getViewport({ scale: scale, rotation: rotation });
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    var renderContext = {
      canvasContext: ctx,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);
    renderTask.promise.then(function() {
      pageRendering = false;
      if (pageNumPending !== null) {
        renderPage(pageNumPending);
        pageNumPending = null;
      }
    });
  });
  document.getElementById('page_num').textContent = num;
}

在这个示例中，我们通过 page.getViewport 方法获取指定旋转角度和缩放比例的视口对象，并调整 Canvas 的宽高。然后，我们将调整后的视口对象传递给 page.render 方法，以实现页面旋转效果。

七、处理页面跳转

除了页面导航，我们还可以实现页面跳转功能，以便用户可以直接跳转到指定页码。例如：

1. 添加跳转输入框和按钮

首先，我们在 HTML 页面中添加一个跳转输入框和跳转按钮：

<input type="number" id="page_input" min="1">
<button id="go_to_page">跳转</button>

2. 处理跳转按钮点击事件

接着，我们为跳转按钮添加点击事件监听器，并在事件处理函数中跳转到指定页码。例如：

document.getElementById('go_to_page').addEventListener('click', function() {
  var pageNumber = parseInt(document.getElementById('page_input').value);
  if (pageNumber > 0 && pageNumber <= pdfDoc.numPages) {
    pageNum = pageNumber;
    renderPage(pageNum);
  }
});

在这个示例中，我们获取用户输入的页码，并在点击跳转按钮时跳转到指定页码。然后，我们调用 renderPage 函数渲染新的页面。

八、总结

通过本文的介绍，我们详细讲述了如何使用 PDF.js 查看 PDF 文档的页数，并实现页面导航、页面缩放、页面旋转和页面跳转功能。希望这些内容对您在开发 PDF.js 应用时有所帮助。

在实际项目中，您可能还需要根据具体需求进行更多的定制和扩展。例如，您可以添加更多的界面控件和交互功能，以提升用户体验。同时，您还可以结合其他前端技术，如 React、Vue 等框架，将 PDF.js 集成到更复杂的应用中。

如果您正在寻找项目团队管理系统，我们推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile。这两个系统提供了强大的项目管理和协作功能，能够帮助团队提高效率，提升项目管理水平。