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 的使用非常简单。以下是一个基本的示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>pdf.js 示例</title> <script src="path/to/pdf.js"></script> </head> <body> <div> <canvas id="pdf-canvas"></canvas> </div> <script> // 获取 PDF 文档 const pdfUrl = 'path/to/pdf/document.pdf'; // 获取 canvas 元素 const canvas = document.getElementById('pdf-canvas'); // 用 pdf.js 渲染 PDF 文档 pdfjsLib.getDocument(pdfUrl).promise.then(function(pdfDoc) { pdfDoc.getPage(1).then(function(page) { const viewport = page.getViewport({scale: 1}); const context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; page.render({ canvasContext: context, viewport: viewport }); }); }); </script> </body> </html>
在这个示例中，首先在 <head> 部分引入 pdf.js 库，然后在 <body> 中创建一个 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; });
