前端渲染 PDF 文件解决方案：pdf.js
pdf.js 是一个开源的 JavaScript 库，用于在 Web 浏览器中渲染 PDF 文件。它由 Mozilla 开发，旨在让开发者无需依赖传统的插件（如 Adobe Reader）即可直接在浏览器中展示 PDF 文件。通过 pdf.js，开发者可以方便地将 PDF 文档嵌入网页，提供灵活的控制功能，如页面导航、文本选择、缩放等。
1. pdf.js 简介
pdf.js 是一个纯 JavaScript 实现的 PDF 渲染引擎，可以在浏览器中直接解析和渲染 PDF 文件。pdf.js 提供了简单的 API 来加载 PDF 文件、解析内容，并在 HTML5 <canvas> 元素上绘制图形，使得 PDF 文件能够被直接渲染在网页上。
2. 使用 pdf.js 渲染 PDF 文件
步骤 1：引入 pdf.js
首先，需要通过 CDN 或者本地引入 pdf.js 库。
- 通过 CDN 引入：
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
- 下载并本地引入：
你可以从 pdf.js GitHub 页面下载库文件，或者通过 npm 安装（如果你使用模块化构建工具如 Webpack、Parcel）。
npm install pdfjs-dist
步骤 2：初始化 PDF 渲染
通过 pdf.js 的 API 可以加载并渲染 PDF 文件。下面是一个简单的实现，展示如何在网页中渲染 PDF。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Render PDF with pdf.js</title>
</head>
<body>
<h1>PDF.js Demo</h1>
<canvas id="pdf-canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<script>
// 使用 PDF.js 渲染 PDF 文件
const url = 'https://example.com/sample.pdf'; // 替换为你的 PDF 文件的 URL
// 加载 PDF 文档
pdfjsLib.getDocument(url).promise.then(function (pdfDoc_) {
// 获取 PDF 文档对象
const pdfDoc = pdfDoc_;
const canvas = document.getElementById('pdf-canvas');
const context = canvas.getContext('2d');
// 获取第 1 页
pdfDoc.getPage(1).then(function (page) {
const viewport = page.getViewport({ scale: 1 });
canvas.height = viewport.height;
canvas.width = viewport.width;
// 渲染 PDF 页面到 canvas 上
const renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
</script>
</body>
</html>
3. 详细代码解析
pdfjsLib.getDocument(url).promise：加载 PDF 文件。url可以是本地路径，也可以是远程 URL，promise确保加载 PDF 文档成功后继续执行下一步。pdfDoc.getPage(1)：获取 PDF 的第 1 页。你可以通过调整页码来渲染不同的页面。page.getViewport({ scale: 1 })：获取 PDF 页面的视口，scale参数用于调整页面的缩放比例。page.render()：将该页面渲染到指定的<canvas>元素中，renderContext提供了渲染所需的上下文信息。
4. 处理多页 PDF 文件
如果你要展示多页 PDF 文件，通常需要提供分页控制（例如“上一页”或“下一页”按钮）。你可以通过调整渲染的页码来实现这一点。
示例：分页控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF.js Pagination</title>
</head>
<body>
<h1>PDF Pagination</h1>
<canvas id="pdf-canvas"></canvas>
<br>
<button id="prev">Previous Page</button>
<button id="next">Next Page</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<script>
let currentPage = 1; // 当前页面
let pdfDoc = null; // PDF 文档对象
const url = 'https://example.com/sample.pdf'; // PDF 文件 URL
const canvas = document.getElementById('pdf-canvas');
const context = canvas.getContext('2d');
// 加载 PDF 文档
pdfjsLib.getDocument(url).promise.then(function (pdfDoc_) {
pdfDoc = pdfDoc_;
renderPage(currentPage); // 渲染第一页
});
// 渲染页面
function renderPage(pageNum) {
pdfDoc.getPage(pageNum).then(function (page) {
const viewport = page.getViewport({ scale: 1 });
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
}
// 下一页按钮
document.getElementById('next').addEventListener('click', function () {
if (currentPage < pdfDoc.numPages) {
currentPage++;
renderPage(currentPage);
}
});
// 上一页按钮
document.getElementById('prev').addEventListener('click', function () {
if (currentPage > 1) {
currentPage--;
renderPage(currentPage);
}
});
</script>
</body>
</html>
功能说明：
currentPage：当前显示的页面。renderPage(pageNum)：渲染指定页面的函数。next和prev按钮用于切换页面。
5. 控制缩放和视图调整
pdf.js 也支持动态缩放页面。你可以通过调整 scale 参数来实现页面缩放效果。
const scale = 1.5; // 设置缩放比例
pdfDoc.getPage(1).then(function (page) {
const viewport = page.getViewport({ scale: scale });
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
6. 支持其他功能
除了基本的页面渲染和缩放控制，pdf.js 还支持其他高级功能，例如：
- 文本选择：可以选择并复制 PDF 文件中的文本。
- 注释：在 PDF 页面上添加注释或高亮显示。
- 搜索：搜索 PDF 文档中的特定内容。
- PDF 表单：支持填充和提交 PDF 表单。
7. 总结
pdf.js 是一种强大的前端 PDF 渲染方案，能够将 PDF 文件直接渲染到浏览器中，提供了丰富的 API 和控件以便于开发者实现各种交互功能，如页面导航、缩放、文本选择等。它适用于大多数现代浏览器，且无需任何插件或额外的安装，非常适合用于需要在网页中展示和操作 PDF 文件的场景。
发表回复