在网页前端显示PDF的方法有很多，其中常见的有以下几种：使用HTML 。下面将详细介绍其中的一种方法，使用 PDF.js 库来显示 PDF 文件。
PDF.js 是一个开源的 JavaScript 库，它将 PDF 文件渲染成 HTML5 元素，允许在浏览器中查看 PDF。这个库由 Mozilla 开发，提供了强大的功能和广泛的支持。使用 PDF.js 的优势在于它支持大多数现代浏览器，并且提供了丰富的 API，可以高度定制 PDF 的显示方式。
一、使用 PDF.js 渲染 PDF 文件
1. 引入 PDF.js 库
在项目中使用 PDF.js 首先需要引入 PDF.js 库。可以通过 CDN 或者下载库文件并在项目中引用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF.js Example</title>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
</head>
<body>
<canvas id="pdf-canvas"></canvas>
<script src="path/to/your/script.js"></script>
</body>
</html>
2. 加载 PDF 文件
在引入 PDF.js 库之后，可以使用它的 API 来加载和渲染 PDF 文件。以下是一个简单的示例，展示如何加载 PDF 文件并将其渲染到 HTML5 的 canvas 元素中。
// script.js
const url = 'path/to/your/pdf.pdf';
// 使用 PDF.js 获取 PDF 文档
pdfjsLib.getDocument(url).promise.then(pdfDoc => {
// 获取 PDF 的第 1 页
pdfDoc.getPage(1).then(page => {
const scale = 1.5;
const viewport = page.getViewport({ scale });
// 获取 canvas 元素并设置尺寸
const canvas = document.getElementById('pdf-canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// 渲染 PDF 页面到 canvas
const renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
3. 自定义 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>PDF.js Pagination Example</title>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
</head>
<body>
<canvas id="pdf-canvas"></canvas>
<button id="prev-page">Previous Page</button>
<button id="next-page">Next Page</button>
<script src="path/to/your/script.js"></script>
</body>
</html>
// script.js
let pdfDoc = null;
let pageNum = 1;
const scale = 1.5;
const canvas = document.getElementById('pdf-canvas');
const context = canvas.getContext('2d');
const renderPage = num => {
pdfDoc.getPage(num).then(page => {
const viewport = page.getViewport({ scale });
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
};
const loadPDF = url => {
pdfjsLib.getDocument(url).promise.then(pdf => {
pdfDoc = pdf;
renderPage(pageNum);
});
};
document.getElementById('prev-page').addEventListener('click', () => {
if (pageNum <= 1) return;
pageNum--;
renderPage(pageNum);
});
document.getElementById('next-page').addEventListener('click', () => {
if (pageNum >= pdfDoc.numPages) return;
pageNum++;
renderPage(pageNum);
});
loadPDF('path/to/your/pdf.pdf');
二、使用 HTML
1. 简单的
HTML 提供了一个简单的方式来嵌入 PDF 文件，即使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Embed PDF Example</title>
</head>
<body>
<embed src="path/to/your/pdf.pdf" type="application/pdf" width="100%" height="600px" />
</body>
</html>
2. 自定义
可以通过 CSS 自定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Embed PDF Example</title>
<style>
.pdf-embed {
border: 2px solid #000;
width: 80%;
height: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<embed src="path/to/your/pdf.pdf" type="application/pdf" class="pdf-embed" />
</body>
</html>
三、使用 iframe 标签
1. 简单的 iframe 嵌入
与