HTML中如何嵌入PDF文档
在现代Web开发中，经常需要在网页中直接展示PDF文档，例如在线预览合同、产品说明书或学术论文。不同于下载文件，嵌入PDF可以让用户在不离开当前页面的情况下查看文档内容。本文将从多种方法出发，详细介绍如何在HTML中嵌入PDF文档，并对比各自的优缺点。
一、使用<iframe>标签嵌入PDF
<iframe>是最简单且兼容性最好的方式之一。它可以在页面中创建一个内联框架，直接加载PDF文件的URL。浏览器会自动调用内置的PDF阅读器（如Chrome或Firefox的PDF插件）来渲染文档。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>PDF嵌入示例</title> </head> <body> <h3>使用iframe嵌入PDF</h3> <iframe src="https://www.ipipp.com/sample.pdf" width="100%" height="600px"> 您的浏览器不支持iframe，请点击<a href="https://www.ipipp.com/sample.pdf">这里</a>下载PDF文件。 </iframe> </body> </html>
优点：实现简单，无需第三方库；浏览器原生支持多数PDF功能（如缩放、搜索、打印）。
缺点：不同浏览器的PDF阅读器UI不一致；移动端支持有限；无法自定义外观。
二、使用<embed>标签嵌入PDF
<embed>标签是HTML5中定义的元素，专门用于嵌入外部内容（如插件、媒体文件）。它也可以直接加载PDF文档，并且比<iframe>更简洁（没有额外框架）。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>embed嵌入PDF</title> </head> <body> <h3>使用embed标签</h3> <embed src="https://www.ipipp.com/sample.pdf" type="application/pdf" width="100%" height="600px"> </body> </html>
注意：使用<embed>时，type属性必须设置为application/pdf，以确保浏览器正确识别。与<iframe>类似，浏览器的内置PDF阅读器会接管渲染。
优点：代码更简短；某些老旧浏览器可能支持更好。
缺点：和<iframe>一样，无法控制PDF阅读器的外观；移动端兼容性不佳；不提供备用内容（如不支持时显示提示）。
三、使用<object>标签嵌入PDF
<object>是一个更通用的嵌入元素，可以用于嵌入各种插件或对象。它也支持PDF嵌入，并且可以提供fallback（备用）内容，当浏览器无法渲染时显示。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>object嵌入PDF</title> </head> <body> <h3>使用object标签</h3> <object data="https://www.ipipp.com/sample.pdf" type="application/pdf" width="100%" height="600px"> <p>您的浏览器不支持PDF嵌入。请<a href="https://www.ipipp.com/sample.pdf">下载文件</a>。</p> </object> </body> </html>
优点：提供备用内容；兼容性相对较好。
缺点：在部分浏览器（如旧版Safari）中可能表现不如<iframe>。
四、使用JavaScript库：PDF.js
如果希望完全控制PDF的渲染样式和交互行为，推荐使用Mozilla开发的第三方库PDF.js。它基于HTML5 Canvas绘制PDF页面，不依赖浏览器插件，因此跨平台兼容性最好。
首先，引入PDF.js库（可以通过CDN或本地文件）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PDF.js 示例</title>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
</head>
<body>
<h3>使用PDF.js渲染PDF</h3>
<canvas id="pdf-canvas" width="800" height="1000"></canvas>
<button id="prev">上一页</button>
<button id="next">下一页</button>
<p>当前页: <span id="page-num"></span> / <span id="page-count"></span></p>
<script>
var url = 'https://www.ipipp.com/sample.pdf';
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
var pdfDoc = null;
var pageNum = 1;
var pageRendering = false;
var pageNumPending = null;
function renderPage(num) {
pageRendering = true;
pdfDoc.getPage(num).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport({scale: scale});
var canvas = document.getElementById('pdf-canvas');
var ctx = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderTask = page.render({canvasContext: ctx, viewport: viewport});
renderTask.promise.then(function() {
pageRendering = false;
if (pageNumPending !== null) {
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
document.getElementById('page-num').textContent = num;
}
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
document.getElementById('prev').addEventListener('click', function() {
if (pageNum <= 1) return;
pageNum--;
queueRenderPage(pageNum);
});
document.getElementById('next').addEventListener('click', function() {
if (pageNum >= pdfDoc.numPages) return;
pageNum++;
queueRenderPage(pageNum);
});
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
document.getElementById('page-count').textContent = pdfDoc.numPages;
renderPage(pageNum);
});
</script>
</body>
</html>优点：自定义程度高，可以设计翻页动画、缩放、旋转等功能；兼容绝大多数现代浏览器和移动端；不依赖浏览器插件。
缺点：需要额外加载库文件，初始加载较慢；代码相对复杂。
五、使用第三方嵌入服务（例如Google Docs Viewer）
如果您的应用场景允许，并且不介意将PDF托管到第三方服务，可以使用Google Docs Viewer等在线工具来嵌入PDF。它提供了简洁的阅读界面，并且无需自己维护服务器端渲染。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Google Docs Viewer嵌入PDF</title> </head> <body> <h3>使用Google Docs Viewer</h3> <iframe src="https://docs.google.com/viewer?url=https://www.ipipp.com/sample.pdf&embedded=true" width="100%" height="600px" style="border: none;"> </iframe> </body> </html>
优点：无需编码；支持各种文件格式（包括PDF、Word、Excel）。
缺点：依赖外部服务，网络中断时无法工作；Google Docs Viewer可能被国内网络屏蔽；无法控制外观。
六、对比总结
| 方法 | 兼容性 | 自定义能力 | 易用性 | 移动端支持 |
|---|---|---|---|---|
| <iframe> | 高（浏览器内置） | 低 | 高 | 差（依赖内置阅读器） |
| <embed> | 中 | 低 | 高 | 差 |
| <object> | 中 | 低 | 中 | 差 |
| PDF.js | 高（全平台） | 高 | 低（需编码） | 好 |
| 第三方服务 | 依赖服务 | 低 | 高 | 一般 |
七、最佳实践建议
快速原型或内部系统：优先选择
<iframe>或<embed>，无需额外依赖。需要定制化（如电子签章、水印）：使用PDF.js，虽然开发成本高但灵活性最强。
生产环境且面向全球用户：使用PDF.js或混合方案（先尝试浏览器内置，回退到PDF.js）。
注意PDF路径：使用时确保PDF文件可被访问，避免跨域问题（CORS）。
无论选择哪种方式，请始终考虑用户的网络环境和浏览器的支持情况。通过合理降级，可以提供流畅的PDF预览体验。例如，首先尝试使用<iframe>加载，如果检测失败则动态加载PDF.js来渲染。这种渐进增强的策略在现代Web应用中非常常见。