javascriptpdffirefoxpdf.js

How to use annotation layer in PDF.js?

Some of the PDF.js code mentions an "annotation layer", for example AnnotationLayerBuilder here:

https://github.com/mozilla/pdf.js/blob/95e102c07bc257c2120fd7fd9141762b2c813a1c/web/annotation_layer_builder.js#L118

There is also pdfDocument.annotationStorage and pdfjsLib.AnnotationLayer, which - on all the documents I've tried - are empty, even in documents which do have text annotations.

I couldn't find any examples or documentation on the annotation layer and how it is supposed to be used, but it sure sounds interesting :)

  1. What is the annotation layer? Is this talking about standard PDF annotations, as described in https://pspdfkit.com/blog/2018/what-are-annotations/ or https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_reference_1-7.pdf section 8.4 Annotations? Or, is it something internal to PDF.js?

  2. How do I list the existing annotations from javascript code in PDF.js, and how do I add one? (just for display; not expecting to be able to save it in the pdf, of course) Can anyone provide a working code example?

Thanks!

Solution

  • Annotations are standard for the PDF file format as described in the links you provided. They are not a new concept to PDF.js.

    How you get the annotations will depend on your situation. I'm building a view layer to replace the viewer the PDF.js team built. The basic idea there is you:

    1. Get a reference to the PDFDocumentProxy object via const doc = getDocument(url)
    2. Get a reference to a PDFPageProxy object via const page = await doc.getPage(num)
    3. Get the annotations via await page.getAnnotations()

    If you're already using the viewer they built, it doesn't appear to be exposed anywhere.