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;
});
