Is there an easy way to add sticky notes or comments?

[kamilpreweda]

Hi,

I am currently exploring this library and it's documentation but I did not find any information about sticky notes / comments addition. This pdf viewer loads existing notes from a PDF correctly so I assume there could be a possibility to add my own notes and export PDF in a way so they would be later visible (for example within Acrobat). I checked and when PDF is loaded within the browser, there is an option to add comment and when saved, this comment is later visible within Acrobat.

Does anyone managed to implement similar thing? For me it is crucial as it will define if I will be able to rely on this library or not.

Cheers,

Kamil

[stephanrauh]

Probably your best option is using pdf-lib. The PDF viewer is able to display sticky notes, but it's not able to add sticky notes dynamically. The editors currently only support the PDF.js annotation subtypes /FreeText, /Ink, /Stamp, /Highlight and /Signature. /FreeText is closely related to /Text, but I doubt the editor rendering engine is able to support /Text.

On the other hand - it shouldn't be so difficult. You can use a signal to get the PdfViewerApplication object, and that, in turn, allows you to modify the annotationStorage. Read the annotationStorage of a PDF file featuring sticky notes to learn what the correct format is. Use this knowledge to add your own sticky notes and force re-rendering. I think that's possible - especially since the format of sticky notes in PDF files is fairly straight-forward:

  /Type /Annot
  /Subtype /Text
  /Rect [100 200 116 216]        % Small rectangle for icon only
  /Contents (This is a sticky note comment)
  /Name /Comment                 % Icon type (Comment, Key, Note, etc.)
  /Open false                    % Popup initially closed
  /C [1 1 0]                     % Icon color (yellow)

No idea how this translates in pdf.js datastructures - but chances are they're similar, just more verbose.

Here's how to get the PdfViewerApplication object:

  private PDFViewerApplication: IPDFViewerApplication | undefined;

  constructor(
    notificationService: PDFNotificationService,
    private cdr: ChangeDetectorRef,
  ) {
    effect(() => {
      this.PDFViewerApplication = notificationService.onPDFJSInitSignal();
      if (this.PDFViewerApplication) {
        this.onPdfJsInit();
      }
    });
  }

[stephanrauh]

This weekend, I tried to make it work without using an external library. In theory, it must be possible - but how to do it beats me.

Instead, I've added a demo to the showcase showing how to add annotations using pdf-lib. It's not perfect - it shows differently in print, and when I download the file and open it in Chrome, the annotation uses more vertical space than in ngx-extended-pdf-viewer - but I suppose it shows the way to a good solution: https://pdfviewer.net/extended-pdf-viewer/adding-arbitrary-annotations

I'd like to hear from you. Does this approach work for you?

[kamilpreweda]

Hi,

Sorry for the delayed response - I was sick in the meantime. First of all, thank you for your reply and for actually spending time working on this issue.

While I was away, my colleague was working on this problem and tried a similar approach using the PdfSharp library on the backend (to have more control over the process). He managed to achieve the same result as in your example, but we encountered the same limitation - the page needed to be refreshed after adding each note. We couldn't find a way to make sticky notes appear instantly like highlights do.

I had a catch-up call today and it seems that we've decided to abandon the sticky notes feature entirely. My colleague experienced significant performance issues when testing with large documents (400+ pages), particularly with loading times. We were adding notes automatically across multiple pages, which caused problems with scrolling and page reloading.

My colleague is now exploring a custom solution for adding notes to highlights, though as I understand it, this won't function as "standard" sticky notes that would be recognized by other PDF viewers like Acrobat but I am not sure about that since I didn't see the code yet.

In summary, while your solution certainly works, it won't fit our particular use case due to the performance constraints we're facing with large documents.

Thanks again for your help and effort.

Cheers,

Kamil

[stephanrauh]

Don't worry about replying late. It's good to know you've overcome your disease. I've you're ill, that's just the way it is - and it's always a good idea to give your immune system enough time to recover fully!

I didn't expect the performance penalty. Probably you're right, implementing a non-standard but efficient alternative is the way to go. If you need the sticky notes in other PDF viewers, you can still use PdfSharp.