如何在PDF.JS中启用Annotations (替换pdf文本域的内容)


参考链接:https://usefulangle.com/post/94/javascript-pdfjs-enable-annotation-layer

1、添加一个
元素来保存注释层

<div id="annotation-layer">div>

这个div将保存PDF页面的注释数据。PDF将在canvas中呈现。

<canvas id="pdf-canvas">canvas>
<div id="annotation-layer">div>

2、为注释层添加CSS

#annotation-layer {
  position: absolute;
  section {
    position: absolute;
    display: flex !important;
    align-items: center !important;
    div {
      white-space: pre;
      color: black;
      font-size: 12px !important;
      line-height: 1 !important;
    }
  }
}

3、获取PDF注释

在canvas中呈现PDF之后,您需要获得页面的注释数据,然后在注释层元素中呈现该数据。

方法getAnnotations()返回一个Promise,该Promise解析后返回页面的注释数据。render()将呈现注释层div中的数据。

完整代码:





这里想要吐槽一下pdfjs的文档真是太不完善了,这个还是我研究了好几天源码才发现的功能。希望pdfjs能够把文档完善一下,要不用起来太不方便了o(╥﹏╥)o