【PDF.js 文字选择功能优化】解决 PDF.js 文字文本选区选中时空白区域漂移错误整页全选的问题,支持前后拖动选区

PDF.js 文字选中 功能优化,解决 PDF 文字选中漂移错误的问题,支持前后拖动修改选区。适用手机端、平板端、电脑端文字PDF选中文字高亮、下划线。官方版的选中功能移动端几乎不可用,优化后可以完成选区的精确选择。

Demo及源码

Demo和源码地址:https://demos.libertynlp.com
功能演示视频:https://www.bilibili.com/video/BV1tJ4m1M7zs
注:非免费,面向公司用户

优化效果展示

1. 手机端效果

官方版 pdf.js 在手机端选中文字时,滑动确定选区的时候,容易错误地自动选择整个页面的内容,很难选到想要的内容。

优化后解决了实现了精确的文本选取,同时左下角增加了快捷翻页与视图移动辅助按钮,在大显示比例的绘图状态时即可实现视图的移动,实现更为细致的批注处理。


手机端.gif

2. 电脑端效果

电脑端官方版 pdf.js 在鼠标拖动过程中会自动全选当页剩余部分全部内容,优化后问题解决且支持拖动选取前后标识完成选区的位置调整,视图辅助按钮同样可用。


电脑-官方.gif

电脑-优化.gif

电脑-移动辅助.gif

3. 平板端效果

平板端选中效果与手机端类似,都会由于触屏位置的移动造成选区漂移导致整页全选,且难以找到选区标识,优化后问题解决,添加视图辅助按钮使得大比例尺下的文本选择更加精确。


平板-官方.gif

平板-优化.gif

总结

本次更新中我们实现了 pdf.js 文字选择 效果的优化,使得手机端、平板端、电脑端都可以完成精确的文本选择,进而实现高亮、下划线等批注需求。

基于纯 JavaScriptpdf.js,我们开发了一款Web端PDF插件库,包含高亮、划线、画笔、多边形,历史记录等各类批注功能以及批注导入导出的管理模块,界面美观功能强大,功能在不断升级,且是现在为数不多的可以 兼容IE 11 的PDF批注插件,欢迎了解!
源码和Demo地址为 https://demos.libertynlp.com

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容