vue3中使用pdf.js、实现移动端、PC端的PDF预览、支持绝大部分情况

已于 2024-07-03 17:52:29 修改
阅读量109 收藏
点赞数
分类专栏： JS 文章标签： pdf javascript
于 2023-10-11 10:41:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40893035/article/details/132761003
版权

业务场景

pdf.js可以说是预览PDF的全能插件，里面内置了很多方法供开发者使用。
之前一直使用的pdf.js+canvas的形式预览PDF，但是这有一个很大的弊端，就是canvas生成的图片太糊了，而且本质上这渲染的根本不是pdf，而是一张图片，很多pdf中带有的功能这里都不能实现
比如

  1. pdf全局搜索
  2. 缩小放大任能保持清晰度
  3. 指定页跳转，上下一页
  4. 对当前预览的文件，开启在线演示模式
  5. 支持在 viewer.html 添加水印
  6. …等等操作

本文只做最基础的，能让你在移动端，PC端正常预览PDF的功能，扩展操作不做解释

下载pdf.js源码

最新版下载地址，下载哪个自己选择，我没有细看他们之间的区别，我选择的下载第一个
在这里插入图片描述

历史版本下载地址
如果你需要下载历史版本的话，选择你想要的版本，点击Downloads进入下载页面
在这里插入图片描述
这里会告诉你这个版本都做哪些优化或者其他工作，之后拉到页面最下面，点击下载第一个

在这里插入图片描述
下载完成之后你会得到一个压缩包，（你可能会好奇，为什么不直接npm install这种下载形式，而要下载一个压缩包，没关系继续看）
会得到一个这样目录的压缩包
在这里插入图片描述
build文件夹
在这里插入图片描述
web文件夹
在这里插入图片描述
OK，到这里已经完成pdf.js的下载工作
接下来我会使用vite脚手架搭建一个新的vue3项目作为演示

引入PDF.JS并使用他来预览我们的第一份PDF文件

这是我创建的一个空的vue3项目，刚初始化完成的，我新建了一个 pdfJSDemo.vue 文件作为演示的入口

在这里插入图片描述
现在，将我们刚才下载好的pdf.js文件，放到项目的public文件下新建的pdfJS文件中（是不是public文件都无所谓，这里作为演示）
注意这里的viewer.html文件，你可能在其他博客中见到这个文件，他们指的都是这个文件，我们之后所有的操作都要针对这个文件进行
在这里插入图片描述
我们先打开一个pdf.js给我们提供的默认pdf看看效果，也就是下面这个文件

在这里插入图片描述
打开的方式是，启动你项目之后的 开发地址 + pdfJS/web/viewer.html （如果你是按照我的文件夹目录来的话，可以直接复制）

在这里插入图片描述
这是我的启动地址，所以拼接的地址就是 http://localhost:5173/pdfJS/web/viewer.html

如果你成功打开了这个页面，且没有任何报错，那就表示你的第一个预览PDF已经完成了

在这里插入图片描述

那么接下来我们来打开一个自己的PDF吧，自己的PDF有两种形式

  1. 本地的PDF文件，展示在页面上（那操作就和上面一模一样了，没啥好说的，重复上面的步骤就行）
  2. 后端返回的PDF链接，需要我们展示在页面上（这里以阿里云的PDF链接为例）

第二种预览形式，只需要在上面的连接上加上一个file=your-pdf-url就行了：开发地址 + pdfJS/web/viewer.html?file=your-pdf-url

举个例子 http://localhost:5173/pdfJS/web/viewer.html?file=http://wuneng-public.oss-cn-hangzhou.aliyuncs.com/wp/infoConfig/demo/NKRRQUGX20230908050411

这时，你可能会出现这么一个错误，然后pdf无法正确渲染出来，这是因为这个pdf链接发生了跨域

在这里插入图片描述

你要找到 throw new Error("file origin does not match viewer's"); 这段代码，并注释掉

在这里插入图片描述
保存之后刷新页面，这样一个链接形式的pdf就被渲染出来了

在这里插入图片描述

手机端的一个bug问题

因为我们使用pdfjs主要是解决手机端浏览器无法预览PDF的情况，但是pdfjs在手机端浏览器上有点bug

这是我使用微信浏览器打开的pdfjs官网给的一个demo页面，当在手机上进行缩放的时候，会导致显示错乱的情况，下面的图应该能很清楚的看到错乱情况
且很多其他浏览器，比如手机端的chrome浏览器，Safari浏览器，夸克浏览器会出现不同情况的缩放问题，总之很诡异。虽然官网上说他们的插件主要支持火狐浏览器，但是我试了火狐浏览器，还是有问题

请添加图片描述

手机端缩放bug，我的解决方式

  1. 限制页面不能进行缩放user-scalable=no，这可以避免（Chrome、Safari浏览器之类的缩放问题）
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  1. 设置页面属性zoom为1
body {
  zoom: 1; /* 设置缩放比例为1，即不缩放 */
}
  1. 根据页面的按钮点击事件，找到对应的源码，修改源码的缩放事件

我的理解是，在手机端使用手势缩放放大缩小pdf后，出现了错乱的情况，这时候我再手动调用一下源码中自带的 update 方法

