简介：这份资源是面向Java与Web开发者的PDF在线阅读器制作源码，聚焦在浏览器端直接查看、编辑与处理PDF文档的完整实现思路，适合想入门PDF解析、渲染与在线编辑的中级开发者参考。压缩包共8个文件，约490KB，以html页面、js脚本和pdf示例文档为主，另含工程配置文件，html负责阅读器界面与页面结构，js承担PDF加载与渲染逻辑，pdf文件可用于本地测试解析与显示效果。资源围绕PDFBox、iText、PDF.js等主流库展开，涉及页面转图片流、canvas渲染、文本与图像提取、注释编辑、移动端响应式适配以及脚本注入防护等关键环节，并附带一个入门示例作为项目起点。目前已有1751人学习下载，可帮助读者快速理解Web版PDF阅读器的技术选型与核心模块划分，为二次开发或功能扩展提供可运行的参考基础。

1. 从一份「pdf在线阅读器制作源码」说起：为什么我劝你先别急着写渲染层

去年帮一个做在线教育的朋友救火，他们的 PDF 在线阅读器上线两周，用户投诉集中在三件事：翻到第 50 页白屏、手机端双指缩放后文字糊成马赛克、上传一份 80MB 的扫描件直接把浏览器标签页干崩。我拿到他们那份「pdf在线阅读器制作源码」一看，前端用<iframe>直接嵌 PDF 地址，后端把整个文件读进内存再吐给前端，没有任何分页、没有范围请求、没有 Worker。这不是源码写得烂，是压根没搞清 PDF 在线阅读器到底在解决什么问题。

这个标题背后要落地的东西，本质是一套「把 PDF 文件变成浏览器里可翻页、可缩放、可检索的页面」的完整链路。它适合三类人：想给自己产品加文档预览能力的前后端、接私活要做文档管理系统的独立开发者、以及想搞懂 PDF 解析与渲染原理的学习者。热词里「pdf解析」「pdf阅读器」「web页面pdf打印」这几个词，恰好对应了这条链路的三个关键环节。接下来我按「选型 → 渲染 → 分页与性能 → 避坑 → 进阶」的顺序，把一份能真正跑起来的源码该长什么样讲清楚。

2. 先定架构：PDF.js 自渲染还是服务端转图片，选错后面全白干

2.1 两种主流路线的成本对比

做 PDF 在线阅读器，第一刀切在「谁来渲染」。常见做法就两条路：一是前端用 PDF.js 把 PDF 解析成 Canvas 或 SVG 画出来；二是服务端用工具把每页转成图片，前端只负责显示图片。这两条路没有绝对优劣，但选错了后期改造成本能让你怀疑人生。

我一般会这样判断：如果文档需要复制文字、做全文检索、做标注，闭眼选 PDF.js；如果只是「看一眼就行」的合同、发票、扫描件预览，服务端转图片更省心。热词里「pdf图片中文设置」这个词，其实就踩在服务端转图片这条路上——转出来的图里中文乱码，是字体没嵌进去。

2.2 用 PDF.js 搭最小可运行骨架

先给一个能跑的最小结构。这里不引 CDN，用 npm 装，方便你后续打包。

# 初始化项目并安装 pdfjs-dist npm init -y npm install pdfjs-dist # 如果你要用官方 worker，确保版本和主库一致 npm ls pdfjs-dist

装完之后，核心渲染逻辑长这样：

import * as pdfjsLib from 'pdfjs-dist'; // worker 必须显式指定，否则主线程解析大文件会卡死 UI import PdfWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?url'; pdfjsLib.GlobalWorkerOptions.workerSrc = PdfWorker; async function renderPage(pdfDoc, pageNum, canvas, scale = 1.5) { // 页码从 1 开始，PDF.js 内部也是 1-based const page = await pdfDoc.getPage(pageNum); // 按设备像素比放大，避免高分屏发虚 const dpr = window.devicePixelRatio || 1; const viewport = page.getViewport({ scale: scale * dpr }); const ctx = canvas.getContext('2d'); canvas.width = viewport.width; canvas.height = viewport.height; // CSS 尺寸回缩到逻辑像素，保证清晰又不撑破布局 canvas.style.width = `${viewport.width / dpr}px`; canvas.style.height = `${viewport.height / dpr}px`; await page.render({ canvasContext: ctx, viewport }).promise; } // 加载文档 const loadingTask = pdfjsLib.getDocument({ url: '/api/file/123' }); const pdfDoc = await loadingTask.promise; await renderPage(pdfDoc, 1, document.getElementById('pdf-canvas'));

这段代码有三个参数必须理解。scale控制渲染倍率，1.5 是清晰度和内存的折中，调到 3 以上在低端机上会直接 OOM。devicePixelRatio是高分屏适配的关键，不乘它文字边缘会发虚，这是很多人第一次做阅读器时最常忽略的点。workerSrc必须指向和主库同版本的 worker 文件，版本不一致会报「API version does not match Worker version」，这个报错我见过太多次。

