简介基于Java与Web技术实现的PDF在线阅读器制作源码面向具备Java或前端基础、希望快速搭建网页端PDF查看、在线阅读、在线编辑及移动端适配原型的开发者。压缩包内共8个文件包含3个HTML页面、2个JavaScript脚本、2个PDF测试文档和1个Eclipse工程文件整体仅490KB结构轻量目录区分清晰便于直接导入工程对照学习。目前已有1751人学习下载。源码展示了PDF解析与渲染的基本路径例如通过PDFBox将PDF页面转为位图后绘入canvas展示也涉及移动端响应式布局与基础交互同时附带的JNI入门文档可作为扩展本地处理能力的参考。整体而言这套示例不仅能帮助开发者理解PDF在线应用从文件解析、前端展示到交互适配的完整链路并为后续加入注释编辑、安全过滤等功能留出清晰扩展空间。1. 这不是“又一个 PDF 插件”一个能改、能批注、能移动端用的在线阅读器客户发来一份产品说明书 PDF要求在浏览器里直接在线审阅还要在批注后发给团队确认。过去我习惯让人下载到本地用桌面阅读器打开遇到加密、字体缺失、移动端打不开就一遍遍传文件。这个项目解决的就是这类问题——它是一个纯前端实现的 Web 版 PDF 在线阅读器源码把 PDF 加载、像素级渲染、翻页缩放、全文搜索、在线批注、文本选择全部封装在一个单页应用里。不需要安装任何插件不需要后端服务打开静态页面就能对指定 URL 的 PDF 做在线阅读和 pdf 移动版适配。想学 PDF 渲染管线、想给内网文档加一个灵活的阅读器或者正打算做 pdf 在线编辑功能的开发者都可以直接拿这份源码当底座。2. 技术选型与项目结构为什么用 Canvas 渲染而不是 iframe 硬嵌PDF 在线阅读器的第一道选择题是渲染方案。常见的做法有三种iframe 直接交给浏览器内置插件、Canvas 逐页绘制、或者 SVG 转矢量。这份源码选的是 Canvas 方案核心渲染引擎用了 PDF.js一款在浏览器里解析 PDF 字节流的开源 JavaScript 库。选择它是因为浏览器自带的 PDF 查看器在不同内核下的行为差异很大用户缩放、搜索、批注这些需求完全没法定制。而 Canvas 渲染把每一页的绘制权握在自己手里手势缩放、清晰度、夜间模式都能按产品需求去改。2.1 为什么不用 iframe 和原生插件如果项目只要求“能看就行”iframe 是最省事的方案。但一旦遇到三个需求iframe 就翻车一是要自定义工具栏皮肤原生插件的地盘你动不了二是要统计用户在第几页停留了多久、有没有批注原生插件给不了数据三是 pdf 移动版适配手机浏览器对插件 PDF 的缩放支持参差不齐。Canvas 渲染虽然要自己处理内存和绘制但换来的是完整的控制权。源码里你看到的缩放滑杆、翻页按钮、搜索输入框全部是独立 DOM 元素底层只跟渲染引擎的接口通信这让二次开发时替换 UI 非常轻。2.2 目录结构从压缩包到浏览器地址栏源码包解压之后是一个标准的静态 Web 项目没有复杂的构建链。根目录下的核心文件都在 js 文件夹里你打开index.html就能看到完整入口。目录/文件作用index.html单页入口包含阅读器布局、工具栏、左侧缩略图抽屉css/app.css全部样式含深浅两套主题js/pdf.jsPDF.js 开源解析引擎本体js/pdf.worker.js在 Web Worker 线程中执行解析任务的 worker 脚本js/main.js项目核心控制器负责加载 PDF、渲染页面、绑定事件js/toolbar.js工具栏逻辑缩放、翻页、页码输入、全屏切换js/search.js全文检索模块高亮命中的文本范围js/annotation.js批注模块基于 localStorage 做本地持久化assets/示例 PDF 与图标这种结构最大的好处是你能一层一层拆开看main.js 管流程按模块文件分工改批注不会牵动渲染逻辑。2.3 启动链路三条命令加一个浏览器标签页因为项目是纯静态资源启动方式非常灵活。我最习惯的方式是在根目录起一个本地 HTTP 服务。macOS 或 Linux 直接用 Python 一条命令python3 -m http.server 8080Windows 用户没有 Python 时可以用 VS Code 的 Live Server 插件在index.html上右键选择 Open with Live Server或者安装 Node.js 后顺手用 npxnpx serve . -l 8080浏览器打开http://localhost:8080就能看到阅读器界面。这里面有个关键细节PDF 文件必须通过 HTTP 协议加载如果直接在文件管理器里双击index.html浏览器会把页面源置为file://协议PDF.js 向同目录的 PDF 发起请求时会触发跨域限制这就是后面避坑章节要展开的经典问题。启动命令里的端口号可以任意换只要保证index.html、js/、css/在同一个服务根下。3. 核心模块拆解一个 PDF 从 URL 到像素页面的完整链路在阅读器里打开 PDF 的瞬间背后发生了一连串操作获取文档信息、拆分页对象、创建渲染任务、绘制到 Canvas、再叠上文本层。用一句话概括整个链路pdf.js把 PDF 元数据暴露给main.jsmain.js根据当前页码创建renderTask渲染完成后再挂载文本层。接下来逐个拆解这条链路里的三个核心模块。3.1 文档加载模块从 getDocument 到页面计数入口函数是PDFJS.getDocument它接收一个对象参数而不是单纯的 URL。源码里是这样写的// file: js/main.js async function loadPdfDocument(pdfUrl) { const loadingTask pdfjsLib.getDocument({ url: pdfUrl, cMapUrl: cmaps/, cMapPacked: true, withCredentials: false }); try { this.pdfDoc await loadingTask.promise; this.totalPages this.pdfDoc.numPages; this.page 1; this.renderCurrentPage(); } catch (err) { console.error(PDF 文档加载失败, err); showErrorBar(无法解析该 PDF请确认文件不是加密或损坏的); } }这里有几个容易被忽略但后面排查问题时会反复提到的参数。cMapUrl指向字体映射表目录处理中文 PDF 必须带上它否则部分字符可能显示为乱码或方块cMapPacked表示映射表文件是压缩过的.bcmap格式没打这个标记的话解析器会尝试加载未压缩版本而找不到文件withCredentials决定跨域请求是否携带 Cookie如果你的 PDF 接口需要登录态要在服务端允许跨域的同时把这个值置为true。加载成功后的pdfDoc对象是后续所有操作的根numPages属性直接决定渲染循环的次数。3.2 渲染引擎Canvas 高清适配与 renderTask 生命周期拿到页面对象之后渲染工作交给page.render方法。源码中有一段典型的 DPR 适配逻辑这是移动端清晰度的关键// file: js/main.js async function renderCurrentPage() { const page await this.pdfDoc.getPage(this.currentPage); const viewport page.getViewport({ scale: this.scale }); // 适配高分屏canvas 尺寸乘上 devicePixelRatio再用 CSS 尺寸约束显示大小 const dpr window.devicePixelRatio || 1; const canvas this.canvas; canvas.width viewport.width * dpr; canvas.height viewport.height * dpr; canvas.style.width viewport.width px; canvas.style.height viewport.height px; const renderContext { canvasContext: canvas.getContext(2d), viewport: viewport, transform: dpr ! 1 ? [dpr, 0, 0, dpr, 0, 0] : null }; if (this.renderTask) { this.renderTask.cancel(); } this.renderTask page.render(renderContext); await this.renderTask.promise; }普通实现容易犯的错是仅按viewport.width设置 canvas 的宽高在 Retina 屏上渲染出来的文字边缘发虚。这段代码先取devicePixelRatio把 canvas 物理像素放大对应倍数再用样式尺寸把显示大小拉回逻辑像素这样手机上看 pdf 移动版内容时笔画是锐利的。renderTask.cancel()是浏览器的后悔药用户快速翻页时会触发多次渲染旧的渲染任务必须取消否则 Canvas 画布上会出现上一页残留的脏数据还会造成并发绘制抢上下文。源码里每次渲染前检查已有任务并取消是控制大文件翻页不卡顿的基础。3.3 视图控制器翻页、缩放、页码跳转的统一入口翻页和缩放的操作集中在toolbar.js里它维护一个当前状态对象任何 UI 交互都先改动状态再调渲染函数。这种设计模式叫状态驱动渲染比直接在各按钮的事件里写死逻辑更容易扩展。// file: js/toolbar.js const viewerState { currentPage: 1, totalPages: 1, scale: 1.2, scaleRange: [0.5, 3.0] }; function changePage(delta) { const nextPage viewerState.currentPage delta; if (nextPage 1 || nextPage viewerState.totalPages) return; viewerState.currentPage nextPage; updatePageInput(); renderCurrentPage(); } function setZoom(factor) { const newScale Math.min( Math.max(viewerState.scale * factor, viewerState.scaleRange[0]), viewerState.scaleRange[1] ); viewerState.scale Math.round(newScale * 10) / 10; renderCurrentPage(); }参数设定上要注意scaleRange的限制缩放倍率太低时文字无法阅读太高时 canvas 面积超过浏览器内存能承受的极限。0.5 到 3.0 是一个稳妥范围。changePage里做了边界保护当前页已经是第一页或最后一页时直接返回避免页码越界后getPage抛异常。缩放用的是乘法因子点击放大按钮时传入 1.2点击缩小传 0.8这样用户在 1.0 与 1.44 之间切换不会出现跳跃感。两个函数都通过renderCurrentPage()触发重新绘制把状态变化统一折叠成一个入口。4. 交互层实现文本选择、在线批注与搜索高亮是怎么做到的渲染只是阅读器的地基真正让用户觉得“能干活”的是它能不能选中文字、能不能批注、能不能搜到自己要看的内容。这三个功能分别依赖三个不同的浏览器能力文本层、localStorage 存储、以及基于页面文本内容的匹配重绘。这一章是动手改源码时最常动刀的部分。4.1 文本层文字怎么浮在 Canvas 上面还能被鼠标选中Canvas 画出来的内容是位图鼠标拖上去没有语义无法触发原生文本选择。PDF.js 提供了一套文本层机制渲染页面时同步生成一个TextLayer它把 PDF 里每个文本块的坐标、字体大小、旋转角度转换成一个透明的 DOM 节点层叠在 canvas 上方。由于坐标和 canvas 的 viewport 完全一致视觉上文字就像从画布里浮出来一样。源码里文本层的挂载代码// file: js/main.js async function renderTextLayer(page, container) { const textContent await page.getTextContent(); const textLayerDiv document.createElement(div); textLayerDiv.className textLayer; container.appendChild(textLayerDiv); pdfjsLib.renderTextLayer({ textContentSource: textContent, container: textLayerDiv, viewport: page.getViewport({ scale: this.scale }), textDivs: [] }); }textContentSource是页面解析出的文本内容对象其中每个 item 带有str、transform、width、height字段renderTextLayer会根据这些信息生成绝对定位的span。操作上有一个必须配合的点文本层容器的z-index要低于工具栏高于 canvas它的背景必须是透明的否则会挡住 canvas 里的图像。调试时如果发现鼠标选不中文字第一反应检查文本层容器有没有设置pointer-events: auto以及它的坐标是否被position: relative的父容器带偏了。4.2 在线批注localStorage 撑起的轻量标注方案批注模块没有引入数据库而是直接落到浏览器本地存储。每条批注记录一个矩形坐标、关联的页码、批注内容和创建时间最终序列化为 JSON 数组。取坐标用的是一次鼠标事件// file: js/annotation.js canvas.addEventListener(mouseup, (e) { if (toolbarState.mode ! annotation) return; const rect canvas.getBoundingClientRect(); const scale viewerState.scale; const annotation { id: anno_ Date.now(), page: viewerState.currentPage, x: (e.clientX - rect.left) / scale, // 存逻辑坐标缩放后依然对齐 y: (e.clientY - rect.top) / scale, width: 0, height: 0, text: prompt(批注内容), createdAt: new Date().toISOString() }; saveAnnotation(annotation); });这里把坐标除以缩放倍率再存储是一个容易忽略的细节。如果直接存clientX用户把页面放大到 1.5 倍后原来的批注位置就错位了。存逻辑坐标意味着批注位置跟着 PDF 内容走而不是跟着屏幕像素走。你还能在这个基础上扩展高度和宽度留了 0 的默认值说明这是一个只记录锚点的极简批注模型。想升级成区域高亮只要在mousedown和mouseup之间计算选区矩形把宽高填进对象即可。数据写 localStorage 时要先读后写源码用的是整表覆盖策略批注量大的场景建议改成按id增量合并。4.3 全文搜索与高亮从文本匹配到 Canvas 重绘搜索功能的实现思路是把所有页面文本抽出来做匹配然后回到对应页用文本层高亮。PDF.js 没有提供现成的全文索引所以源码用了一种朴素做法遍历每一页的getTextContent()把str字段拼接成纯文本再用indexOf匹配命中页码记录到数组。搜索代码的关键片段// file: js/search.js async function searchAllPages(keyword) { const hits []; keyword keyword.trim().toLowerCase(); for (let i 1; i pdfDoc.numPages; i) { const page await pdfDoc.getPage(i); const textContent await page.getTextContent(); const fullText textContent.items .map(item item.str) .join( ) .toLowerCase(); if (fullText.includes(keyword)) { hits.push({ page: i, snippet: extractSnippet(fullText, keyword) }); } } renderSearchHits(hits); }匹配逻辑有个明显的性能上限for循环里逐页调getTextContent()遇到几百页的文档搜索耗时可能在几十秒量级。这个实现面试或做毕设时够用生产环境我会加两层优化一是在文档加载完成后就预生成全文索引缓存到一个数组里搜索时纯内存匹配二是把页对象释放掉不要让循环里的 page 对象驻留内存。高亮渲染则是往文本层追加带有.searchHighlight类的 span通过 CSS 背景色标记命中位置这种方式不需要重绘 canvas只操作 DOM性能成本很低。5. 避坑指南PDF 在线阅读器开发中的 5 个常见问题这章是我在还原这套源码时踩过的真实坑。每个问题都按现象、原因、解决三层排查来写遇到类似表现可以直接对号入座。5.1 现象双击 index.html 打开后一片空白控制台报错是Cross-origin request blocked。原因在于浏览器认为file://协议不同源PDF.js 发起 fetch 请求读取本地 PDF 时被安全策略拦截这个跟代码本身无关纯静态文件也不能跨过这条规则。解决方法是始终通过 HTTP 服务访问。如果你没有 Python 也没有 Node最简单的办法是用 VS Code 的 Live Server 插件它能自动切换到一个临时本地端口。我一般把index.html、PDF 文件、cmaps/目录都放进同一个服务根目录避免后续出现路径拼接问题。5.2 现象PDF.js 抛Failed to fetch module script或 worker 无法创建问题出在pdf.worker.js的加载路径。PDF.js 主线程需要通过 worker 执行解析任务如果项目里 worker 文件放错位置或者构建工具把文件名做了hash处理而主代码还引用原文件名就会找不到 worker。源码里的加载写法pdfjsLib.GlobalWorkerOptions.workerSrc js/pdf.worker.js;排查时先看浏览器 Network 面板里有没有请求这个文件返回 404 就调整workerSrc的相对路径。另外一个隐蔽因素是部分浏览器对跨域 worker 有限制如果你的部署域里 worker 走的 CDN 地址跨域了需要把 worker 文件放到同源地址下。5.3 现象超过 200 页的 PDF 翻页越来越慢最后直接崩溃原因主要是 Canvas 内存没有释放。每次翻页都创建一个新的 canvas 绘制上下文旧的 canvas 虽然被移除但在 GPU 内存里可能并没有立刻回收。处理办法有两个层面首先确保renderTask.cancel()被正确调用这是纵向避免渲染任务堆积的入口其次在页面离开视图后主动把 canvas 的宽高置为 0强制释放位图内存。源码里监听了pagehide事件window.addEventListener(pagehide, () { if (canvas) { canvas.width 0; canvas.height 0; } });如果你要改成虚拟滚动只渲染视口内的页面这个释放逻辑就是基础。5.4 现象中文 PDF 部分字显示成方块或豆腐块原因是没有配置字体映射表。PDF 内嵌字体可能是 CID 编码类型浏览器需要映射文件才能还原字形。解决方法就是加载 PDF 时提供cMapUrl参数并保证cmaps/目录在服务器上可访问。注意cMapPacked: true必须对应.bcmap压缩文件如果你从某个包里拷贝来的是未压缩.cmap文件反而要把这个参数删掉。排查顺序先看 Network 是否请求了.bcmap文件、有没有 404再看参数设置是否与实际文件类型一致。5.5 现象手机端阅读器无法双指缩放单击和页面滚动冲突移动端浏览器把 touch 手势默认行为接管了如果不调用preventDefault双指缩放会直接缩放整个网页而不是放大阅读器内容。源码里需要在 canvas 的 touch 事件中手动处理canvas.addEventListener(touchstart, (e) { if (e.touches.length 2) { e.preventDefault(); this.touchStartDistance getDistance(e.touches); } }, { passive: false });passive: false是关键浏览器默认把 touch 事件当成被动事件不加这个选项没法阻止默认行为。另一个问题是文本层的 DOM 节点会拦截触摸事件导致 canvas 收不到手势这时要把文本层在触摸时临时设置pointer-events: none等手势结束再恢复。6. 二次开发从“能跑”到“能上线”的四步改造清单阅读器源码跑通只是第一步实际部署时通常还要加权限控制、服务端存储、以及移动端体验优化。我列了一张改造对照表你可以直接照搬改造目标涉及文件改造内容加登录鉴权js/main.js加载 PDF 前请求/api/auth/token换取带签名 URL批注多端同步js/annotation.js把 localStorage 读写替换为fetch(/api/annotations, { method: POST })大文件分页预加载js/main.js增加页面缓存队列提前渲染下一页嵌入已有系统index.html暴露init(pdfUrl, options)全局方法供宿主调用第一个改造点最实际内网部署 PDF 阅读器不能让任何人拿到 PDF 地址就绕过权限常见做法是一个前置接口校验登录态然后返回带时效的临时 URL。改造方式是在loadPdfDocument入口前加一层 fetch 请求拿到加密 URL 后再传给 PDF.js。第二个改造点把批注从本地存储换到后端只需要改动saveAnnotation和读取函数数据格式保持不变前端渲染逻辑完全不用动。我个人每次把这种源码包接到新项目里都会强制走一遍流程先用 Python 起本地服务确认基础功能然后改 PDF URL 指向测试文件接着关掉所有样式重写一套主题最后在手机上用真机测一遍手势。这套流程能暴露百分之八十的隐藏问题。这次拆解的项目最值得带走的设计是渲染、状态、交互三层分离——无论你之后要做 pdf 在线编辑还是加 AI 摘要都能在不破坏阅读链路的前提下横向加模块。希望这份拆解对你有用也省得你再去翻 pdf.js 那堆晦涩的源码。本文还有配套的精品资源点击获取