Export annotation

[aathi271991]

Hello,

I need clarification on how to export annotations after drawing and obtaining coordinates within this viewer. I have attached images for reference.

Thank you!

[stephanrauh]

Are you looking for pdfViewerService.getSerializedAnnotations()?

[aathi271991]

If I draw a box in an "Adobe Acrobat PDF file", I want to get the text 'Adobe Acrobat PDF file' that I draw over.

[aathi271991]

I need to extract the text inside a rectangular zone that I draw within a PDF.

[stephanrauh]

That's not easy:

• Many PDF documents aren't really texts. They are just scanned images. In that case, you need an OCR tool.
• If the PDF document contains text, activate the text layer. After drawing the box, the DOM consists of three layers. The bottom-most layer is the canvas. That's the text you see. Above that, there's a text layer. It's invisible unless you select text with the mouse. The box is another layer, the annotation editor layer. The box is inside a rectangular area that's slightly larger than the drawing. Get the coordinates of the box and find all the <span> tags at the same position. Concatenate the innerText of these <span> tags, and you've got your text.

Note that this approach does not copy images. I suppose it'll also fail with forms. The text layer only contains the text. Adding insult to injury, the text position is slightly off, but usually it's close enough so you won't notice.

[Faryal13]

@stephanrauh Why are we returning the id null in getSerializedAnnotations(), I have scenario where i am storing all the annotation in backend and when load again then loading all the already created annotation but when user done with adding more and call getSerializedAnnotations() it is returning me all the annotation which is right but how will I identify that user have created newly which dnt exists in my database ,id would be helpful to identify it

[stephanrauh]

I've inherited this functionality from @calixteman, who kindly implemented it in pdf.js. I know hardly anything about how getSerializedAnnotations() works internally. I only expose this API because it might be useful to you, but you're using it at your own risk, and the showcase explicitly states the the API may break without notice.

[padshahrohan]

Hello @stephanrauh , I am enabling the annotations via this.pdfService.switchAnnotationEdtorMode(AnnotationEditorType.INK); , now at a later stage on submission i do this.pdfService.getSerializedAnnotations() to get all annotations drawn on screen, but it returns me null, any idea on why would that happen

I am able to draw annotation on PDF, still it returns null

[stephanrauh]

No idea. How to you draw the annotation? Programmatically or manually? Maybe the annotation hasn't been committed yet. As long as you're still drawing the annotation, it's not pushed to the array. You can force that by leaving the annotation mode (this.pdfService.switchAnnotationEdtorMode(0);) or clicking the ink editor button in the main toolbar.

[MilRabenda]

I have the same problem with annotations. I use version 26.0.8 updated from 21.3.5.

1. I draw manually
2. I click 'outside' of the document (outside of the page, still inside the browser and pdf viewer but on the background)

 let annotations = this.pdfViewerService.getSerializedAnnotations();
    console.log(annotations) 

console.logs null
When drawing manually and not clicking on the background after drawing, the annotations console logs perfectly. I don't get why it is that way.

[stephanrauh]

Please update to version 26.0.9 or 27.0.0-rc.6. Both versions commit the changes when you call getSerializedAnnotations().

I suspect the issue was that getSerializedAnnotations() only returns annotations that have been committed to the annotation storage - and clicking outside of the page suppresses the commit that usually happens automatically, but the user expects the commit to have happened.

My change is a minimal-invasive change. Clicking outside the page still doesn't commit. Maybe that causes confusion, but I'm reluctant to change anything because the annotation editors are still being developed. My modifications tend to be fragile, they break when the next version of pdf.js is released.

[MilRabenda]

I have encountered a specific issue regarding the initialization of the Ink/Drawing tool (annotationEditorMode = 15) that seems to occur with pdf.js versions higher than 4.5. My requirement is for the PDF to be available for signing/drawing immediately upon entering the component. To achieve this, I trigger this.pdfViewerService.switchAnnotationEdtorMode(this.enableDrawing ? 15 : 0); inside the (pagesLoaded) event. With "ngx-extended-pdf-viewer": "21.3.5", this approach worked perfectly. However, when using any newer version where pdf.js > 4.5, the initial state is broken.
Steps to reproduce:

1. Enter the PDF component (the UI shows the drawing tool cursor is active).
2. Attempt to draw something -> Nothing happens (the canvas seems unresponsive).
3. Leave the PDF viewer (navigate back to the previous component).
4. Re-enter the same PDF component.
5. Attempt to draw again -> The drawing tool now works perfectly.

Additional context & Workarounds tried:
Manual Toggle: On the broken initial load, if I manually toggle my custom drawing button (which simply triggers switchAnnotationEdtorMode(0) and then switchAnnotationEdtorMode(15) again), the drawing tool instantly starts working.
Event hooks & Timeouts: I tried moving the initialization to different events (pagesRendered, annotationLayerRendered, textLayerRendered) and wrapping it in various setTimeout delays. None of these solved the "cold start" issue.
Current Fallback: The only reliable solution right now is to force the installation of the older version (21.3.5).

It seems like there is an initialization/canvas sizing issue during a "cold start" in the newer pdf.js versions that gets resolved upon a component remount or a manual mode toggle.

[stephanrauh]

Try using (annotationEditorLayerRendered) instead of pagesLoaded :

  <ngx-extended-pdf-viewer                                                                                                                                   
    [src]="pdfSrc"                                                                                                                                           
    (annotationEditorLayerRendered)="onEditorLayerReady($event)">                                                                                            
  </ngx-extended-pdf-viewer> 

  private editorActivated = false;                                                                                                                         
                                                                                                                                                             
  onEditorLayerReady(_event: AnnotationEditorLayerRenderedEvent): void {                                                                                     
    if (this.editorActivated || !this.enableDrawing) {
      return;                                                                                                                                                
    }                                                                                                                                                      
    this.editorActivated = true;                                                                                                                             
    // Editor layer for at least one page now exists in UIManager.#allLayers,                                                                              
    // so updateMode(15) actually propagates to layer.updateMode(INK).                                                                                       
    this.pdfViewerService.switchAnnotationEdtorMode(15);                                                                                                     
  }

If that doesn't work, delay setting the annotation editor mode slightly:

queueMicrotask(() => this.pdfViewerService.switchAnnotationEdtorMode(15)) 

Reset editorActivated = false whenever you load a new document (e.g. in your (pdfLoaded) handler), so the first editor-layer render of the next document re-triggers the activation.