Do annotations from setCustomDrawHandler make it to the downloadable file?

Technical Support
1

PDF.js Express Version

Detailed description of issue

Hi Logan,

Another question related to custom annotations. I am currently using setCustomDrawHandler to display a a number within a circle at the bottom-right corner of the annotation. The method above is achieved through redrawing the canvas but that does not actually modify the xfdf file, correct? I am using annotManager.exportAnnotations() to grab the latest xfdf file, but I do not see a correlation or a pattern with the numbers. My concern is that when we “merge” the pdf file and xfdf file, I will not see the numbered annotations on the downloadable pdf.

Will the numbered annotations be present in that file? If not, is there a way to grab the xfdf file with those custom annotations? Is there a way to directly modify the xfdf file to include numbers?

If so, do you see a way to include these numbered annotations only when exporting the pdf?

Thanks,
Ryan

Expected behaviour
{Provide a screenshot or description of the expected behaviour}

Does your issue happen with every document, or just one?
{Answer here}

Link to document
{Provide a link to the document in question if possible}

Code snippet
{Provide a relevant code snippet}

2

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

3

Hey there!

By default, annotations are only serialized with information that is in the PDF Spec, however we do have a mechanism to serialize custom data.

You can use the setCustomData API to set custom, serializable data on the annotation which can then be exported and reloaded.

You can call this function anywhere, including inside your draw handler:

  Annotations.setCustomDrawHandler(
    Annotations.EllipseAnnotation,
    function (
      ctx, //canvas context
      pageMatrix,
      rotation,
      options
    ) {
      const annot = options.annotation;
      annot.setCustomData('index', 1); // Set the index/number here
      // ...rest
    }
  );

Now when you export XFDF, that custom data will be saved in it.

Next time you import that XFDF, you can access your custom data with getCustomData.

Thanks!
Logan

4

Hi Logan,

Just to clarify, when I setCustomData I will see the number inside a circle at the bottom right hand corner of the sticky annotation? See below screenshot.

If this is the case, do you see a way to include these numbered annotations only when exporting the pdf and not when the user is viewing the document through the viewer?

Screen Shot 2021-08-03 at 2.24.58 PM
Screen Shot 2021-08-03 at 2.24.58 PM1709×1213 249 KB

5

Hi there,

Custom data only works inside the PDF.js Express viewer. Since what you are doing is outside of the PDF spec, other PDF viewers will not be able to render it (since they do not know your rendering logic).

Unfortunately this is just the way PDFs work and there is not a great way to accomodate your use case in PDF.js Express.

That being said, our sister product PDFTron WebViewer can accomodate this use case as it is able to flatten custom annotations into a document. If you really need to support this use case, upgrading to WebViewer is the only option. Another plus side of WebViewer is that it can do all these operations client side - no rest API needed. WebViewer has the exact same API as PDF.js Express, so if you wanted to try it out, your current code will work as-is. We have a guide on migrating here.

Thanks,
Logan

6

Hi Logan,

Appreciate the feedback. I was looking into the “Custom Annotations” section Custom Annotations in JavaScript PDF Viewer | PDF.js Express SDK. Will saving the annotation as a stamp help me in this case?

Thanks,
Ryan

7

Hey,

Ya that is one option, you could convert your annotations to stamps which essentially saves them as a bitmap. You lose a lot of flexibility this way when importing though which is why I did not suggest it.

We do have that CustomAnnotation class that is mentioned in that guide, but unfortunately you would have to reimplement all the existing annotations drawing logic if you take that approach.

Logan