2.3 服务端转图片路线的关键参数

如果你走服务端转图片，以常见的 Poppler 工具链为例，转一页的命令大致是这样：

# -r 150 表示 150 DPI，-png 输出 PNG，-f/-l 控制页码范围 pdftoppm -png -r 150 -f 1 -l 10 input.pdf output/page

-r这个参数是血泪经验：72 DPI 屏幕上看勉强够，但用户一放大就糊；300 DPI 清晰但单页图片能到 2MB，100 页就是 200MB 流量。我一般用 150 DPI 做默认，再提供一个「高清模式」按钮按需转 300 DPI。中文乱码问题多半是服务器缺中文字体，装fonts-noto-cjk这类字体包后重新转即可，这就是「pdf图片中文设置」的实际含义。

3. 分页、懒加载与内存控制：让 500 页文档不崩标签页

3.1 为什么一次性渲染所有页必然翻车

新手最容易犯的错，是拿到 PDF 后循环把每一页都渲染成 Canvas 塞进 DOM。一份 200 页的文档，每页 Canvas 按 1.5 倍渲染约 4MB 显存，200 页就是 800MB，浏览器标签页不崩才怪。正确的做法是「虚拟滚动 + 按需渲染」：只渲染视口内和前后各一两页，滚出视口的页把 Canvas 释放掉。

核心思路是维护一个「当前可见页范围」，滚动时重新计算。下面是一个简化版的可见页计算：

const PAGE_HEIGHT = 800; // 每页占位高度，需和实际渲染高度一致 const BUFFER = 1; // 前后各多渲染 1 页 function getVisibleRange(scrollTop, viewportHeight, totalPages) { const start = Math.floor(scrollTop / PAGE_HEIGHT); const end = Math.ceil((scrollTop + viewportHeight) / PAGE_HEIGHT); return { start: Math.max(1, start - BUFFER + 1), end: Math.min(totalPages, end + BUFFER), }; }

PAGE_HEIGHT必须和实际渲染出来的高度对齐，否则滚动位置会跳。做法是先用page.getViewport({scale:1})拿到原始尺寸，乘以你的缩放系数，算出每页真实高度，再写进占位容器。BUFFER设 1 是平衡，设 3 以上滚动更顺但内存涨得快。

3.2 用 IntersectionObserver 替代滚动监听

手写 scroll 事件监听有两个毛病：触发频率高、要手动做节流。现代浏览器直接用IntersectionObserver更省事：

