How to bind multiple xfdfString values as annotation in PDF

Technical Support
22

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

23

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?

24

Hello rakshitha_r,

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

image
image1920×950 177 KB

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

25

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

26

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

27

hi Kevin,
i am using PDFJS Express Plus to my existing project. Which one you recommened to go with either npm way npm way or the angular way by downloading the js file folder with Angular approach.
incase if your suggestion is for npm way, then is there any links where in i can go through so i can push same for UAT and production, as my application is already in UAT so, please suggest

28

hi Kevin,
i have asked same question under New post, please give me feedback in any of those.