How to bind multiple xfdfString values as annotation in PDF

Hello rakshitha_r,

Thank you for your response.
I tried importing the first couple xfdfString you provided and they had no issues in importing.

What I notice is that your ‘annotationChanged’ event listener, you create a new event ‘setAnnotationEvent’ that imports the annotation with the xfdfString. I think it would be best if you had a checkbox that is binded with an event that imports the annotations instead of doing so inside the ‘annotationChanged’ event.

Also, we don’t have xfdfData property for an individual annotation, you can see the properties here: PDFJS Express WebViewer Class: Annotation

If you need further troubleshooting assistance, could you provide a minimal code sample in a package where I can see exact behaviour of what you are trying to achieve? (You can replicate your code on the sample package provided here: https://pdfjs.express/download)

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

hi Kevin,
please try with more data, or take data from all 3 pages and try, you will be able to reproduce issue.
today i tried by doing this,

documentViewer.addEventListener('documentLoaded', async () => {
        // logic based on checkbox checked single
        this.setAnnotationEvent.subscribe(() => {
          const annotationsList = annotationManager.getAnnotationsList();
          const xfdfString = this.renderingInstance;
          annotationManager.importAnnotations(xfdfString);
           instance.docViewer.on('documentLoaded', () => {
            instance.docViewer.getZoom();
            documentViewer.getTool('AnnotationCreateRectangle').setStyles({
              StrokeThickness: 3,
            });
          })
        });
});

so by above set of code, to some extent i am able to render data, i am not sure whether my code is correct, but as of now it is working.
but now i had came across an issue, here when i click on outside checkbox, to the above set of lines event triggers and i am able to see rectangular annotation on screen, but i need that rectangulat annotation to have thickness as 3, so i added this set of code:

      instance.docViewer.on('documentLoaded', () => {
            instance.docViewer.getZoom();
            documentViewer.getTool('AnnotationCreateRectangle').setStyles({
              StrokeThickness: 3,
            });
          })

i am able to get stroke thickness to 3, when i draw an annotation, but while rendering back, it gives the default thickness. any help on this?

Hello rakshitha_r,

I was able to import all 17 annotations and see them in the annotationsList:

That is the correct way to set the thickness of the tool that is creating the annotation, not the annotation itself.
To change the thickness of the annotation that is being imported, you can use the previous annotationChanged event:

  annotationManager.addEventListener('annotationChanged', (annotations, action, { imported }) => {
    // imported indicates if the annotations were imported via a process, mainly XFDF
    if (imported) {
      annotations.forEach(annot => {
        annot.StrokeThickness = 3;
        console.log('annotation thickness:', annot.StrokeThickness);        
      });
      return;
    }
    // do event handling
  });

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

Thanks Kevin, your time and support was really great help for me, thanks again

Hello rakshitha_r,

Your Welcome!

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here