【2024-04-22 源码】最新PDF批注注释插件库,pdf.js插件库,纯前端离线JavaScript库(PDF高亮、下划线、橡皮擦、文本框、画笔、历史记录)

简介: 一款基于 pdf.js 开发的PDF批注插件库,支持纯离线内网部署,功能完善、强大且在不断升级,极易上手,欢迎关注!

一款基于 pdf.js 开发的PDF批注插件库,功能完善、强大且在不断升级,极易上手,欢迎关注!
(注:非免费,面向公司用户)

Demo及源码

Demo和源码地址:https://demos.libertynlp.com
功能演示视频:https://www.bilibili.com/video/BV1jz421r7ZG/

封面.png

版本亮点

1. 强大的兼容性: 纯前端 JavaScript 插件库,兼容几乎所有框架、浏览器和系统,包括很多国产的系统及浏览器,甚至支持IE;

2. 完美的安全性: 代码已通过多家企业安全扫描,没有任何在线依赖,开箱即用,软件包结构与官方版保持一致,简单极易上手,支持完全离线的内网私有化部署;

3. 多方面的优化:
① 针对官方版有多项优化,如大文件分段快速加载
② 中文渲染优化,解决了部分中文文本不显示的问题,特别是某些医疗领域的文档
③ 针对工程图、地图优化渲染,解决了大比例尺下PDF内容模糊的问题,便于工程图、地图的测量等工作;

PDF库亮点.jpg

三大功能模块

批注文件管理模块.png

① 保存批注: 在PDF文件内保存批注并下载。
② PDF提取器: 从原始PDF中提取某些页面,生成新的PDF。
③ 导出批注: 以JSON格式导出批注,可存储在数据库中以及重载。
④ 导入批注: 导入JSON格式批注。
⑤ 导出批注: 地将批注和评论导出为txt文件。
⑥ 切换语言: 在中英文界面之间切换。
⑦ 设置: 批注样式设置,包括高亮颜色、下划线颜色和宽度、笔刷宽度和颜色、文本样式等。

批注功能模块.png

① 编辑批注: 调整批注的颜色、旋转、大小、位置和不透明度。
② 批注列表: 通过复制/删除、绘制连接线和添加评论来管理批注。
③ 文本高亮: 高亮选定的文本(跨页支持)。
④ 文本下划线: 给选定的文本添加下划线(跨页支持)。
⑤ 插入图片: 将图片,如电子签名,整合到您的PDF中。
⑥ 文档截图: 捕捉并保存PDF页面为PNG图像。
⑦ 手绘绘图: 自由手绘批注。
⑧ 文本框: 添加文本框。
⑨ 多边形: 添加各种形状,例如箭头、矩形、圆形、直线、对勾和身份证印章。
⑩ 超链接: 添加超链接到 URL,页面或在线文档。

批注管理模块.png

① 橡皮擦: 擦除批注的特定部分,包括文本框。
② 撤消: 可自定义步骤的撤消或重做批注。
③ 重做: 可自定义步骤的重做批注。
④ 清除批注: 清除单个批注、多个批注、整页批注或整个文档的批注。
⑤ 帮助: 显示帮助文档。

总结

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

目录
相关文章
|
5天前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
36 16
|
25天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
28天前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
27天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
40 5
|
25天前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
63 1
|
29天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
35 4
|
1月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
1月前
|
前端开发 数据可视化 数据挖掘
前端开发者的福音:这些插件让你轻松应对各种复杂需求!
前端开发领域充满创意与挑战,面对复杂需求,开发者常感力不从心。本文通过三个真实案例,介绍如何利用Chart.js、ESLint和Ant Design等强大插件,解决数据可视化、代码质量和UI组件复用等问题,提高开发效率,创造更出色的前端作品。
22 3
|
28天前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API
|
28天前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
25 1
JavaScript中的原型 保姆级文章一文搞懂