How to bind multiple xfdfString values as annotation in PDF

Technical Support
1

Which product are you using?

PDF.js Express Viewer
PDF.js Express Version

8
Detailed description of issue
i have got around 8 annotations drawn across 3 pages of pdf and stored in a variable, when i choose selectAll, there is missing annotations in 1st page sometimes, 2nd page sometimes, i am not sure for what reason this issue is arising, when i select individual checkbox, i get annotation draw perfectly, but when i checkfor all annotations at a time, it is getting missed from getting drawn, but i am able to get 8 times detection, i mean all 8 items are going in list.

Expected behaviour
when i click on selectAll checkbox, which is outside PDF Viewer, i should be able to bind all xfdfString values as annotation

Does your issue happen with every document, or just one?
when there is multiple pages and annotation xfdfString is from multiple pages, this issue occurs, if i have selected 10 annotation from 1 page means it renders perfectly, issue is only with multiple pages.

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

Code snippet
selectAllAnnotations() {
for (let i = 0; i < storedAnnotationList.length; i++) {
setTimeout(() => {
this.setAnnotation(this.storedAnnotationList[i]);
});
}
}

setAnnotation(event: any) {
this.renderingInstance = event.annotationString;
this.setAnnotationEvent.emit();
}

this.setAnnotationEvent.subscribe(() => {
    const annotationsList = annotationManager.getAnnotationsList();
    const xfdfString = this.renderingInstance;
    annotationManager.importAnnotations(xfdfString);
    this.renderingInstance = '';
  });

when i choose on selectAll, selectAllAnnotations() method hits and here, i am calling setAnnotation() method, so object by object, the annotations are going and getting added to pdf with this.setAnnotationEvent. last set of code.
am i wrong here?

3

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:

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

4

Hello rakshitha_r,

Continuing the conversation from How to render xfdf back into pdf - #21 by rakshitha_r

Some questions regarding your issue:

  1. Before you click your checkbox, do you have any annotations on the page?
  2. When you click your checkbox, are you calling importAnnotations()?
  3. When you are adding the annotations with importAnnotations(), are any of them duplicates to ones that are on the page before the import?

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

5

hi Kevin,

  1. sometimes there are chances of having annotation already on PDF, depends upon user, for now we shall consider there is no annotations before on pages.
  2. yes, when checkbox is clicked, i had stored annotations, with help of that i will be calling import annotations.
  3. there will be no duplicate imports.
    my flow goes same way as added in my code, it works perfectly fine, when i am adding annotation individually, i mean importing, when it comes as a bunch annotations are not added to many pages.
6

Hello rakshitha_r,

Inside this loop:

for (let i = 0; i < storedAnnotationList.length; i++) {
  setTimeout(() => {
  this.setAnnotation(this.storedAnnotationList[i]);
});

It looks like storedAnnotationsList can be an array of Annotations rather than the xfdfStrings.

Could you try importing all the annotations first i.e.:

    const importedAnnotations = []
    for (let i = 0; i < storedAnnotationList.length; i++) {
      const annotation = await annotationManager.importAnnotations(storedAnnotationList[i])
      importedAnnotations.push(annotation)
    };

And then work with the annotations itself rather than the xfdfStrings, so you are not importing them every time they are selected, but rather selecting the annotations from the list.

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

7

hi Kevin,
i tried by giving annotation instead of xfdfString, but in both cases i am getting this error:
aa.getElementsByTagName is not a function. with above set of code.
i am saving annotationString as

      annotationManager.addEventListener('annotationChanged', (annotations: any, action: any) => {
        if (action === 'add') {
                let dataObject = {
                annotationString:xfdfString,
                annotationManager.deleteAnnotations(annotations);
            });
        }
        documentViewer.displayPageLocation(annotations[0].PageNumber, annotations[0].X, annotations[0].Y);
      });

is there any way, where in we can have only rectangular annotation with red color, and we should not be able to choose any tool for annotation. i tried below code, but doesnt seem to work for me.

  instance.updateTool('AnnotationCreateRectangle', { buttonGroup: null });
      instance.addEventListener('annotationSelected', (annot: any) => {
        if (annot instanceof Annotations.RectangleAnnotation) {
          instance.disableElements(['annotationStyleEditButton']);
        } else {
          instance.enableElements(['annotationStyleEditButton']);
        }
      });
