PDF.js简介

pdf.js 是一个由 Mozilla 开发的 JavaScript 库，可以在 Web 浏览器中显示 PDF 文档。pdf.js 将 PDF 文档转换为 HTML5 Canvas 元素，并使用 JavaScript 控制文档的呈现和交互。pdf.js 使得不需要在计算机上安装 Adobe Reader 或其他 PDF 阅读器就可以在 Web 上阅读 PDF 文档成为可能。pdf.js是一个免费的开源软件，使用和修改都非常方便。

安装

pdf.js 可以从其官方网站下载。

使用

pdf.js 的使用非常简单。以下是一个基本的示例：

在这个示例中，首先在 部分引入 pdf.js 库，然后在 中创建一个 canvas 元素，用于显示 PDF 文档。使用 pdfjsLib.getDocument 方法获取 PDF 文档对象，然后用 pdfDoc.getPage 方法获取第一页，并将其渲染到 canvas 元素中。可以根据需要更改页面号码、缩放比例以及其他参数，以根据您的需求自定义 PDF 文档的呈现方式。

pdf.js 还支持各种 PDF 功能，如缩放、旋转和拖动等。您可以使用页面上的按钮或编写 JavaScript 代码以实现这些功能。下面是一些示例代码：

// 缩放 PDF 文档
const zoomInButton = document.getElementById('zoom-in');
const zoomOutButton = document.getElementById('zoom-out');
const resetZoomButton = document.getElementById('reset-zoom');

let currentScale = 1;
const MAX_SCALE = 3;
const MIN_SCALE = 0.5;

zoomInButton.addEventListener('click', function() {
  if (currentScale < MAX_SCALE) {
    currentScale += 0.5;
    pdfViewer.currentScaleValue = currentScale;
  }
});

zoomOutButton.addEventListener('click', function() {
  if (currentScale > MIN_SCALE) {
    currentScale -= 0.5;
    pdfViewer.currentScaleValue = currentScale;
  }
});

resetZoomButton.addEventListener('click', function() {
  currentScale = 1;
  pdfViewer.currentScaleValue = currentScale;
});

// 旋转 PDF 文档
const rotateLeftButton = document.getElementById('rotate-left');
const rotateRightButton = document.getElementById('rotate-right');

rotateLeftButton.addEventListener('click', function() {
  pdfViewer.pages.forEach(function(page) {
    const currentRotation = page.rotation;
    page.setRotation(currentRotation - 90);
  });
});

rotateRightButton.addEventListener('click', function() {
  pdfViewer.pages.forEach(function(page) {
    const currentRotation = page.rotation;
    page.setRotation(currentRotation + 90);
  });
});

// 拖动 PDF 文档
const pdfContainer = document.getElementById('pdf-container');

let isDragging = false;
let startPoint = {};
let currentPoint = {};

pdfContainer.addEventListener('mousedown', function(event) {
  isDragging = true;
  startPoint.x = event.clientX;
  startPoint.y = event.clientY;
});

pdfContainer.addEventListener('mousemove', function(event) {
  if (isDragging) {
    currentPoint.x = event.clientX;
    currentPoint.y = event.clientY;
    const deltaX = currentPoint.x - startPoint.x;
    const deltaY = currentPoint.y - startPoint.y;
    pdfViewer.scrollLeft -= deltaX;
    pdfViewer.scrollTop -= deltaY;
    startPoint.x = currentPoint.x;
    startPoint.y = currentPoint.y;
  }
});

pdfContainer.addEventListener('mouseup', function() {
  isDragging = false;
});