一、需求

這兩天一直在研究這個(gè)，之前項(xiàng)目用的是vue-pdf，但是pdf打開(kāi)速度巨慢。我們的需求是從上到下滑動(dòng)展示，要求打開(kāi)時(shí)間不能過(guò)長(zhǎng)并且可以實(shí)現(xiàn)雙指縮放。

1.vue-pdf（快速集成）

（1）“全量串行”，要把整個(gè)pdf全部下載并解析完之后一頁(yè)一頁(yè)渲染出來(lái)，渲染出來(lái)之前的頁(yè)面就是一直白屏的。

（2）占用瀏覽器主線程，與Vue組件競(jìng)爭(zhēng)資源。

2.pdf.js（高性能、全功能）

（1）“流式并行”，一邊加載一邊渲染，而且是視口在哪就優(yōu)先加載哪頁(yè)、智能加載相鄰頁(yè)，遠(yuǎn)離視口的進(jìn)行銷(xiāo)毀或者低分辨率預(yù)覽。

（2）使用Web Worker在獨(dú)立線程解析PDF，主線程釋放。

二、PDF.js的使用

pdf.js不需要安裝依賴(lài)，直接去官網(wǎng)下載包，這個(gè)包就是個(gè)閱讀器軟件（網(wǎng)頁(yè)版），2.多版本更穩(wěn)定。

里面的web文件夾就包含了html、css、js，直接扔進(jìn)puclic里，一個(gè)是因?yàn)椴粫?huì)被壓縮，而且可以直接在根目錄下訪問(wèn)，不用走路由之類(lèi)的。

這個(gè)時(shí)候你就可以進(jìn)行嘗試在public下放一個(gè)測(cè)試的pdf，通過(guò)/web進(jìn)行訪問(wèn)了，以我本地代碼為例，訪問(wèn)的是http://localhost:1357/web/viewer.html?file=/test.pdf

file放的是你要訪問(wèn)的pdf鏈接，我們的項(xiàng)目進(jìn)入pdf.vue會(huì)向后端請(qǐng)求一個(gè)鏈接，在pdf.vue用iframe標(biāo)簽直接展示這個(gè)鏈接即可。pdf.js會(huì)自帶查找關(guān)鍵字、旋轉(zhuǎn)等功能，但是發(fā)現(xiàn)這個(gè)方法不能進(jìn)行雙指縮放。（電腦本地可以，小程序不行）

三、雙指縮放

然后我就開(kāi)始排查是pdf.js在手機(jī)上會(huì)被限制還是小程序的限制或者iframe不允許手勢(shì)操作。

1.最開(kāi)始排除的是小程序的限制

因?yàn)樵谖⑿艦g覽器打開(kāi)那個(gè)鏈接也不允許雙指縮放，然后開(kāi)始調(diào)整pdf.js的源碼，看有沒(méi)有對(duì)移動(dòng)端做手勢(shì)限制的代碼。

主要找的是viewer.js，修改點(diǎn)（1）webViewerTouchStart放開(kāi)事件源頭

這段阻止了多指觸摸

修改點(diǎn)（2）GrabToPan解除拖拽模塊的攔截

如果是觸摸事件且多點(diǎn)觸控，讓他直接return 不要進(jìn)行后面的event.preventDefault();將事件掌控權(quán)交給瀏覽器處理進(jìn)行縮放。

2.排查小程序oriframe的限制

這樣調(diào)整完之后發(fā)現(xiàn)在web/viewer.html的pdf鏈接微信瀏覽器已經(jīng)可以進(jìn)行雙指縮放了，不過(guò)小程序還是不行，本來(lái)以為是小程序又做了什么限制，后來(lái)無(wú)意中在手機(jī)訪問(wèn)/web/viewer.html和#/pdf?type=https、、、、

發(fā)現(xiàn)原來(lái)是/web在微信瀏覽器就可以，#/pdf的還是不行，于是將pdf.vue文件進(jìn)行修改，不再使用iframe進(jìn)行展示pdf鏈接，而是直接在拿到pdf鏈接之后進(jìn)行跳轉(zhuǎn)到/web/viewer.html文件，發(fā)到測(cè)試上看，果然可以了

不過(guò)需要注意的是現(xiàn)在我們打開(kāi)的是瀏覽器的縮放功能，也就是上面的菜單欄會(huì)一起跟著放大縮小，不過(guò)我們的需求是不要那些菜單欄只要實(shí)現(xiàn)雙指縮放就可以，我就在css文件將菜單欄隱藏掉了。

網(wǎng)上關(guān)于pdf.js在移動(dòng)端雙指縮放的案例比較少，大部分還要會(huì)員，陰差陽(yáng)粗的實(shí)現(xiàn)了我們的需求而且速度也比之前快很多了，如果有大佬知道怎么只讓pdf放縮菜單欄不動(dòng)的話(huà)歡迎指正！

總結(jié)

到此這篇關(guān)于Pdf.js使用與雙指縮放功能實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Pdf.js雙指縮放內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論