简介pdf.js 1.9.426 是一份纯 JavaScript 实现的免费开源 PDF 阅读组件面向需要在网页中嵌入 PDF 预览功能的开发者尤其适合不想让用户额外安装插件的前端项目。它支持缩放、打印、查找等常用操作兼容火狐、谷歌及 IE9 以上主流浏览器但基于 H5 技术IE8 及更低版本无法使用且文件体积偏大会对加载速度有一定影响。压缩包共 372 个文件约 5.54MB其中 168 个 bcmap 字符映射文件用于多语言编码支持105 个 properties 与 74 个 png、9 个 svg 承担界面资源与本地化另有 4 个 js、3 个 map 及少量 css、html、pdf 等构成核心逻辑与示例页面。已有 989 人学习下载适合前端开发者快速集成 PDF 在线预览能力也可作为研究 PDF 渲染与字符编码映射的参考素材。1. 老版本 PDF.js 的离线包为什么还有人专门找如果你在维护一套内网文档系统或者要给一个不能连外网的桌面端嵌入 PDF 预览那你大概率绕不开一个东西pdfjs 的离线发行包。标题里的pdfjs1.9.426.rar本质就是某个历史版本的 PDF.js 构建产物被打包成压缩包解压后是一堆可以直接丢进静态目录的 js、css 和字体资源。它解决的核心问题很朴素——不依赖 CDN、不依赖 npm 安装、不依赖构建工具浏览器打开就能渲染 PDF。这个方向适合三类人一是做内网系统、离线客户端的前端二是需要把 PDF 预览嵌进 Electron 或旧版浏览器项目的人三是接手了老项目、发现里面躺着一个几年前的 pdfjs 目录、现在要改要调的人。1.9.x 属于比较早的分支API 和现在主流的 2.x、3.x、4.x 差别不小很多新教程里的写法直接套上去会翻车。这篇就按「拿到一个离线包之后怎么用、参数怎么调、坑在哪」的顺序讲清楚让你能照着复现。2. 先搞懂 1.9.426 这个版本能干什么、不能干什么2.1 版本号背后的分支差异PDF.js 的版本号不是随便编的。1.9.426 属于 1.x 系列的后期版本这个分支的定位是「稳定、兼容老浏览器」。它和后面 2.x 最大的区别在于1.x 默认还是用PDFJS这个全局对象挂载很多 API 是回调式的2.x 之后逐步转向 Promise 和 async/await 风格全局对象也变成了pdfjsLib。你在网上搜到的示例代码如果用的是pdfjsLib.getDocument(...).promise那基本是 2.x 以后的写法直接放到 1.9.426 上会报pdfjsLib is not defined。另一个差异是 worker 的处理。1.x 时代 worker 文件pdf.worker.js和主文件pdf.js必须版本严格一致混用不同小版本的 worker 会导致渲染空白或者控制台报Warning: Setting up fake worker。这个警告的意思是主线程没找到 worker退化成单线程解析性能会掉一大截大文件直接卡死。2.2 离线包里通常有哪些文件一个完整的 1.9.426 离线包解压后一般能看到这样的结构文件/目录作用是否必须pdf.js主库提供 PDFJS 全局对象必须pdf.worker.js解析 worker独立线程跑必须pdf.min.js压缩版主库二选一pdf.worker.min.js压缩版 worker二选一viewer.html自带完整阅读器界面可选viewer.js/viewer.css阅读器逻辑和样式可选cmaps/中文等 CJK 字体映射中文 PDF 必须images/阅读器图标可选locale/多语言界面文案可选这里要重点说cmaps。很多中文 PDF 内嵌的是非标准编码的字体没有 cmaps 目录渲染出来就是一堆方块或者乱码。这不是 bug是字体映射缺失。离线包里如果没带 cmaps你得单独补上否则中文场景直接不可用。2.3 最小可用示例不依赖构建工具直接跑假设你把离线包解压到了项目的static/pdfjs/目录下下面是一个不打包、不编译、直接能跑的最小 HTML!DOCTYPE html html head meta charsetutf-8 title离线 PDF 预览/title /head body !-- 容器canvas 会被动态插入到这里 -- div idcontainer stylewidth:800px;border:1px solid #ccc;/div !-- 引入主库注意路径按实际解压位置改 -- script src./static/pdfjs/pdf.js/script script // 1.9.x 的 worker 路径必须显式指定否则会退化单线程 PDFJS.workerSrc ./static/pdfjs/pdf.worker.js; // 1.9.x 用回调式 API不是 Promise PDFJS.getDocument(./demo.pdf).then(function (pdf) { // 取第一页 return pdf.getPage(1); }).then(function (page) { // 按 1.5 倍缩放渲染 var viewport page.getViewport({ scale: 1.5 }); var canvas document.createElement(canvas); var ctx canvas.getContext(2d); canvas.width viewport.width; canvas.height viewport.height; document.getElementById(container).appendChild(canvas); var renderTask page.render({ canvasContext: ctx, viewport: viewport }); return renderTask.promise; }).then(function () { console.log(第一页渲染完成); }).catch(function (err) { // 出错时把信息打出来方便定位是 worker 还是文件问题 console.error(渲染失败:, err); }); /script /body /html这段代码有几个关键点。第一PDFJS.workerSrc必须在调用getDocument之前设置顺序反了 worker 就加载不上。第二getViewport在 1.9.x 里接收的是一个配置对象scale是缩放倍数1.5 表示放大到 150%这个值直接影响 canvas 的像素尺寸和内存占用。第三page.render返回的是一个带promise属性的任务对象不是直接返回 Promise所以要用renderTask.promise去接。第四getDocument的参数可以是 URL 字符串也可以是{ url: ... }对象还可以是{ data: arrayBuffer }后者适合你已经把 PDF 读成二进制流的场景。2.4 参数怎么调scale、worker 和 cmapsscale是最常调的参数。设太小文字糊设太大内存爆。经验值是屏幕预览用 1.0 到 1.5打印或高清导出用 2.0 到 3.0。如果 PDF 本身页面尺寸很大比如 A0 图纸1.0 都可能吃掉几百 MB 内存这时候要配合分页懒加载只渲染当前可见页。worker 路径除了workerSrc还有一个PDFJS.disableWorker开关。设成true会强制单线程调试时有用生产环境千万别开大文件会卡到怀疑人生。另外跨域场景下 worker 加载可能被拦常见做法是把 worker 文件放到同源目录或者用 blob 方式包装。cmaps 的配置在 1.9.x 里是通过PDFJS.cMapUrl和PDFJS.cMapPacked两个全局变量控制的// 指向 cmaps 目录注意结尾要有斜杠 PDFJS.cMapUrl ./static/pdfjs/cmaps/; // 1.9.x 的 cmaps 通常是二进制打包格式 PDFJS.cMapPacked true;这两个必须在getDocument之前设好。中文 PDF 渲染出方块九成是这里没配或者路径写错。3. 把离线包接进真实项目的三种落地方式3.1 纯静态页面直接引用这是最简单的场景你有一个传统的多页应用或者单页 HTML没有构建流程。做法就是把整个 pdfjs 目录拷进静态资源目录然后按 2.3 的示例写。要注意的是路径问题——如果你的页面在子路由下相对路径./static/...可能解析错建议用绝对路径或者根据window.location动态拼。这种方式的边界很明显没法做代码分割pdf.js 和 worker 都是全量加载首屏会多出几百 KB 的请求。如果只是偶尔预览一两个 PDF可以接受如果 PDF 预览是核心功能建议看下一种。3.2 配合模块打包器做按需加载如果你的项目用了 webpack、rollup 这类打包器可以把 pdf.js 作为依赖引入但要注意 1.9.x 不是标准 ES Module直接import可能报错。常见做法是用script-loader或者把它配成externals运行时从全局拿。worker 的处理更麻烦打包器容易把 worker 路径改掉稳妥的方式是// 把 worker 文件单独拷到 public 目录运行时用绝对路径指过去 PDFJS.workerSrc /public/pdfjs/pdf.worker.js;这样打包器不会去动它路径稳定。代价是 worker 文件不走 hash 缓存更新时要手动处理版本。3.3 嵌入 Electron 或桌面端桌面端场景下PDF 文件通常在本地磁盘用file://协议加载。这时候getDocument直接传本地路径可能被安全策略拦推荐先把文件读成 ArrayBuffer 再传进去const fs require(fs); const data fs.readFileSync(/path/to/local.pdf); // 转成 Uint8Array 再传1.9.x 对 ArrayBuffer 支持更稳 const uint8 new Uint8Array(data); PDFJS.getDocument({ data: uint8 }).then(function (pdf) { // 后续渲染逻辑同上 });用{ data: ... }的好处是不受协议和跨域限制坏处是整个文件会读进内存。几百 MB 的 PDF 要谨慎最好配合分片或者只加载需要的页。4. 避坑1.9.426 离线包最常见的五个翻车点4.1 控制台报 fake worker页面卡死现象打开页面后 PDF 迟迟不渲染控制台出现Setting up fake worker警告大文件直接无响应。原因PDFJS.workerSrc没设、设错路径或者 worker 文件和主库版本不一致。1.9.x 对版本一致性要求很严拿 2.x 的 worker 配 1.9 的主库必挂。解决确认workerSrc指向的pdf.worker.js和pdf.js来自同一个压缩包路径用浏览器能直接访问的 URL 验证一下能下载到内容才算对。4.2 中文显示成方块或乱码现象英文 PDF 正常中文 PDF 全是方块或者部分字缺失。原因cmaps 没配或者cMapUrl路径结尾少了斜杠或者cMapPacked设成了false但实际文件是打包格式。解决确认 cmaps 目录存在且可访问cMapUrl结尾带/cMapPacked和实际文件格式匹配。1.9.x 的 cmaps 默认是.bcmap二进制格式对应cMapPacked true。4.3 渲染出来模糊、锯齿严重现象文字边缘发虚放大后更明显。原因scale设太小或者 canvas 的 CSS 尺寸和实际像素尺寸不匹配。PDF.js 渲染是按 viewport 的像素尺寸来的如果 canvas 被 CSS 拉伸就会糊。解决让 canvas 的width/height属性等于 viewport 的宽高CSS 尺寸要么不设要么和属性一致。需要高清就用大scale别靠 CSS 放大。4.4 内存持续增长翻几页就崩现象连续翻页后浏览器内存飙升最终标签页崩溃。原因每次渲染都新建 canvas旧的没释放或者 renderTask 没等完成就发起新的渲染任务堆积。解决翻页前先renderTask.cancel()取消上一个任务复用同一个 canvas 而不是反复创建渲染完成后把不再用的 page 对象置空。1.9.x 没有自动回收得手动管。4.5 跨域加载 PDF 被拦现象getDocument传远程 URL 时报 CORS 错误或者 worker 加载失败。原因PDF 文件和 worker 不在同源浏览器安全策略拦截。解决PDF 文件走服务端代理转同源或者读成 ArrayBuffer 再传worker 文件必须同源放到项目静态目录里。5. 进阶用 textLayer 做可选中文字和搜索定位前面讲的都是把 PDF 渲染成图片但图片里的文字是选不中的也没法搜索。PDF.js 提供了一个textLayer机制在 canvas 上层叠一层透明的文字 DOM让用户可以选中、复制、搜索。1.9.x 里这个功能需要手动实现不像后面的 viewer 那样开箱即用。核心思路是调page.getTextContent()拿到文字内容和位置信息然后按坐标把每个文字片段用绝对定位的 span 铺上去。下面是一个精简实现PDFJS.getDocument(./demo.pdf).then(function (pdf) { return pdf.getPage(1); }).then(function (page) { var viewport page.getViewport({ scale: 1.5 }); // 渲染 canvas 层 var canvas document.createElement(canvas); var ctx canvas.getContext(2d); canvas.width viewport.width; canvas.height viewport.height; var container document.getElementById(container); container.style.position relative; container.appendChild(canvas); // 渲染文字层叠在 canvas 上面 return page.getTextContent().then(function (textContent) { var textLayer document.createElement(div); textLayer.style.position absolute; textLayer.style.left 0; textLayer.style.top 0; textLayer.style.width viewport.width px; textLayer.style.height viewport.height px; // 文字层本身透明但内部 span 可选中 textLayer.style.opacity 1; textLayer.style.lineHeight 1; textContent.items.forEach(function (item) { var span document.createElement(span); span.textContent item.str; // transform 里包含缩放和位移信息直接套用 var tx PDFJS.Util.transform(viewport.transform, item.transform); span.style.position absolute; span.style.left tx[4] px; span.style.top (tx[5] - item.height) px; span.style.fontSize item.height px; span.style.color transparent; // 选中时给个高亮方便确认位置对不对 span.style.userSelect text; textLayer.appendChild(span); }); container.appendChild(textLayer); return page.render({ canvasContext: ctx, viewport: viewport }).promise; }); }).catch(function (err) { console.error(渲染失败:, err); });这段代码的关键在PDFJS.Util.transform它把文字在 PDF 坐标系里的变换矩阵转换成屏幕坐标系的位置。tx[4]是横坐标tx[5]是纵坐标item.height是文字高度用来定字号。文字颜色设成透明用户看到的是 canvas 上的字但选中时选的是这层 span。有几个细节容易踩坑。一是textLayer的lineHeight要设成 1否则 span 之间会有额外间距选中区域对不上。二是不同 PDF 的item.transform差异很大有些旋转页面需要额外处理角度。三是文字层和 canvas 的缩放必须用同一个 viewport否则位置会偏。四是性能问题——文字多的页面会生成大量 span翻页时要记得清理旧的 textLayer不然 DOM 节点越堆越多。验证文字层是否生效最简单的办法是用鼠标划选一段文字看能不能选中、复制出来是不是正确内容。如果选不中检查 span 的userSelect和父容器的pointer-events如果选中的位置和视觉文字错位检查transform的计算和 viewport 是否一致。我自己在这个环节翻过车一开始图省事直接拿item.transform的原始值去定位没走Util.transform结果文字层整体偏移了几十像素选中的永远是隔壁的字。后来老老实实按官方 viewer 的思路走变换才对上。所以如果你也要做文字层别自己造坐标换算用库提供的工具函数省下来的时间够你调好几个别的参数了。希望帮到你。本文还有配套的精品资源点击获取