PDF.js 文字選中 功能優(yōu)化，解決 PDF 文字選中漂移錯(cuò)誤的問題，支持前后拖動(dòng)修改選區(qū)。適用手機(jī)端、平板端、電腦端文字PDF選中文字高亮、下劃線。官方版的選中功能移動(dòng)端幾乎不可用，優(yōu)化后可以完成選區(qū)的精確選擇。

Demo及源碼

Demo和源碼地址：https://demos.libertynlp.com
功能演示視頻：https://www.bilibili.com/video/BV1tJ4m1M7zs
注：非免費(fèi)，面向公司用戶

優(yōu)化效果展示

1. 手機(jī)端效果

官方版 pdf.js 在手機(jī)端選中文字時(shí)，滑動(dòng)確定選區(qū)的時(shí)候，容易錯(cuò)誤地自動(dòng)選擇整個(gè)頁面的內(nèi)容，很難選到想要的內(nèi)容。

優(yōu)化后解決了實(shí)現(xiàn)了精確的文本選取，同時(shí)左下角增加了快捷翻頁與視圖移動(dòng)輔助按鈕，在大顯示比例的繪圖狀態(tài)時(shí)即可實(shí)現(xiàn)視圖的移動(dòng)，實(shí)現(xiàn)更為細(xì)致的批注處理。

手機(jī)端.gif

2. 電腦端效果

電腦端官方版 pdf.js 在鼠標(biāo)拖動(dòng)過程中會(huì)自動(dòng)全選當(dāng)頁剩余部分全部內(nèi)容，優(yōu)化后問題解決且支持拖動(dòng)選取前后標(biāo)識(shí)完成選區(qū)的位置調(diào)整，視圖輔助按鈕同樣可用。

電腦-官方.gif

電腦-優(yōu)化.gif

電腦-移動(dòng)輔助.gif

3. 平板端效果

平板端選中效果與手機(jī)端類似，都會(huì)由于觸屏位置的移動(dòng)造成選區(qū)漂移導(dǎo)致整頁全選，且難以找到選區(qū)標(biāo)識(shí)，優(yōu)化后問題解決，添加視圖輔助按鈕使得大比例尺下的文本選擇更加精確。

平板-官方.gif

平板-優(yōu)化.gif

總結(jié)

本次更新中我們實(shí)現(xiàn)了 pdf.js 文字選擇 效果的優(yōu)化，使得手機(jī)端、平板端、電腦端都可以完成精確的文本選擇，進(jìn)而實(shí)現(xiàn)高亮、下劃線等批注需求。

基于純 JavaScript 和 pdf.js，我們開發(fā)了一款Web端PDF插件庫，包含高亮、劃線、畫筆、多邊形，歷史記錄等各類批注功能以及批注導(dǎo)入導(dǎo)出的管理模塊，界面美觀功能強(qiáng)大，功能在不斷升級(jí)，且是現(xiàn)在為數(shù)不多的可以 兼容IE 11 的PDF批注插件，歡迎了解！
源碼和Demo地址為 https://demos.libertynlp.com