一、需求

這兩天一直在研究這個，之前項目用的是vue-pdf，但是pdf打開速度巨慢。我們的需求是從上到下滑動展示，要求打開時間不能過長并且可以實現雙指縮放。

1.vue-pdf（快速集成）

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

（2）占用瀏覽器主線程，與Vue組件競爭資源。

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

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

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

二、PDF.js的使用

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

里面的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會自帶查找關鍵字、旋轉等功能，但是發(fā)現這個方法不能進行雙指縮放。（電腦本地可以，小程序不行）

三、雙指縮放

然后我就開始排查是pdf.js在手機上會被限制還是小程序的限制或者iframe不允許手勢操作。

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

因為在微信瀏覽器打開那個鏈接也不允許雙指縮放，然后開始調整pdf.js的源碼，看有沒有對移動端做手勢限制的代碼。

主要找的是viewer.js，修改點（1）webViewerTouchStart放開事件源頭

這段阻止了多指觸摸

修改點（2）GrabToPan解除拖拽模塊的攔截

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

2.排查小程序oriframe的限制

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

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

不過需要注意的是現在我們打開的是瀏覽器的縮放功能，也就是上面的菜單欄會一起跟著放大縮小，不過我們的需求是不要那些菜單欄只要實現雙指縮放就可以，我就在css文件將菜單欄隱藏掉了。

網上關于pdf.js在移動端雙指縮放的案例比較少，大部分還要會員，陰差陽粗的實現了我們的需求而且速度也比之前快很多了，如果有大佬知道怎么只讓pdf放縮菜單欄不動的話歡迎指正！

總結

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

最新評論