在 Web 开发中，实现 PDF 文件的在线预览是一个常见需求。而 pdf.js 作为一款优秀的开源 PDF 处理工具，为我们提供了便捷的解决方案。本文将详细介绍 pdf.js 的相关知识以及如何在项目中集成使用。
一、pdf.js 简介
pdf.js 是由 Mozilla 开发的一款基于 HTML5 技术的 PDF 查看器，它能够在网页环境中直接渲染 PDF 文件，无需依赖任何浏览器插件，为 Web 开发中处理 PDF 文件提供了便捷的解决方案。
二、使用 pdf.js 的优势
- 跨平台兼容性好：在各种主流浏览器（如 Chrome、Firefox、Safari、Edge 等）上都能正常工作，保证了不同用户的使用体验。
- 开源免费：遵循 Apache 2.0 开源协议，开发者可以自由修改、使用和分发，降低了项目的成本。
- 丰富的 API：提供了一系列强大的 API，方便开发者进行定制化开发，满足不同项目的特殊需求。
- 高性能：采用了高效的渲染引擎，能够快速加载和渲染 PDF 文件，即使是大型 PDF 文件也能有较好的表现。
三、pdf.js 的集成步骤
3.1 获取 pdf.js
获取 pdf.js 有两种常见方式：
- 通过 npm 安装：在项目根目录下运行以下命令：
javascript
npm install pdfjs-dist3.2 引入 pdf.js
在 HTML 文件中通过 script 标签引入 pdf.js 的核心文件和工作器文件：
javascript
<!-- 引入核心文件 -->
<script src="path/to/pdf.js"></script>
<!-- 引入工作器文件 -->
<script>
pdfjsLib.GlobalWorkerOptions.workerSrc = 'path/to/pdf.worker.js';
</script>如果是通过 npm 安装的，可以这样引入：
javascript
import pdfjsLib from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;3.3 实现 PDF 预览功能
以下是一个简单的 PDF 预览示例代码：
javascript
<!DOCTYPE html>
<html>
<head>
<title>PDF 预览示例</title>
<style>
#pdfContainer {
width: 80%;
margin: 0 auto;
}
.pdfPage {
margin-bottom: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="pdfContainer"></div>
<script src="node_modules/pdfjs-dist/build/pdf.js"></script>
<script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
<script>
// 设置工作器路径
pdfjsLib.GlobalWorkerOptions.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.js';
// PDF 文件路径
const pdfUrl = 'test.pdf';
// 创建 PDF 容器
const container = document.getElementById('pdfContainer');
// 加载 PDF 文件
const loadingTask = pdfjsLib.getDocument(pdfUrl);
loadingTask.promise.then(function(pdf) {
console.log('PDF 加载成功！');
// 渲染所有页面
for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
pdf.getPage(pageNum).then(function(page) {
// 设置缩放比例
const scale = 1.5;
const viewport = page.getViewport({ scale: scale });
// 创建 canvas 元素
const canvas = document.createElement('canvas');
canvas.className = 'pdfPage';
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// 将 canvas 添加到容器
container.appendChild(canvas);
// 渲染页面
const renderContext = {
canvasContext: context,
viewport: viewport
};
const renderTask = page.render(renderContext);
renderTask.promise.then(function() {
console.log(`第 ${pageNum} 页渲染完成`);
});
});
}
}).catch(function(error) {
console.error('PDF 加载失败：', error);
});
</script>
</body>
</html>四、进阶功能
- 缩放功能：通过修改渲染时的 scale 参数，可以实现 PDF 页面的缩放。
- 旋转功能：利用 page.getViewport 方法中的 rotate 参数，可对页面进行旋转操作，如 rotate: 90 表示顺时针旋转 90 度。
- 翻页功能：通过记录当前页码，结合按钮点击事件，加载上一页或下一页的内容。
- 搜索功能：使用 pdf.js 提供的 API 可以实现对 PDF 内容的搜索，获取搜索结果并高亮显示。
五、注意事项
- 大型 PDF 文件：对于大型 PDF 文件，一次性加载和渲染所有页面可能会影响性能，可采用分页加载的方式，即只加载当前需要查看的页面，当用户翻页时再加载相应页面。
- 兼容性：虽然 pdf.js 在大多数主流浏览器上兼容性较好，但在一些旧版本浏览器上可能会出现问题，建议在项目开发过程中进行充分的测试。
- 跨域问题：如果 PDF 文件来自不同的域名，需要确保服务器端设置了正确的跨域头信息，否则可能会出现无法加载的问题。
结束！