8

hi Kevin,
i came across one more issue now, when i am already showing annotations and try to add a new annotation, once i perform temporary save in custom popup, i was clearing the annotations, but now, if annotations are shown in PDF and new annotation is drawn, it takes co-ordinates of other annotations, when i check on that particular checkbox, annotation doesnt show and when i try to draw other annotation, previously drawn annotation appears.

9

Hello rakshitha_r,

For the first issue:
When you are saving the annotationString, I am confused as to why you are also calling annotationManager.deleteAnnotations here, are you trying to deleting annotations whenever an annotation is added to document?

For the second issue:
If you have a tool selected, i.e. AnnotationCreateRectangle, and you want to disable the style popup of the tool, you can do something like this:

instance.UI.setToolMode(instance.Core.Tools.ToolNames.RECTANGLE);
    if (instance.UI.getToolMode().name === 'AnnotationCreateRectangle'){
      instance.UI.disableElements(['annotationStyleEditButton']);
    }

and you would enable the element back when it’s no longer the rectangle tool mode.

For the third issue:
Note that in the code below, ‘annotations’ is referring to the entire list of annotations that the function is returning, so in the case when we were ‘adding’, it was only referring to the first annotation i.e. annotations[0]. Hence you would want to make sure of the coordinates of the annotation that you are adding

annotationManager.addEventListener('annotationChanged', (annotations: any, action: any) => {
        if (action === 'add') {
                let dataObject = {
                annotationString:xfdfString,
                annotationManager.deleteAnnotations(annotations);
            });
        }
        documentViewer.displayPageLocation(annotations[0].PageNumber, annotations[0].X, annotations[0].Y);
      });

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

10

hi Kevin,
for the first issue,
yes soon after the annotation is added, we are removing that from the pdf, if user wants to see that, user needs to check on the checkbox present outside pdf, so thereby they can see added annotation as it contains the annotation during save.
for second issue:
i have to set by default rectangular annotation and there should not be any option for user to choose any other annotation tool, so i just need only the rectangular annotation with red color.
for third issue:
is there any way, to get particular annotation when we are already showing few annotations already on screen.

11

