前端实现PDF添加批注(1)

313 阅读1分钟

前段时间接到一个需求,用户希望网页上预览PDF,同时能在PDF上添加文字,划线,箭头和用矩形框选的标注,另外还需要对已有的标注进行修改,删除。

在互联网上一通搜索,发现两个问题。

一、有些同行给的方案不符合预期。大多数是在PDF的上面加一层透明层,然后再在这个透明层上面添加文字。这样做批注不能随PDF滚动或放大缩小而跟随,回显也是一个麻烦事,可以说没办法回显。

二、有些功能很全面的给PDF添加批注的插件,完全符合需求,但是需要支付几百上千的费用。

因此只能硬着头皮开发了。

主要用 pdfjs + pdfjs-dist + jspdf + fabric实现,最终完美完成用户需求

展示效果: 1、自由划线,可再次编辑和删除,跟随pdf滚动和放大缩小

image.png 2、添加文字标注、可再次编辑和删除,跟随pdf滚动和放大缩小

image.png

3、添加矩形和箭头、可再次编辑和删除,跟随pdf滚动和放大缩小

image.png

4、以及将添加批注的PDF导出,带批注的PDF。

另外还能有很多其他的批注都能实现,比如添加图片,修改颜色,修改画笔粗细等等。

提供源码

image.png