const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { const pageNum = Number(entry.target.dataset.page); if (entry.isIntersecting) { // 进入视口，渲染 renderPage(pdfDoc, pageNum, entry.target.querySelector('canvas')); } else { // 离开视口，释放 Canvas 内存 const canvas = entry.target.querySelector('canvas'); if (canvas) { canvas.width = 0; canvas.height = 0; } } }); }, { rootMargin: '200px 0px' }); // 为每一页创建一个占位容器并观察 document.querySelectorAll('.page-placeholder').forEach((el) => observer.observe(el));

rootMargin设 200px 是提前量，让用户在快速滚动时不会看到白屏。把canvas.width设为 0 是释放显存的有效手段，比removeChild更轻量，因为占位容器还在，滚动条不会跳。

3.3 大文件的范围请求与流式加载

80MB 的 PDF 如果一次性下载，用户要等很久。PDF.js 支持 HTTP Range 请求，服务端只要返回Accept-Ranges: bytes和正确的Content-Range，PDF.js 就会按需拉取。服务端用 Nginx 托管静态文件时默认就支持，但如果你是自己写的接口，必须手动处理 Range 头：

// Node.js 示例：处理 Range 请求 function servePdf(req, res, filePath) { const stat = fs.statSync(filePath); const range = req.headers.range; if (range) { const [startStr, endStr] = range.replace(/bytes=/, '').split('-'); const start = parseInt(startStr, 10); const end = endStr ? parseInt(endStr, 10) : stat.size - 1; res.writeHead(206, { 'Content-Range': `bytes ${start}-${end}/${stat.size}`, 'Accept-Ranges': 'bytes', 'Content-Length': end - start + 1, 'Content-Type': 'application/pdf', }); fs.createReadStream(filePath, { start, end }).pipe(res); } else { res.writeHead(200, { 'Content-Length': stat.size, 'Content-Type': 'application/pdf' }); fs.createReadStream(filePath).pipe(res); } }

关键在206状态码和Content-Range头，缺一个 PDF.js 就会退化成整文件下载。Content-Type必须是application/pdf，写成octet-stream有些浏览器会触发下载而不是内联预览。

4. 避坑与排查：那些让阅读器「看起来能用但一用就废」的细节

4.1 翻页白屏，控制台报 worker 加载失败

现象：页面能显示第一页，翻到第二页就白屏，控制台出现Failed to fetch dynamically imported module或 worker 相关报错。

原因：打包工具（Vite/Webpack）没有正确处理 worker 文件，或者 worker 路径在部署后 404。PDF.js 的 worker 是独立文件，不能被打包进主 bundle。

解决：Vite 里用?url后缀导入 worker 路径（如 2.2 节代码所示）；Webpack 里用new Worker(new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url))。部署后打开 Network 面板确认 worker 文件返回 200。

4.2 中文文档渲染出来是方块或乱码

现象：英文 PDF 正常，中文 PDF 全是方框。

原因：PDF 里没有嵌入中文字体，PDF.js 找不到对应字体就画方块。服务端转图片路线则是服务器缺中文字体。

解决：PDF.js 路线可以引入cMapUrl和standardFontDataUrl配置，让它去加载 CJK 字符映射：

const loadingTask = pdfjsLib.getDocument({ url: '/api/file/123', cMapUrl: '/cmaps/', // 需把 pdfjs-dist/cmaps 目录拷到静态资源 cMapPacked: true, standardFontDataUrl: '/standard_fonts/', });

服务端转图片路线，装fonts-noto-cjk后重新执行pdftoppm即可。

4.3 移动端双指缩放后文字模糊

现象：桌面端清晰，手机端捏合放大后文字发虚。

原因：Canvas 只按初始 scale 渲染了一次，CSS 放大只是拉伸位图。

解决：监听缩放结束后，用新的 scale 重新调用renderPage。不要用 CSStransform: scale()去放大 Canvas，那是位图拉伸，必糊。正确做法是重新计算 viewport 并重绘。

4.4 内存持续增长，翻几十页后卡顿

现象：翻页越多越卡，DevTools 内存面板显示只增不减。

原因：旧页面的 Canvas 没有释放，或者page.render()返回的 promise 没等完成就重复调用。

解决：离开视口时把canvas.width和canvas.height置 0；渲染前检查该页是否已在渲染中，用一个renderingTasksMap 记录进行中的任务，避免重复渲染同一页。

4.5 打印出来缺页或排版错乱

现象：网页上看着正常，Ctrl+P 打印时只出第一页。

原因：Canvas 是位图，浏览器打印时对 Canvas 支持不一致，且虚拟滚动只渲染了可见页。

解决：打印场景单独处理，用window.print()前把所有页渲染成图片按顺序排好，或者用 PDF.js 的getData()拿到原始 PDF 数据交给浏览器原生打印。热词里「web页面pdf打印」说的就是这个坑，别指望虚拟滚动的 DOM 能直接打印。

5. 进阶：把阅读器做成能检索、能标注、能二次分发的形态

5.1 文字层与全文检索

Canvas 渲染出来的是图，用户选不中文字。PDF.js 提供了getTextContent()接口，可以拿到每页的文字和坐标，把它渲染成一个透明的文字层盖在 Canvas 上，就能实现选中和复制：

const page = await pdfDoc.getPage(pageNum); const textContent = await page.getTextContent(); const textLayerDiv = document.getElementById(`text-layer-${pageNum}`); // 用官方 TextLayer 或手动按 item.transform 定位每个文字块 textContent.items.forEach((item) => { const span = document.createElement('span'); span.textContent = item.str; // item.transform 是 [a,b,c,d,e,f]，e/f 是 x/y 坐标 span.style.left = `${item.transform[4]}px`; span.style.top = `${item.transform[5]}px`; textLayerDiv.appendChild(span); });

文字层要设position: absolute且color: transparent，盖在 Canvas 上方，user-select: text。有了文字层，全文检索就是遍历所有页的textContent做匹配，再把匹配到的页滚动到视口。

5.2 标注与持久化

标注的本质是在文字层上叠加一层 SVG 或 Canvas，记录用户画的矩形、高亮、批注。数据结构建议这样设计：

坐标一定要存「相对页面」的归一化值（除以页面宽高），否则用户换设备、换缩放比例后标注位置全错。这是我在实际项目里踩过的坑，第一版存了绝对像素，结果手机和电脑上标注对不上。

5.3 一个我坚持的习惯

每次做完一个 PDF 阅读器，我都会拿三类文件做回归测试：一份纯文字的中文论文、一份扫描版合同、一份 300 页以上的手册。这三类分别覆盖文字层、图片渲染、内存控制三个最容易翻车的场景。很多源码在 demo 阶段看着完美，一上真实文档就原形毕露。如果你正准备基于「pdf在线阅读器制作源码」动手，先把这三份测试文件准备好，比急着写渲染逻辑有用得多。希望帮到你。

本文还有配套的精品资源，点击获取