记录前端菜鸟的日常——Pdf.js与双指缩放

一、需求

这两天一直在研究这个,之前项目用的是vue-pdf,但是pdf打开速度巨慢。我们的需求是从上到下滑动展示,要求打开时间不能过长并且可以实现双指缩放。

1.vue-pdf(快速集成)

(1)**"全量串行",**要把整个pdf全部下载并解析完之后一页一页渲染出来,渲染出来之前的页面就是一直白屏的。

(2)占用浏览器主线程,与Vue组件竞争资源。

2.pdf.js(高性能、全功能)

(1)"流式并行",一边加载一边渲染,而且是视口在哪就优先加载哪页、智能加载相邻页,远离视口的进行销毁或者低分辨率预览。

(2)使用Web Worker在独立线程解析PDF,主线程释放。

二、PDF.js的使用

pdf.js不需要安装依赖,直接去官网下载包,这个包就是个阅读器软件(网页版),2.多版本更稳定。

里面的web文件夹就包含了html、css、js,直接扔进puclic里,一个是因为不会被压缩,而且可以直接在根目录下访问,不用走路由之类的。

这个时候你就可以进行尝试在public下放一个测试的pdf,通过/web进行访问了,以我本地代码为例,访问的是http://localhost:1357/web/viewer.html?file=/test.pdf

file放的是你要访问的pdf链接,我们的项目进入pdf.vue会向后端请求一个链接,在pdf.vue用iframe标签直接展示这个链接即可。pdf.js会自带查找关键字、旋转等功能,但是发现这个方法不能进行双指缩放。(电脑本地可以,小程序不行)

三、双指缩放

然后我就开始排查是pdf.js在手机上会被限制还是小程序的限制或者iframe不允许手势操作。

1.最开始排除的是小程序的限制

因为在微信浏览器打开那个链接也不允许双指缩放,然后开始调整pdf.js的源码,看有没有对移动端做手势限制的代码。

主要找的是viewer.js,修改点(1)webViewerTouchStart放开事件源头

这段阻止了多指触摸

修改点(2)GrabToPan解除拖拽模块的拦截

如果是触摸事件且多点触控,让他直接return 不要进行后面的event.preventDefault();将事件掌控权交给浏览器处理进行缩放。

2.排查小程序oriframe的限制

这样调整完之后发现在web/viewer.html的pdf链接微信浏览器已经可以进行双指缩放了,不过小程序还是不行,本来以为是小程序又做了什么限制,后来无意中在手机上访问/web/viewer.html和#/pdf?type=https、、、、

发现原来是/web在微信浏览器就可以,#/pdf的还是不行,于是将pdf.vue文件进行修改,不再使用iframe进行展示pdf链接,而是直接在拿到pdf链接之后进行跳转到/web/viewer.html文件,发到测试上看,果然可以了

不过需要注意的是现在我们打开的是浏览器的缩放功能,也就是上面的菜单栏会一起跟着放大缩小,不过我们的需求是不要那些菜单栏只要实现双指缩放就可以,我就在css文件将菜单栏隐藏掉了。

网上关于pdf.js在移动端双指缩放的案例比较少,大部分还要会员,阴差阳粗的实现了我们的需求而且速度也比之前快很多了,如果有大佬知道怎么只让pdf放缩菜单栏不动的话欢迎指正!

相关推荐
Highcharts.js2 小时前
缺失数据可视化图表开发实战|Highcharts创建人员出生统计面积图表示例
开发语言·前端·javascript·信息可视化·highcharts·图表开发
LaughingZhu9 小时前
Product Hunt 每日热榜 | 2026-05-21
前端·人工智能·经验分享·chatgpt·html
怕浪猫9 小时前
Electron 开发实战(一):从零入门核心基础与环境搭建
前端·electron·ai编程
小鹏linux9 小时前
Ubuntu 22.04 部署开源免费具有精美现代web页面的Casdoor账号管理系统
linux·前端·ubuntu·开源·堡垒机
前端若水10 小时前
会话管理:创建、切换、删除对话历史
前端·人工智能·python·react.js
Bigger10 小时前
mini-cc:一个轻量级 AI 编程助手的诞生
前端·ai编程·claude
涵涵(互关)11 小时前
Naive-ui树型选择器只显示根节点
前端·ui·vue
BY组态11 小时前
Ricon组态系统最佳实践:从零开始构建物联网监控平台
前端·物联网·iot·web组态·组态
BY组态11 小时前
Ricon组态系统vs传统组态软件:为什么选择新一代Web组态平台
前端·物联网·iot·web组态·组态
SoaringHeart11 小时前
Flutter进阶:OverlayEntry 插入图层管理器 NOverlayZIndexManager
前端·flutter