前段时间接到一个需求,用户希望网页上预览PDF,同时能在PDF上添加文字,划线,箭头和用矩形框选的标注,另外还需要对已有的标注进行修改,删除。
期初在互联网上一通搜索,对这个需求来讲发现了两个问题。
第一:有些同行给的方案不符合预期。大多数是在PDF的上面加一层透明层,然后再在这个透明层上面添加文字。这样做批注不能随PDF滚动或放大缩小而跟随,回显也是一个麻烦事,可以说没办法回显。
第二:有些很强,功能很全面的给PDF添加批注的插件,完全符合需求,但是需要支付几百上千的费用。
因此只能硬着头皮开发了。
主要用 pdfjs + pdfjs-dist + jspdf + fabric实现,最终完美完成用户需求
效果展示:
1、添加自由线: 2、添加文字标注(可以对文字标注进行拖动位置,放大缩小)
3、添加矩形和箭头(添加后可调整位置,大小)
4、删除已经添加过的批注,以及将添加批注的PDF导出,带批注的PDF。
另外还能有很多其他的批注都能实现,比如添加图片,修改颜色,修改画笔粗细等等。
提供源码