html5文件如何预览PDF文档内容 html5文件PDF.js库的集成指南
最新回答
天堂若比邻°く
2026-10-21 14:23:54
在HTML5文件中集成PDF.js库预览PDF文档的完整指南如下：
一、引入PDF.js库PDF.js是Mozilla开发的开源JavaScript库，支持在浏览器中直接渲染PDF文件，无需插件。推荐通过CDN快速集成：
- CDN引入方式（推荐）：<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
- 本地部署方式：
从
PDF.js GitHub仓库下载最新源码包。将pdf.min.js和pdf.worker.min.js文件放入项目目录，通过相对路径引入。
创建用于显示PDF内容的DOM元素，并定义容器尺寸：
<div id="pdf-container"></div><!-- 可选：添加加载提示和导航按钮 --><div id="loading">加载中...</div><button id="prev-page">上一页</button><button id="next-page">下一页</button>- 样式建议：为容器设置固定宽高（如width: 800px; height: 600px;），避免渲染错位。
- 初始化PDFJS对象：const PDFJS = window['pdfjs-dist/build/pdf'];PDFJS.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js';
- 获取PDF文件数据：fetch('example.pdf') .then(response => response.arrayBuffer()) .then(data => { const pdfData = new Uint8Array(data); loadPDF(pdfData); });
- 加载PDF并逐页渲染：async function loadPDF(pdfData) { const pdf = await PDFJS.getDocument({ data: pdfData }).promise; renderPage(pdf, 1); // 渲染第一页}
- 渲染指定页面：async function renderPage(pdf, pageNum) { const page = await pdf.getPage(pageNum); const viewport = page.getViewport({ scale: 1.5 }); // 设置缩放比例 const canvas = document.createElement('canvas'); canvas.width = viewport.width; canvas.height = viewport.height; document.getElementById('pdf-container').appendChild(canvas); const context = canvas.getContext('2d'); await page.render({ canvasContext: context, viewport: viewport }).promise;}
- 懒加载实现：
监听滚动事件，仅渲染可视区域内的页面。
示例逻辑：const container = document.getElementById('pdf-container');container.addEventListener('scroll', () => { const visiblePages = calculateVisiblePages(); // 自定义函数，计算当前可见页码 visiblePages.forEach(pageNum => { if (!document.querySelector(`canvas[data-page="${pageNum}"]`)) { renderPage(pdf, pageNum); } });});
- 分页导航：let currentPage = 1;document.getElementById('prev-page').addEventListener('click', () => { if (currentPage > 1) renderPage(pdf, --currentPage);});document.getElementById('next-page').addEventListener('click', () => { if (currentPage < pdf.numPages) renderPage(pdf, ++currentPage);});
https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
<script> const PDFJS = window['pdfjs-dist/build/pdf']; PDFJS.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js';
fetch('example.pdf') .then(res => res.arrayBuffer()) .then(data => { const pdfData = new Uint8Array(data); const pdf = PDFJS.getDocument({ data: pdfData }).promise; let currentPage = 1; async function renderPage(pageNum) { const pdfDoc = await pdf; const page = await pdfDoc.getPage(pageNum); const viewport = page.getViewport({ scale: 1.5 }); const canvas = document.createElement('canvas'); canvas.width = viewport.width; canvas.height = viewport.height; document.getElementById('pdf-container').appendChild(canvas); const context = canvas.getContext('2d'); await page.render({ canvasContext: context, viewport: viewport }).promise; } renderPage(1); // 初始渲染第一页 document.getElementById('prev-page').addEventListener('click', () => { if (currentPage > 1) renderPage(--currentPage); }); document.getElementById('next-page').addEventListener('click', () => { if (currentPage < (await pdf).numPages) renderPage(++currentPage); }); }); </script></body></html>关键注意事项- Worker路径：必须正确设置PDFJS.workerSrc，否则解析会失败。
- 跨域问题：若PDF文件位于不同域名，需服务器配置CORS。
- 移动端适配：建议通过viewport元标签和响应式设计优化移动端体验。
热门标签
