如何在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中的数据。
完整代码:
<div
v-for="page in docPages"
:key="page"
ref="container"
class="page-container"
:style="{
height: `${pageHeight}px`,
}"
>
这里想要吐槽一下pdfjs的文档真是太不完善了,这个还是我研究了好几天源码才发现的功能。希望pdfjs能够把文档完善一下,要不用起来太不方便了o(╥﹏╥)o
<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中的数据。
完整代码:
<div v-for="page in docPages" :key="page" ref="container" class="page-container" :style="{ height: `${pageHeight}px`, }" >