简介这是一份面向Java Web开发者与前端进阶学习者的PDF在线阅读器全栈实现源码聚焦Web端PDF解析、渲染与轻量编辑能力构建适用于教育平台文档预览、企业内部知识库集成及移动适配型文档服务开发等场景。资源共8个文件含3个HTML页面提供基础交互界面与测试入口、2个JS脚本pdfobject.js及其压缩版用于PDF嵌入与兼容性处理、2个PDF示例文档含技术攻略与测试用例及1个Eclipse项目配置文件整体包体仅490KB结构精简、开箱即用。已有1751人学习下载适合希望深入理解PDFBox后端解析逻辑、PDF.js前端渲染原理及响应式布局实践的中高级开发者。读者可直接运行test.html或herman.html查看效果结合JNI攻略PDF掌握Java层PDF处理底层调用并通过HTMLJSPDF组合快速搭建可部署的轻量级在线阅读原型。1. 一个能嵌进任何网页的 PDF 阅读器不依赖后端、不传文件、纯前端渲染连手机 Safari 都能滑动翻页上周帮某高校实验室改一个老旧的课程资料系统原方案是把 PDF 全部转成 JPG 存 CDN再用轮播组件展示——结果学生反馈“放大看公式全是马赛克”“没法复制课件里的代码片段”“在 iPad 上双指缩放卡成 PPT”。最后我直接替换成这个 PDF 在线阅读器源码包3 小时内完成集成拖一个iframe或调一个new PDFReader()就跑起来支持文本选择、搜索高亮、书签跳转、缩放平移甚至保留了原始 PDF 的文字层可访问性WCAG AA 级别。它不是 Electron 桌面应用也不是需要部署服务端的 PDF.js 封装版而是一个真正轻量、可嵌入、零配置的 Web 版 PDF 阅读器实现。适合做文档中心、在线教材、合同预览、移动版知识库——尤其当你被“PDF 移动版适配难”“web 版 PDF 渲染失真”“在线编辑只是伪需求”反复暴击时这个项目就是你该立刻 clone 下来跑通的第一个真实可用方案。2. 技术栈与架构设计为什么选 PDF.js 而不是自己解析核心模块怎么分层这个项目不是从零造轮子而是对 Mozilla 官方 PDF.js 的深度定制封装。但注意它没用 PDF.js 的默认 viewer.html也没走 webpack 打包整个 dist 包那种重模式。而是精准提取pdfjs-dist的核心解析能力配合轻量 React 组件也可用纯 JS 替换构建出一个可按需加载、无全局污染、支持 SSR 友好挂载的阅读器实例。整个结构就三块底层解析引擎、中层状态管理、上层 UI 控制器。没有 Node.js 后端、不走任何代理接口、所有 PDF 文件通过ArrayBuffer直接喂给解析器——这意味着你完全可控文件来源可以是本地input[typefile]选中的文件也可以是fetch()拉下来的二进制流甚至是从 IndexedDB 缓存里读出的 ArrayBuffer。2.1 底层PDF.js 解析器的最小化接入PDF.js 默认提供两种使用方式worker模式推荐解码在 Web Worker 中不阻塞主线程和legacy模式同步解析仅用于调试。本项目强制启用worker模式并将pdf.worker.min.js作为独立 script 标签加载而非 webpack import避免打包体积膨胀。关键初始化代码如下// src/core/pdf-loader.js import { getDocument, GlobalWorkerOptions } from pdfjs-dist; // 必须提前指定 worker 路径否则会报 Missing PDF.js worker 错误 GlobalWorkerOptions.workerSrc /static/js/pdf.worker.min.js; export async function loadPDF(arrayBuffer) { try { const loadingTask getDocument({ data: arrayBuffer, cMapUrl: /static/cmaps/, // 中文支持必需指向 CMap 字体映射表目录 cMapPacked: true, enableXfa: false, // 关闭 XFA 表单减少兼容风险 disableAutoFetch: false, // 允许按需加载分页内容对大 PDF 关键 verbosity: 0 // 关闭冗余日志生产环境必须设为 0 }); const pdfDoc await loadingTask.promise; return pdfDoc; } catch (err) { throw new Error(PDF 加载失败${err.message || 未知错误}); } }提示cMapUrl是中文 PDF 正常显示的生死线。如果漏掉或路径不对中文会全部显示为方框□。项目已内置/static/cmaps/目录含 GBK、UTF-16、UniGB-UCS2-H 等常用映射表无需额外下载。2.2 中层状态驱动的页面控制器PDF.js 本身只负责“把一页画出来”但用户要的是“翻页”“缩放”“跳转到第 15 页”。所以项目自建了一个PageController类管理当前页码、缩放比例、旋转角度、视口偏移等状态并将这些状态变化映射为 Canvas 渲染参数。它不操作 DOM只暴露goToPage()、zoomIn()、rotateClockwise()等方法UI 层只负责调用——这种分离让测试和替换 UI 变得极其简单。// src/core/page-controller.js export class PageController { constructor(pdfDoc) { this.pdfDoc pdfDoc; this.currentPage 1; this.scale 1.0; this.rotation 0; // 0, 90, 180, 270 this.viewport null; } async renderPage(pageNumber, canvas, context) { const page await this.pdfDoc.getPage(pageNumber); // 根据当前 scale/rotation 构建 viewport const viewport page.getViewport({ scale: this.scale, rotation: this.rotation }); // 缓存 viewport 供后续平移/缩放复用 this.viewport viewport; // 清空 canvas 并渲染 canvas.width viewport.width; canvas.height viewport.height; await page.render({ canvasContext: context, viewport: viewport }).promise; } goToPage(num) { if (num 1 num this.pdfDoc.numPages) { this.currentPage num; return true; } return false; } zoomIn() { this.scale Math.min(this.scale * 1.2, 4.0); // 最大缩放到 4 倍 } }这段代码的关键在于renderPage()方法每次都会根据最新scale和rotation重建viewport而不是复用旧的。很多新手翻车就在这里——直接缓存page.getViewport()结果导致缩放后 canvas 尺寸错乱、文字层偏移。这是血泪经验viewport 必须随状态实时重建不能缓存。2.3 上层响应式 UI 组件与移动端适配逻辑UI 层采用纯 CSS 少量 JS 实现不依赖 React/Vue。核心是三个容器canvas渲染区、div classtext-layer文字层用于选中文本、div classannotation-layer注释层预留扩展位。文字层通过 PDF.js 的getTextContent()提取再用绝对定位覆盖在 canvas 上z-index 设为 1确保鼠标事件穿透到 canvas但文本选择仍生效。移动端适配重点在两点双指缩放监听touchmove计算两指距离变化映射为zoomIn/zoomOut滑动翻页当垂直滑动距离 150px 且水平滑动 50px 时触发goToPage(current ± 1)项目已内置touch-support.js自动检测设备并绑定对应事件无需手动判断isMobile。3. 项目目录结构与核心文件说明5 分钟看懂源码组织逻辑整个项目是典型的“功能驱动目录”没有按 MVC 或 DDD 套壳所有文件都在src/下直给结构扁平但职责清晰。dist/是构建产物public/存静态资源worker、cmaps、字体examples/里有 4 个即用型 demo——这才是你该先打开的地方。pdf-online-reader/ ├── public/ │ ├── js/ │ │ └── pdf.worker.min.js # PDF.js 官方 workerv2.16.105 │ ├── cmaps/ # 中文 CMap 映射表共 23 个 .bcmap 文件 │ └── fonts/ # 基础字体NotoSansCJKsc、LiberationSans ├── src/ │ ├── core/ # 核心引擎解析、渲染、状态 │ │ ├── pdf-loader.js # PDF 加载与错误处理 │ │ ├── page-controller.js # 页面状态与渲染调度 │ │ └── text-layer.js # 文字层生成与定位 │ ├── ui/ # UI 组件无框架依赖 │ │ ├── toolbar.js # 顶部工具栏缩放、页码、跳转 │ │ ├── viewer.js # 主视图容器canvas text-layer │ │ └── mobile-gestures.js # 移动端手势识别 │ ├── utils/ # 工具函数 │ │ ├── dom.js # DOM 操作封装addEvent、getOffset │ │ └── file.js # 文件处理arrayBufferFromFile、urlToBlob │ └── index.js # 入口导出 PDFReader 类 ├── examples/ │ ├── basic.html # 最简用法div idviewer/div new PDFReader(...) │ ├── iframe-embed.html # iframe 嵌入模式适合 CMS 集成 │ ├── mobile-demo.html # 专为 iOS/Android 优化的全屏阅读页 │ └── multi-page.html # 多文档切换 书签侧边栏 ├── package.json └── README.md3.1src/index.js对外暴露的唯一入口类这是你集成时唯一需要import的文件。它把底层能力封装成一个构造函数接受容器元素和配置项返回一个具备完整控制能力的实例// src/index.js import { loadPDF } from ./core/pdf-loader.js; import { PageController } from ./core/page-controller.js; import { initToolbar } from ./ui/toolbar.js; import { initView } from ./ui/viewer.js; export class PDFReader { constructor(container, options {}) { this.container typeof container string ? document.querySelector(container) : container; this.options { enableTextSelection: true, // 是否启用文字选择默认 true enableSearch: true, // 是否启用搜索默认 true initialPage: 1, // 初始页码 initialScale: 1.0, // 初始缩放 ...options }; this.pdfDoc null; this.pageController null; this.toolbar null; this.viewer null; } async load(urlOrArrayBuffer) { let arrayBuffer; if (typeof urlOrArrayBuffer string) { const res await fetch(urlOrArrayBuffer); arrayBuffer await res.arrayBuffer(); } else { arrayBuffer urlOrArrayBuffer; } this.pdfDoc await loadPDF(arrayBuffer); this.pageController new PageController(this.pdfDoc); // 初始化 UI this.viewer initView(this.container, this.pdfDoc.numPages); this.toolbar initToolbar(this.container, this); // 渲染第一页 await this.renderPage(this.options.initialPage); } async renderPage(pageNum) { if (!this.pdfDoc || !this.pageController) return; const canvas this.viewer.canvas; const ctx canvas.getContext(2d); await this.pageController.renderPage(pageNum, canvas, ctx); // 同步渲染文字层仅当启用时 if (this.options.enableTextSelection) { await this.viewer.renderTextLayer(pageNum, this.pdfDoc); } } // 对外提供的控制方法 goToPage(num) { this.pageController.goToPage(num) this.renderPage(num); } zoomIn() { this.pageController.zoomIn(); this.renderPage(this.pageController.currentPage); } zoomOut() { /* 类似 */ } search(keyword) { /* 调用 PDF.js 的 searchText API */ } }注意load()方法同时支持 URL如/docs/manual.pdf和ArrayBuffer如fileReader.result让你自由选择文件来源。这是很多“PDF 在线阅读器”项目缺失的灵活性。3.2examples/四个真实场景的即用型模板不要跳过examples/目录它不是摆设而是经过实测的集成样板basic.html最简集成3 行 JS 即可启动适合验证环境是否正常iframe-embed.html用iframe srcviewer.html?filexxx.pdf方式嵌入适合 WordPress、Notion、内部 Wiki 等不支持 JS 注入的平台mobile-demo.html移除所有非必要控件全屏 canvas 底部翻页按钮 双指缩放iOS Safari 下滚动流畅度实测优于 Chrome for iOSmulti-page.html带左侧书签树从 PDF Outline 提取 右侧缩略图导航 多文档 Tab 切换接近桌面阅读器体验。每个 demo 都附带注释说明适用场景和修改点比如mobile-demo.html里明确标出“如需禁用双指缩放请注释掉mobile-gestures.js的bindPinchZoom()调用”。4. 运行与调试从零开始跑通常见问题排查指南项目不依赖 Node.js 开发服务器但为了跨域安全和资源路径正确必须用 HTTP 服务打开不能直接双击index.html。下面给出三种零配置启动方式任选其一即可。4.1 用 Python 快速起服务推荐新手确保已安装 Python 3.6进入项目根目录执行# Python 3 python -m http.server 8000 # 或 Python 2不推荐仅兼容老环境 python -m SimpleHTTPServer 8000然后浏览器打开http://localhost:8000/examples/basic.html点击“加载示例 PDF”按钮即可看到效果。注意此时所有资源路径如pdf.worker.min.js都基于public/目录解析所以public/必须存在且结构正确。4.2 用 VS Code Live Server 插件前端开发者首选安装 Live Server 插件在examples/basic.html右键 → “Open with Live Server”。它会自动启动http://127.0.0.1:5500/examples/basic.html并支持热重载。比 Python 方式更稳定尤其在 Windows 下路径处理更鲁棒。4.3 构建为静态站点上线部署项目已配好npm run build脚本见package.json执行后生成dist/目录里面是压缩后的 JS/CSS/HTML可直接扔到 Nginx、GitHub Pages、Vercel 等任意静态托管平台。构建脚本会自动拷贝public/下所有资源到dist/无需手动操作。提示构建前请确认public/js/pdf.worker.min.js版本与package.json中pdfjs-dist依赖版本一致当前为2.16.105。版本不匹配会导致 worker 加载失败控制台报Failed to load PDF worker。4.4 常见问题排查5 条真实踩坑记录现象 1中文显示为方框□英文正常原因cMapUrl路径错误或public/cmaps/目录缺失导致 PDF.js 无法加载中文字体映射表。解决检查浏览器 Network 面板确认http://localhost:8000/public/cmaps/GBK.bcm等请求返回 200若 404请核对public/cmaps/目录是否存在且文件名全小写Linux 服务器区分大小写。现象 2加载大 PDF50MB时页面卡死、内存暴涨原因未启用disableAutoFetch: falsePDF.js 默认一次性加载所有页面资源到内存。解决在src/core/pdf-loader.js的getDocument()参数中确保disableAutoFetch: false当前代码已是此值并确认pdfDoc.numPages不是 Infinity某些损坏 PDF 会返回此值需加校验。现象 3移动端双指缩放无效或缩放后 canvas 错位原因mobile-gestures.js中未正确计算event.touches的中心点或page-controller.js的renderPage()未实时重建 viewport。解决检查mobile-gestures.js的getCenterPoint()函数是否返回{ x, y }并在zoomIn/zoomOut后强制调用renderPage(currentPage)—— 当前代码已内置此逻辑若自行修改请勿删除。现象 4文字选择失效鼠标划过无高亮原因enableTextSelection: false配置或text-layer.js中textContent.items为空PDF 本身无文字层如扫描件。解决先用examples/basic.html测试官方示例 PDF含文字层确认功能正常若自己 PDF 无文字层需提前 OCR 处理本项目不提供 OCR 能力。现象 5fetch()加载远程 PDF 报 CORS 错误原因目标 PDF 服务器未设置Access-Control-Allow-Origin: *。解决这不是项目 Bug而是浏览器安全策略。方案有三① 让 PDF 托管方添加 CORS 头② 用后端代理转发如 Nginxproxy_pass③ 改用iframe src...嵌入绕过 JS 跨域限制。项目examples/iframe-embed.html就是为此场景准备。5. 二次开发实战如何添加 PDF 在线编辑能力文本标注、高亮、手写批注标题里写了“pdf在线编辑”但源码包本身不包含编辑功能——它是一个阅读器不是编辑器。不过它的架构设计天然支持扩展。我帮某公司做的合同审阅系统就是在本项目基础上3 天内加出了“高亮关键词”“添加文本批注”“手写签名”三个核心编辑能力。下面拆解具体怎么做不讲理论只给可抄作业的代码和验证步骤。5.1 添加高亮功能复用文字层注入 SVG 高亮矩形PDF.js 的文字层本质是divposition: absolute的 span 堆叠。我们不在 canvas 上画而是在文字层上方加一层svg用rect覆盖匹配的文本区域。这样高亮不破坏原始渲染缩放/平移时 SVG 会随文字层一起变换。// src/features/highlight.js export function addHighlight(text, color #ffcc00) { const textLayer document.querySelector(.text-layer); const spans textLayer.querySelectorAll(span); // 遍历所有 span查找包含 text 的节点 for (let i 0; i spans.length; i) { const span spans[i]; if (span.textContent.includes(text)) { const rect document.createElementNS(http://www.w3.org/2000/svg, rect); const bbox span.getBoundingClientRect(); const viewerRect textLayer.getBoundingClientRect(); // 计算相对于 text-layer 的坐标 rect.setAttribute(x, bbox.left - viewerRect.left); rect.setAttribute(y, bbox.top - viewerRect.top); rect.setAttribute(width, bbox.width); rect.setAttribute(height, bbox.height); rect.setAttribute(fill, color); rect.setAttribute(opacity, 0.5); // 插入到 text-layer 的 svg 容器需提前创建 const svg textLayer.querySelector(svg) || createSvgContainer(textLayer); svg.appendChild(rect); } } } function createSvgContainer(parent) { const svg document.createElementNS(http://www.w3.org/2000/svg, svg); svg.style.position absolute; svg.style.top 0; svg.style.left 0; svg.style.pointerEvents none; // 确保鼠标事件穿透到下层 parent.appendChild(svg); return svg; }验证方法在examples/basic.html的控制台执行addHighlight(第一章)立即看到黄色高亮。注意此方案只对有文字层的 PDF有效扫描件需先 OCR。5.2 添加文本批注在 canvas 上绘制浮动气泡 保存到 localStorage批注不修改原始 PDF而是将坐标、内容、页码存为 JSON下次加载时重新渲染。关键是要把鼠标点击位置canvas 坐标转换为 PDF 逻辑坐标即 viewport 坐标。// src/features/annotation.js export function enableAnnotations(pdfReader) { const canvas pdfReader.viewer.canvas; const pageController pdfReader.pageController; canvas.addEventListener(click, (e) { const rect canvas.getBoundingClientRect(); const x e.clientX - rect.left; const y e.clientY - rect.top; // 转换为 viewport 坐标PDF 逻辑坐标 const viewport pageController.viewport; const pdfX (x / viewport.scale) - viewport.x; const pdfY (y / viewport.scale) - viewport.y; // 创建浮动气泡 const bubble document.createElement(div); bubble.className annotation-bubble; bubble.innerHTML textarea placeholder输入批注.../textarea button onclicksaveAnnotation(${pdfReader.pageController.currentPage}, ${pdfX}, ${pdfY}, this)保存/button ; bubble.style.left ${x 10}px; bubble.style.top ${y 10}px; document.body.appendChild(bubble); }); } window.saveAnnotation function(page, x, y, btn) { const text btn.previousElementSibling.value.trim(); if (!text) return; const annotations JSON.parse(localStorage.getItem(pdf-annotations) || []); annotations.push({ page, x, y, text, timestamp: Date.now() }); localStorage.setItem(pdf-annotations, JSON.stringify(annotations)); // 清除气泡 btn.closest(.annotation-bubble).remove(); };提示pdfX/pdfY是 PDF 内部坐标系与缩放/旋转无关所以即使用户缩放后点击保存的坐标依然准确。这是 PDF.js viewport 的核心价值。5.3 手写批注Canvas 绘图 导出为 PNG 覆盖层手写不是画在 PDF 上而是画在 canvas 上层的一个canvas然后导出为 PNG作为图片叠加到当前页 canvas 上。这样既保留原始 PDF 清晰度又支持无限撤销。// src/features/handwrite.js export function enableHandwrite(pdfReader) { const canvas pdfReader.viewer.canvas; const overlay document.createElement(canvas); overlay.width canvas.width; overlay.height canvas.height; overlay.style.position absolute; overlay.style.top 0; overlay.style.left 0; overlay.style.pointerEvents none; canvas.parentNode.insertBefore(overlay, canvas.nextSibling); const ctx overlay.getContext(2d); let isDrawing false; let lastX 0; let lastY 0; overlay.addEventListener(mousedown, startDraw); overlay.addEventListener(mousemove, draw); overlay.addEventListener(mouseup, stopDraw); overlay.addEventListener(mouseout, stopDraw); function startDraw(e) { isDrawing true; [lastX, lastY] [e.offsetX, e.offsetY]; } function draw(e) { if (!isDrawing) return; ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(e.offsetX, e.offsetY); ctx.strokeStyle #ff4757; ctx.lineWidth 2; ctx.lineCap round; ctx.stroke(); [lastX, lastY] [e.offsetX, e.offsetY]; } function stopDraw() { isDrawing false; } // 导出为 PNG 并叠加到当前页需配合 renderPage 重绘 window.exportHandwrite function() { const dataUrl overlay.toDataURL(image/png); // 后续可上传到服务器或存入 IndexedDB console.log(手写批注已导出, dataUrl); }; }验证技巧在examples/mobile-demo.html中调用enableHandwrite(pdfReader)用手指在 iPad 上画几笔再执行exportHandwrite()就能拿到 base64 图片。从那以后我每次加新功能都强制走一遍“真机触摸 截图验证”流程——因为模拟器永远骗不了你的手指。希望帮到你。本文还有配套的精品资源点击获取