跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI 生图工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScriptWeChat大前端

Pdf.js 实现移动端双指缩放方案

文章介绍了从 vue-pdf 迁移至 pdf.js 解决 PDF 加载慢的问题,并实现了移动端双指缩放功能。通过对比两种方案的优缺点,采用 pdf.js 的流式并行加载和 Web Worker 技术优化性能。针对移动端无法缩放的问题,修改 viewer.js 源码放开触摸事件并解除拖拽拦截,同时调整页面跳转方式绕过 iframe 限制,最终实现在微信环境下的流畅缩放体验。

神经兮兮发布于 2026/4/6更新于 2026/10/21114 浏览
Pdf.js 实现移动端双指缩放方案

一、需求

近期项目遇到 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 文件中隐藏菜单栏。

参考资料较少,最终实现了需求且速度提升明显。

目录

  1. 一、需求
  2. 1. vue-pdf(快速集成)
  3. 2. pdf.js(高性能、全功能)
  4. 二、PDF.js 的使用
  5. 三、双指缩放
  6. 1. 排除小程序限制
  7. 2. 排查小程序或 iframe 限制

更多推荐文章

查看全部
  • RabbitMQ Spring Boot 集成:Hello World 实战
  • 二叉树算法实战:计算深度与求先序排列
  • LSTM 学生成绩预测系统的实现与界面整理
  • 前端加密 encrypt-labs 靶场实战:环境搭建与全关卡解析
  • 基于 FastGPT 与 MCP 协议构建工具增强型智能体
  • 基于 ZYNQ 的 FPGA 神经网络部署实战
  • C++ 二分查找算法详解与模板总结
  • Qwen3-4B-Instruct 模型快速部署与 AI 写作应用指南
  • C++ STL Vector 容器封装与迭代器失效处理
  • Java 异常处理:核心原理与实战最佳实践
  • Android 本地数据存储:SQLite 增删改查实战
  • Adobe Downloader macOS 版工具介绍与使用
  • 100 个 Python 基础练习题与示例代码
  • AIGC 结合 Photoshop 实现 Spine 2D 骨骼动画拆件工作流
  • AI 原生应用开发:知识图谱七大核心算法
  • Stable Diffusion 入门教程:提示词与生成图片步骤详解
  • C++ 继承机制详解:从基础概念到虚拟继承
  • 在 Photoshop 里用 WebPShop 处理 WebP
  • Spring Cloud 微服务架构核心概念与实战入门
  • macOS 上 OpenClaw + QQBot 安装指南

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online