一个使用js做的一个PDF预览&PDF标注（在线批注）工具

已于 2023-12-17 19:31:01 修改
阅读量1.6k 收藏 6
点赞数 3
文章标签： pdf javascript react.js vue.js
于 2023-01-19 22:58:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41637458/article/details/128738787
版权

一个使用js做的一个PDF预览&PDF标注工具
核心主要使用pdf.js以及操作canvas

目前支持web端，windows端，mac端，可npm包引入项目

目前支持的功能有大文件预览、缩略图显示、大纲显示、划词高亮、实时图形批注（箭头、直线、圆、矩形）、添加文字、自由画笔、撤销动作、添加图片、修改PDF源文件。

后续会支持更多的功能，有PDF标注相关的问题或者定制化的需求也可以给我留言联系我

演示地址：https://www.ziqipdf.cn:8008/

JS PDF标注工具

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

一只老婆奴的java自学虫
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
PDFJS集成批注功能
weixin_45625066的博客
09-19 3664
pdf.js集成了批注和列表展示功能
PDF.js在线批注实现(附源码).zip
06-10
PDF.js在线批注实现(附源码) JS+HTML5实现
Vue如何实现PDF批注（使用pdf-lib库，附代码）
weixin_53064501的博客
02-04 1110
使用vue实现pdf渲染与批注
web端实现对pdf文件进行批注
FreshMan
02-23 471
基于pdf.js实现了 pdf 增加并编辑批注的 js 插件库，同时支持写入批注到数据库中并保存，且能够反向定位到批注位置。
PDF.js批注注释插件库(纯JS). 创建和保存PDF批注(PDF 高亮/签名/插图/截屏/文本框/画笔/多边形)-pdf.js
WCX_joker的博客
02-17 2009
基于 PDF.js 开发了 PDF 批注注释插件库，支持多种批注类型，支持写入批注到pdf中并保存，为目前纯前端 JavaScript 最佳实现方案，完美支持老版浏览器、手机、平板等移动端设备，仅使用 PDF.js dist 版本，可以方便集成到任意项目中。
react-pdf-highlighter:用于PDF批注的React组件集
04-28
:hot_beverage: react-pdf-highlighter react-pdf-highlighter是一个库，可为Web上的PDF文档提供批注体验。 它建立在Mozilla的PDF.js之上。 支持文本和矩形突出显示。 高光数据格式独立于视口，使其适合保存在服务器上。 示例（创建React App） 有关在线示例，请查看 。 要在本地运行示例应用程序： npm install npm start 在撰写文档时，请随时检查带有Flow类型签名的注释源。 安装 npm install react-pdf-highlighter 有关React组件API的示例，请参见 现有技术 和仅提供PDF.js的React包装器，没有内置的注释功能。 不提供文本突出显示框。 PDF.js仅提供查看器： 也可以看看： https://github.com/wojtekmaj/react-pd
PDFJS实现pdf文档在线批注,手绘等功能(附源码).zip
06-20
基于PDFJS等实现pdf在线添加注释，具体实现功能： - 支持多个页面的pdf文件 - 自由绘制工具 - 添加文本 - 添加箭头 - 添加矩形 - 在线签字 - 改变颜色 - 改变画笔大小 - 改变字体大小 - 每个对象都可以调整 - 序列化所有canvas数据转换成JSON和重绘 - 删除单个对象 - 清除页面 - 历史前进、后退 …….
实现pdf.js添加批注（注解）功能/书签保存/高亮文本/测量功能/自由手绘/箭头/下划线
热门推荐
xxx6450的博客
10-03 2万+
实现pdf.js添加批注功能 PDF.js实际运行起来的页面UI效果：http://mozilla.github.io/pdf.js/web/viewer.html 但并没有添加批注文件的功能，以及批注文件的保存功能，下边是实现的在pdf.js中添加批注功能的截图，里边有各种添加批注的功能，可以像在adobe reader操作批注功能一样 详细咨询请浏览邮箱地址。 ...
web端实现pdf批注注释编辑（写入保存/高亮/下划线/插入图片/矩形/箭头/圆形/文本/画笔）（pdf.js批注注释编辑插件库）
WCX_joker的博客
12-06 551
仅使用增加 pdf 注释最佳解决方案，可以在纯web端实现pdf的批注和导出，源码和Demo地址为欢迎持续关注，将会持续更新pdf.js联系我。
实现pdf.js批注功能（高亮文本/下划线/导入导出）
WCX_joker的博客
07-23 2340
我开发了pdf.js增加注释的最佳实现方案，仅使用了PDF.js dist版本，可以十分方便的集成到任意web项目中。附带Demo和源码获取方式
web端实现过pdf在线批注(附源码).zip
06-10
web端实现过pdf在线批注(附源码) pdf.js 类似效果： 链接: https://pan.baidu.com/s/1femIJldG6RMR6u_isp73TQ?pwd=4ynv 提取码: 4ynv
自动驾驶中使用到的数据标注工具.pdf
04-12
自动驾驶中使用到的数据标注工具.pdf
使用pdf.js展示pdf文件(亲测可用)
weixin_45816407的博客
05-11 6232
2、从后端获取blob形式的pdf文件，具体怎么获取和后端商定（思路，后端提供一个接口，参数为文件链接，前端带参文件链接请求接口后，接口返回此文件链接的blob形式的文件流。老版本和新版本同时引入，当请求页面是判断当前客户端类型，若是ios则使用老版本的pdf.js文件。此链接可下载最新版本，不兼容老版本浏览器和苹果系统，若需在苹果展示则使用最上面。找到/web/viewer.js，搜索 fileOrigin，并注释以下代码段。3、获取到blob形式的pdf文件后，添加到iframe中，完成。
VUE项目PDF文件在线浏览使用vue-pdf
m0_62169790的博客
04-07 871
PDF文件在线浏览
VUE2实现pdf批注
感谢您阅读我的博客，如果您有任何问题或建议，请随时联系我。
03-21 1600
实现pdf标注
pdf文件批注功能
xxx6450的博客
05-25 2454
实现pdf文件批注功能（web端加载文件） PDF.js实际运行起来的页面UI效果：https://mozilla.github.io/pdf.js/web/viewer.html 但并没有添加批注文件的功能，以及批注文件的保存功能，下边是实现的在pdf.js中添加批注功能的截图，里边有各种添加批注的功能，可以像在adobe reader操作批注功能一样。 我在PDF.JS中创建注释的实现，它具有更多的特性，比如箭头、自由手绘、自由文本、文本选择高亮/下划线/穿透、测量、圆圈和戳记，使用普通Javascri
【2023-08-20】最新PDF.js PDF批注注释插件库：创建、保存和管理PDF注释批注（高亮、文本框、绘图、截屏、历史记录、橡皮檫）-pdf.js
WCX_joker的博客
08-20 654
探索基于pdf.js-dist开发的纯Javascript PDF批注插件库，支持保存、导出、导入和管理PDF文件中的批注。多个功能模块为您提供丰富的PDF注释体验。
java将图片转为pdf
最新发布
wangwenzhe的博客
05-07 635
直接上代码。
我需要一个能分析以pdf格式保存的文献的工具
06-09
好的，您可以使用一些专门用于分析PDF文献的工具，如下所示： 1. Adobe Acrobat DC：Adobe公司出品的PDF文档处理软件，不仅可以打开、阅读、编辑PDF文档，还可以进行文本搜索、批注、标记、高亮、添加书签等操作，方便进行文献分析。 2. Foxit PhantomPDF：与Adobe Acrobat DC类似，也是一款功能强大的PDF文档处理软件，可以进行文本搜索、批注、标记、高亮、添加书签等操作，也支持文献管理功能。 3. Mendeley：一款免费的文献管理软件，可以管理各种类型的文献，包括PDF文档。它支持文献标注、批注、添加笔记等功能，也可以自动提取文献中的元数据。 4. Zotero：也是一款免费的文献管理软件，可以方便地管理各种类型的文献，包括PDF文档。它支持文献标注、批注、添加笔记等功能，也可以自动提取文献中的元数据。 希望以上信息能够对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值