hi Kevin,
for showing rectangular tool with red color as default, i tried this way,

 const { documentViewer, annotationManager, Annotations } = instance.Core;
      this.hidingButtons(instance, documentViewer, Annotations);
 instance.updateTool('AnnotationCreateRectangle', { buttonGroup: null });
      instance.addEventListener('annotationSelected', (annot: any) => {
        if (annot instanceof Annotations.RectangleAnnotation) {
          instance.disableElements(['annotationStyleEditButton']);
        } else {
          instance.enableElements(['annotationStyleEditButton']);
        }
      });

        hidingButtons(instance: any, documentViewer: any, Annotations: any) {
    instance.UI.setHeaderItems(function (header: any) {
      const toolsOverlay = header.getHeader('toolbarGroup-Annotate').get('toolsOverlay');
      header.getHeader('toolbarGroup-Annotate').delete('toolsOverlay');
      header.getHeader('default').push({
        type: 'toolGroupButton',
        toolGroup: 'rectangleTools',
        dataElement: 'shapeToolGroupButton',
        title: 'annotation.rectangle',
      });
      header.push(toolsOverlay);
    });
    instance.setColorPalette({
      toolNames: [],
      colors: ['#FF0000'],
      defaults: [
        {
          StrokeColor: '#FF0000',
        },
      ],
    });
    documentViewer.getTool('AnnotationCreateRectangle').setStyles({
      StrokeColor: new Annotations.Color('#FF0000'),
    });
    instance.UI.disableElements([
      'toggleNotesButton',
      'toolbarGroup-Shapes',
      'toolbarGroup-Edit',
      'toolbarGroup-Insert',
      'toolsHeader',
      'toolbarGroup-View',
      'toolbarGroup-FillAndSign',
      'annotationCommentButton',
      'annotationStyleEditButton',
      'annotationDeleteButton',
      'annotationCropButton',
      'annotationRedactButton',
      'annotationGroupButton',
      'annotationUngroupButton',
      'calibrateButton',
      'linkButton',
      'fileAttachmentDownload',
      'toolbarGroup-Shapes',
      'panToolButton',
      'colorPickerColors',
      'stylePopup',
      'textPopup',
      'contextMenuPopup',
      'ColorPickerModal',
      'selectToolButton',
      'highlightToolButton2',
      'highlightToolButton3',
      'highlightToolButton4',
      'searchButton',
      'textStrikeoutToolButton',
      'textHighlightToolButton',
      'textSquigglyToolButton',
      'leftPanelButton',
      'menuButton',
      'viewControlsButton',
      'highlightToolButton',
      'rectangleToolButton3',
      'rectangleToolButton2',
      'underlineToolButton',
      'underlineToolButton2',
      'underlineToolButton3',
      'underlineToolButton4',
      'strikeoutToolButton',
      'strikeoutToolButton2',
      'strikeoutToolButton3',
      'strikeoutToolButton4',
      'squigglyToolButton',
      'squigglyToolButton2',
      'squigglyToolButton3',
      'squigglyToolButton4',
      'stickyToolButton',
      'stickyToolButton2',
      'stickyToolButton3',
      'stickyToolButton4',
      'stickyToolButton',
      'stickyToolButton2',
      'stickyToolButton3',
      'stickyToolButton4',
      'freeTextToolButton',
      'freeTextToolButton2',
      'freeTextToolButton3',
      'freeTextToolButton4',
      'rectangleToolButton4',
    ]);

    instance.UI.disableFeatures([instance.UI.Feature.Print]);
    // disable text selection
    instance.UI.disableFeatures([instance.UI.Feature.TextSelection]);
  }

but i am still not able to get Rectangular tool with red color, now it is appearing like pencil is drawing the annotation.

12

this helped me for this rectangular tool issue.

13

Hello rakshitha_r,

Glad the rectangular tool issue worked for you.

For hiding a particular annotation when it has already been imported, you could try creating a list of annotations to hide then use the hideAnnotations API:
https://pdfjs.express/api/Core.AnnotationManager.html#hideAnnotations
and then when a user checks the checkmark, you can call the showAnnotations API:
https://pdfjs.express/api/Core.AnnotationManager.html#showAnnotations

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

14

hi Kevin,
may be my explanation was confusing sorry for that.
Currently i have 2 things:
1st:
i have saved around 10 annotations from different pages, outside the pdf viewer i have selectall checkbox, so when that is clicked, annotations of 1st and 2nd page will be missed and 3rd and 4th page annotations will be shown, so i need a way, where in i can render annotations of all pages based on selectall click.
so for that to work i have added the following above code.

seperate method calls:

selectAllAnnotations() {
for (let i = 0; i < storedAnnotationList.length; i++) {
setTimeout(() => {
this.setAnnotation(this.storedAnnotationList[i]);
});
}
}

setAnnotation(event: any) {
this.renderingInstance = event.annotationString;
this.setAnnotationEvent.emit();
}

