一、需求
近期项目遇到 PDF 加载性能问题,原使用 vue-pdf,但打开速度较慢。需求是从上到下滑动展示,要求打开时间不能过长并支持双指缩放。
1. vue-pdf(快速集成)
(1)全量串行:需下载并解析整个 PDF 后逐页渲染,渲染前白屏。 (2)占用浏览器主线程,与 Vue 组件竞争资源。
2. pdf.js(高性能、全功能)
(1)流式并行:边加载边渲染,优先加载视口页面及相邻页,远离视口的销毁或低分辨率预览。 (2)使用 Web Worker 在独立线程解析 PDF,释放主线程。
二、PDF.js 的使用
pdf.js 无需安装依赖,直接下载官网包即可。该包包含 html、css、js,可放入 public 目录,避免压缩且可直接访问。
在 public 下放测试 PDF,通过 /web 访问。例如本地代码访问 http://localhost:1357/web/viewer.html?file=/test.pdf。
项目中 pdf.vue 向后端请求链接,可用 iframe 标签展示。pdf.js 自带查找、旋转等功能,但默认不支持双指缩放(电脑端可行,移动端受限)。
三、双指缩放
随后排查发现是 pdf.js 在移动端或 iframe 中限制了手势操作。
1. 排除小程序限制
微信浏览器打开链接也不允许双指缩放,调整 pdf.js 源码,主要修改 viewer.js:
(1)放开 webViewerTouchStart 事件源头

此段代码阻止了多指触摸。
(2)解除 GrabToPan 拖拽模块拦截

若为触摸事件且多点触控,直接 return,不执行 event.preventDefault(),将事件掌控权交给浏览器处理以进行缩放。
2. 排查小程序或 iframe 限制
调整后,/web/viewer.html 在微信浏览器支持双指缩放,但小程序仍不行。对比发现,直接访问 /web/viewer.html 可行,而路由跳转如 #/pdf?type=... 不可行。
修改 pdf.vue,不再使用 iframe 展示,而是获取 PDF 链接后直接跳转到 /web/viewer.html 文件,测试验证可行。
注意:此时使用的是浏览器缩放功能,菜单栏会随动。若只需 PDF 缩放而隐藏菜单,可在 css 文件中隐藏菜单栏。
参考资料较少,最终实现了需求且速度提升明显。


