头图

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 文字选择 效果的优化,使得手机端、平板端、电脑端都可以完成精确的文本选择,进而实现高亮、下划线等批注需求。

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


ElasticPDF
2 声望1 粉丝

ElasticPDF 是一款新国产 PDF 编辑器开发框架,基于开源 pdf.js 的渲染框架,增加了批注功能,批注产品力接近Adobe Acrobat,支持全离线运行,适用于公网及内网系统。