在这里插入图片描述

我在源码中加了一个被我隐藏的按钮，并为其添加点击事件，在缩放完成后，调用点击事件，完成pdf的更新

 .myBtn {
   position: absolute;
   opacity: 0;
 }

在这里插入图片描述
在viewer.js源码文件里，在这里添加根据 ID 获取 DOM 元素
在这里插入图片描述
在viewer.js源码文件里，这一段代码中，注册DOM元素的点击事件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
有很多地方的事件注册，我这里应该是截图完了，单也可能是哪里忘记截图了

  1. 手势结束事件后，手动触发upadte事件
const c_viewerContainer = document.getElementById('viewer')

c_viewerContainer.addEventListener('touchend', handleTouchEnd, false)

// 手势结束事件
function handleTouchEnd(event) {
  myBtnUpdate.click()
}

抛砖引玉，我这个方法虽然可以解决，但是太僵硬了，为了解决而解决，肯定是有更好的办法的

满舰饰v
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目中使用pdf.js预览pdf文件
shentibeitaokong的博客
05-02 18万+
项目要求需要预览pdf文件，网上找了很久，大多数都是推荐pdf.js，自己先了解了一下，最后决定用pdf.js， 但是发现，在vue中使用这个很少！！！！！所以我就写这一篇帮助一下vue使用pdfjs的朋友！ 其实 这和前端框架无关的，直接使用pdf.js原生 搜多了你就发现有几个封装pdf.js的vue组件，个人试验了其中一个，效果不是很好，所以，当然啊，用原生 的是最...
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
12-07
在开发Vue应用时，有时需要实现手机端在线预览PDF文档的功能。由于大多数手机浏览器并不直接支持PDF在线预览，我们需要借助外部库来解决这个问题。本文将详细介绍如何使用pdf.js插件来实现在Vue中手机预览PDF文档。 ...
vue3项目使用pdf.js插件实现：搜索高亮、修改pdf.js显示的页码、向pdf.js传值、控制搜索、处理接口文件流
时清云的博客
11-23 2038
PDF.js是基于HTML5技术构建的，用于展示可移植文档格式的文件(PDF)，它可以在现代浏览器中使用且无需安装任何第三方插件。pdf.js主要包含两个库文件pdf.js:负责API解析pdf.worker.js:负责核心解析。
Vue3——实现word，pdf上传之后，预览功能（实测有效）
Bonsoir777的博客
06-03 614
本文主要叙述了如何实现vue3中如果需要实现word，pdf上传之后的预览功能
前端页面开发浅谈：PC 端设计如何“完美”迁移到移动端？_实现pc和移动端
最新发布
2401_84435768的博客
06-25 711
在以下我们分别从布局、编码、流程和目标方面对 H5 页面的注意事项进行一个总结。
vue3+node.js实现移动端音乐播放器
07-03
【标题】"vue3+node.js实现移动端音乐播放器"是一个综合性的项目，结合了前端Vue3框架和后端Node.js技术，旨在构建一个适用于移动设备的音乐播放应用。Vue3是Vue.js的最新版本，提供了更高效、更灵活的组件系统和...
vue实现在线预览pdf文件和下载（pdf.js）
10-15
主要为大家详细介绍了vue实现在线预览pdf文件和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
如何通过vue3和vite实现在线预览pdf功能，供大家学习研究参考
11-16
pdfjsLib.GlobalWorkerOptions.workerSrc = "./pdf.worker.js"; const loadingTask = pdfjsLib.getDocument(state.source); loadingTask.promise.then((pdf) => { state.numPages = pdf.numPages; }); }); ...
数组 reduce 简介及使用场景
qq_40893035的博客
06-04 1705
1 . 数组求和，求乘积 2 . 计算数组中每个元素出现的次数 3 . 数组去重 4 . 数组扁平化（将二维，或者多维数组转化为一维数组） 5 . 对象里的属性求和 reduce的参数，只接收两个参数，一个回调函数（必填），一个 initValue 初始值（非必填） 注意：回调函数有四个参数 1 . Accumulator （累计器)，上一次回调函数的返回值，如果有initValue，他就表示为initValue的值 2 . Current Value 当前正在处理的数组元素 3 . Current Ind
JS对象的几种声明方式
qq_40893035的博客
11-08 1284
1 .字面量式生命对象 var obj = { name:"zhangsan", age:"23", active:function(){ console.log("这是对象的第一种创建方式"); } } 注意：属性与属性之间用逗号“,”隔开 标题2.实例化Object的方式声明对象，（什么叫实例化，就自己查资料去吧，这里讲的是对象的声明方式）。 var obj = new Obje...
moment.js 常用时间格式
qq_40893035的博客
06-08 790
moment.js官网 [点击跳转] const date = moment() // 获取一个moment对象的事件日期格式 const date = moment().locale('zh-cn') // 默认和这个中国当前时间是一样 获取当前时间 const nowDate = moment().format('YYYY-MM-DD hh:mm:ss'); // 2021-06-08 01:35:27 获取三天前的时间，并将时间设置成 00:00:00 一般作为查询时间的初始时间 const th
ES6新特性，let、const、数组、对象、函数参数解构赋值 的 总结
qq_40893035的博客
08-27 544
ES6新特性总结 首先我们要知道什么是ES6 ES6： ECMAScript 6.0是 JavaScript 语言的语言标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 截止目前2020年为止，ECMAScript已经发行到了第11版也就是ES11 但是现在前端程序员都在说ES6，是因为在ECMAScript 6.0这个版本的更新内容最大，具有里程碑的意义，且使用的最为广泛 版本 更新内容
经典轮播图的实现
qq_40893035的博客
05-11 452
最为经典的轮播图模板，可以在此之上进行各种样式修改 1 . 自动轮播 2 . 点击下方对应点进行图片切换 3 . 点击左右按钮，进行上一张，下一张切换 这是最为基础的模板，初学者可以拿来练手，老手可以在此之上进行样式修改，我在写这个轮播图的时候主要以实现功能为主，样式只做了简单的调整，不能称得上美观，但是五脏俱全 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt
JS笔试题总结，字符串翻转、数组去重、JS二分查找、闭包、变量提升、字符串转化为驼峰式
qq_40893035的博客
05-05 401
1 . 字符串翻转 var str = "abcdefghijk"; console.log(str.split('').reverse().join('')) //输出：kjihgfedcba split()将字符串变成数组，reverse()将数组翻转，join将数组变成字符串 2 . 数组去重 var str = "abcdabcaba"; //给定字符串 var s...
ES6 模板字符串、箭头函数、扩展运算符
qq_40893035的博客
08-27 321
（一）、模板字符串 ES5中声明字符串可以用 [“string”] [’ string’]，单、双引号进行声明 ES6中引入反引号 我们可以在反引号中直接使用换行符 `There are items in your basket, are on sale!` 模板字符串还可以嵌入变量，格式是 ${ } 大括号中放入变量 var num = 3 var str = `这里有${num}个苹果` ${ } 大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属
前端面试题各种容易问，容易混淆，的题目分享
qq_40893035的博客
05-12 319
今天下午参加了一场面试…可以说犹如二战现场一样，惨不忍睹，所以痛定思痛，总结不足，继续向前 以下简单，一般，困难都是根据我自身水平的评级，也许我工作三年后可能都觉得是简单，但是作为一个实习生还是要虚心点，脚踏实地为好 1 . 函数声明 和 函数表达式 的区别（简单） 首先我们要知道函数定义的三种方法： 1 . 函数声明 function funName(){} 2 . 函数表达式 var funName = function (){} 3 . new Function() 构造函数 什么是函数声明，使用
Array.slice和spilce的区别，看了忘，忘了又看，烦！
qq_40893035的博客
06-10 221
slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。 splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。 ...
JS知识点梳理
qq_40893035的博客
07-19 142
JS数据类型 【基本数据类型】、【引用数据类型】 区别： 【基本数据类型】：直接存储在栈（stack）中，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储。 【引用数据类型】：同时存储在栈（stack）和堆（heap）中，占据空间大、大小不固定。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。 包括： 【基本数据类型】：String、Number、Boolean、Null、Undefined【Symbol（es
vue2使用hammer.js实现移动端div拖拽放大缩小旋转
09-08
在Vue2中使用Hammer.js实现移动端div的拖拽、放大缩小和旋转可以按照以下步骤进行。 首先，在Vue项目中安装Hammer.js。 ``` npm install hammerjs ``` 然后，在需要使用拖拽、放大缩小和旋转功能的组件中引入Hammer.js，并初始化一个Hammer实例，将其绑定到要拖拽、放大缩小和旋转的div元素上。 ``` import Hammer from 'hammerjs' export default { mounted() { const element = this.$refs.element // 获取div元素的引用 const mc = new Hammer.Manager(element) // 初始化Hammer实例并将其绑定到div元素上 // 添加拖拽、放大缩小和旋转的手势识别 mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 })) mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith(mc.get('pan')) mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan')) // 初始化div元素的拖拽、放大缩小和旋转的初始状态值 let posX = 0 let posY = 0 let scale = 1 let lastScale = 1 let rotation = 0 // 监听拖拽事件 mc.on('pan', (e) => { // 实现拖拽 posX = e.deltaX posY = e.deltaY element.style.transform = `translate(${posX}px, ${posY}px) scale(${scale}) rotate(${rotation}deg)` }) // 监听放大缩小事件 mc.on('pinch', (e) => { // 实现放大缩小 scale = lastScale * e.scale element.style.transform = `translate(${posX}px, ${posY}px) scale(${scale}) rotate(${rotation}deg)` }) // 监听旋转事件 mc.on('rotate', (e) => { // 实现旋转 rotation = e.rotation element.style.transform = `translate(${posX}px, ${posY}px) scale(${scale}) rotate(${rotation}deg)` }) } } ``` 最后，在该组件的模板中添加一个div元素，并给其添加初始样式。 ``` <template> <div ref="element" style="width: 200px; height: 200px; background-color: red;"></div> </template> ``` 这样，当你在移动端上访问这个页面时，就可以拖拽、放大缩小和旋转这个div元素了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值