so based on the above methods call, the following code is executed inside webViewer,

 ngAfterViewInit(): void {
    let doc = this.popupData.pdfData;
    WebViewer(
      {
        path: '../../wv-resources/lib',
      },
      this.viewer.nativeElement
    ).then((instance: any) => {
      const { documentViewer, annotationManager, Annotations } = instance.Core;
      // bind pdf based on api hit with base64ToBlob format
      instance.UI.loadDocument(this.base64ToBlob(doc), { filename: 'myfile.pdf' });
      // listening to annotations based on add
      annotationManager.addEventListener('annotationChanged', (annotations: any, action: any) => {
        if (action === 'add') {
        documentViewer.displayPageLocation(annotations[0].PageNumber, annotations[0].X, annotations[0].Y);
      });
      // logic based on checkbox checked single and based on selectAll button click, based on for loop, executes here
      this.setAnnotationEvent.subscribe(() => {
        const annotationsList = annotationManager.getAnnotationsList();
        const xfdfString = this.renderingInstance;
        annotationManager.importAnnotations(xfdfString);
        this.renderingInstance = '';
      });
    });
  }
15

hi Kevin,
other issue is that, outside of pdf.js viewer, i have custom checkbox table, so there few annotations are already clicked, so i am able to see around 3 annotations on pdf, when i add a new annotation, it contains xml data like this,

`<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="0" rect="118,647,437,715" color="#E44234" flags="print" name="5de55d7a-bf2a-5296-4e80-2dc6fd387e00" title="admin" subject="Rectangle" date="D:20220921104931+05'30'" creationdate="D:20220921104930+05'30'"/><square page="0" rect="118,647,437,715" color="#E44234" flags="print" name="5de55d7a-bf2a-5296-4e80-2dc6fd387e00" title="admin" subject="Rectangle" date="D:20220921104931+05'30'" creationdate="D:20220921104930+05'30'"/><square page="0" rect="138,369,520,479" color="#E44234" flags="print" name="4fd5aa72-5f7f-a09b-e197-0ee97c14f4af" title="admin" subject="Rectangle" date="D:20220921105006+05'30'" creationdate="D:20220921105005+05'30'"/><square page="1" rect="133,615,465,672" color="#E44234" flags="print" name="c5a0706e-1ff3-ccc4-e489-8cab1a4724d7" title="admin" subject="Rectangle" date="D:20220921105044+05'30'" creationdate="D:20220921105043+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>`

so when this is clicked, it shows annotations of everything.

when i draw an annotation without annotations on screen, it appears like this,

`<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="0" rect="138,369,520,479" color="#E44234" flags="print" name="4fd5aa72-5f7f-a09b-e197-0ee97c14f4af" title="admin" subject="Rectangle" date="D:20220921105006+05'30'" creationdate="D:20220921105005+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>`

so i want to capture annotation like 2nd xml data, even though i have few annotations drawn on the pdf.

16

Hello rakshitha_r,

For the 1st issue:
If you are able to call importAnnotations on your xfdfString and annotations are being imported to the 3rd & 4th page but missing on the 1st & 2nd page, then there might be an issue with the annotation XML inside the xfdfString.

For the 2nd issue:
You can see that when calling exportAnnotations, you will get the XML data of all the annotations drawn on the page (you can see this by calling annotationManager.getAnnotationsList())
You can try the exportAnnotCommand: PDFJS Express WebViewer Class: AnnotationManager
This will grab the xml of the last time the function is called

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

17

Hi Kevin,
Thanks for response.
I will try and keep you posted.
Kevin, I have added user role permissions. For few roles I have set SetReadOnly as true. So for that user I am able to render xfdfString with import Annotations but deleting or hiding Annotation is not possible, I don’t get any errors in console but they are not getting deleted using Delete Ammotation.

18

for the first issue, I am able to get xfdfString also same and all 9-10 items also giving me console data but not able to render to pdf only the last pages getting rendered. Any idea on this??

19

Hello rakshitha_r,

For the users that should be able to make changes, did you toggle back the readonly mode? Set Annotation Permissions with PDF.js Express | Documentation
and you can check the status with
PDFJS Express WebViewer Class: AnnotationManager

Going back to the first issue -annotations not being rendered- can you provide the xfdfString in XML format so I can try reproducing? Also any new console messages/custom code that you are using to render if they are different from before?

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

20

Hi Kevin,
You need all XML data?? here the issue is inconsistent, sometimes the annotations get rendered and sometimes not.

<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="0" rect="104,623,481,700" color="#E44234" flags="print" name="81d167d4-73bd-250e-a99c-9cdda54d1b2d" title="admin" subject="Rectangle" date="D:20220921115756+05'30'" creationdate="D:20220921115755+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf> 
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="0" rect="100,405,570,732" color="#E44234" flags="print" name="bb0ac255-b0ff-7c51-5e6e-e0a7d57c04a0" title="admin" subject="Rectangle" date="D:20220921154019+05'30'" creationdate="D:20220921154018+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf> 
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="0" rect="231,610,464,675" color="#E44234" flags="print" name="c8f0a504-3609-d257-055e-03604a164502" title="admin" subject="Rectangle" date="D:20220921184525+05'30'" creationdate="D:20220921184525+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="0" rect="112,621,430,719" color="#E44234" flags="print" name="669cb942-45c2-b3cc-0c4e-e52752cbd9aa" title="admin" subject="Rectangle" date="D:20220921153109+05'30'" creationdate="D:20220921153108+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf> 
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="0" rect="68,619,536,721" color="#E44234" flags="print" name="655adb9b-df81-3c6b-9878-b37f5aff933b" title="admin" subject="Rectangle" date="D:20220921110757+05'30'" creationdate="D:20220921110756+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="1" rect="110,467,518,639" color="#E44234" flags="print" name="cb9b40a8-5b25-a0b2-98ea-dd82512502e1" title="admin" subject="Rectangle" date="D:20220921110821+05'30'" creationdate="D:20220921110821+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf> 
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="2" rect="84,676,453,729" color="#E44234" flags="print" name="b4fa3f3d-8497-2e45-6b4a-f88d45235c8b" title="admin" subject="Rectangle" date="D:20220923123407+05'30'" creationdate="D:20220923123403+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf> 
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="2" rect="240,366,416,448" color="#E44234" flags="print" name="85a478b5-6582-ec90-097c-9e696df084ed" title="admin" subject="Rectangle" date="D:20220923123426+05'30'" creationdate="D:20220923123425+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf> this.renderingInstance

the above xml data doesnt render properly, sometimes it works and sometimes it doesnt.
Thanks for link for ReadOnly mode, it clearly says we cannot delete annotations.

21

hi Kevin,
i tried both ways for rendering data back to PDF, it works for 1 or 2 times, 3rd time it doesnt bind back annotations for 1 and 2 pages,

selectAllAnnotations(annotationList: any) {
    for (let i = 0; i < annotationList.length; i++) {
      setTimeout(() => {
        this.setAnnotation(annotationList[i]);
      });
    }
    //  this.setAllAnnotationEvent.emit();
  }
  
     WebViewer(
      {
        path: '../../wv-resources/lib',
      },
      this.viewer.nativeElement
    ).then((instance: any) => {
  const { documentViewer, annotationManager, Annotations } = instance.Core;
   annotationManager.addEventListener('annotationChanged', (annotations: any, action: any) => {
         // logic based on checkbox checked single
      this.setAnnotationEvent.subscribe(() => {
        instance.UI.setToolbarGroup('toolbarGroup-Insert');
        const annotationsList = annotationManager.getAnnotationsList();
        const xfdfString = this.renderingInstance;
        annotationManager.importAnnotations(xfdfString);
        this.renderingInstance = '';
        let isChecked: any = [...this.annotationList.filter((ele: any) => ele.checked)];
        if (isChecked.length > 0) {
          instance.UI.disableElements(['ribbons']);
        } else {
          instance.UI.enableElements(['ribbons']);
        }
        instance.UI.setToolbarGroup('toolbarGroup-Insert');
      });
	        // set all annotations
      this.setAllAnnotationEvent.subscribe(() => {
        const annotationsList = annotationManager.getAnnotationsList();
        if (annotationsList.length > 0) {
          if (this.addButtonPermission) {
            annotationManager.deleteAnnotations(annotationsList);
          } else {
            annotationManager.hideAnnotations(annotationsList);
          }
        }
        const importedAnnotations = [];
        instance.UI.setToolbarGroup('toolbarGroup-Insert');
        for (let i = 0; i < this.annotationList.length; i++) {
          this.renderingInstance = this.annotationList[i].xfdfData;
          const annotation = annotationManager.importAnnotations(this.annotationList[i].xfdfData);
          importedAnnotations.push(annotation);
          annotationManager.importAnnotations(importedAnnotations);
        }
      });
    });

XML Data:

<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="0" rect="231,610,464,675" color="#E44234" flags="print" name="c8f0a504-3609-d257-055e-03604a164502" title="admin" subject="Rectangle" date="D:20220921184525+05'30'" creationdate="D:20220921184525+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="0" rect="112,621,430,719" color="#E44234" flags="print" name="669cb942-45c2-b3cc-0c4e-e52752cbd9aa" title="admin" subject="Rectangle" date="D:20220921153109+05'30'" creationdate="D:20220921153108+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="0" rect="104,623,481,700" color="#E44234" flags="print" name="81d167d4-73bd-250e-a99c-9cdda54d1b2d" title="admin" subject="Rectangle" date="D:20220921115756+05'30'" creationdate="D:20220921115755+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="0" rect="68,619,536,721" color="#E44234" flags="print" name="655adb9b-df81-3c6b-9878-b37f5aff933b" title="admin" subject="Rectangle" date="D:20220921110757+05'30'" creationdate="D:20220921110756+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="0" rect="100,405,570,732" color="#E44234" flags="print" name="bb0ac255-b0ff-7c51-5e6e-e0a7d57c04a0" title="admin" subject="Rectangle" date="D:20220921154019+05'30'" creationdate="D:20220921154018+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="0" rect="122,604,496,726" color="#E44234" flags="print" name="a5f1bd05-cd8c-76a6-d3ad-56e1e3355bf5" title="admin" subject="Rectangle" date="D:20220923162824+05'30'" creationdate="D:20220923162823+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="0" rect="68,32,429,62" color="#E44234" flags="print" name="108119f6-efde-f30a-f86e-3129585734d9" title="admin" subject="Rectangle" date="D:20220923155008+05'30'" creationdate="D:20220923155007+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="1" rect="110,467,518,639" color="#E44234" flags="print" name="cb9b40a8-5b25-a0b2-98ea-dd82512502e1" title="admin" subject="Rectangle" date="D:20220921110821+05'30'" creationdate="D:20220921110821+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="2" rect="42,97,83,108" color="#E44234" flags="print" name="40bae075-6cf8-2844-0026-870c9e55798b" title="admin" subject="Rectangle" date="D:20220923155233+05'30'" creationdate="D:20220923155233+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="2" rect="444,74,561,101" color="#E44234" flags="print" name="6285d642-3d45-a324-f3cd-2b8e7524eb8f" title="admin" subject="Rectangle" date="D:20220923155053+05'30'" creationdate="D:20220923155052+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="2" rect="169,765,224,777" color="#E44234" flags="print" name="48bdce4b-8dc4-48a8-3c1c-01c6ce542077" title="admin" subject="Rectangle" date="D:20220923162847+05'30'" creationdate="D:20220923162846+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="2" rect="127,47,200,61" color="#E44234" flags="print" name="fd72c07f-d677-6c2d-f558-4a2e4aa6bb62" title="admin" subject="Rectangle" date="D:20220923155513+05'30'" creationdate="D:20220923155513+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="2" rect="240,366,416,448" color="#E44234" flags="print" name="85a478b5-6582-ec90-097c-9e696df084ed" title="admin" subject="Rectangle" date="D:20220923123426+05'30'" creationdate="D:20220923123425+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="2" rect="84,676,453,729" color="#E44234" flags="print" name="b4fa3f3d-8497-2e45-6b4a-f88d45235c8b" title="admin" subject="Rectangle" date="D:20220923123407+05'30'" creationdate="D:20220923123403+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="2" rect="569,376,598,660" color="#E44234" flags="print" name="f3a0dcd9-a0a5-c0dd-90ce-5780c2794b7c" title="admin" subject="Rectangle" date="D:20220923173222+05'30'" creationdate="D:20220923173221+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="2" rect="72,129,564,321" color="#E44234" flags="print" name="9af0ce01-4a1d-031f-9fd6-955fbb808d69" title="admin" subject="Rectangle" date="D:20220923160627+05'30'" creationdate="D:20220923160626+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>
<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="2" rect="25,599,31,615" color="#E44234" flags="print" name="34e02210-3992-bfc6-f0dd-c1fa522e65d4" title="admin" subject="Rectangle" date="D:20220923162855+05'30'" creationdate="D:20220923162854+05'30'"/></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>