# How to bind multiple xfdfString values as annotation in PDF

**URL:** <https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038>\
**Category:** Technical Support\
**Created:** [September 16, 2022, 5:37pm UTC](https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038 "2022-09-16T17:37:06Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![rakshitha\_r](https://avatars.discourse-cdn.com/v4/letter/r/82dd89/32.png) [@rakshitha\_r](https://pdfjs.community/u/rakshitha_r)\
**Post date:** [September 16, 2022, 5:37pm UTC](https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038/1 "2022-09-16T17:37:06Z")

</div>

**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?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [September 16, 2022, 5:37pm UTC](https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038/3 "2022-09-16T17:37:11Z")

</div>

**Hello, I’m Ron, an automated tech support bot 🤖**

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

Guides:
- [Best practices for PDF.js Express - Store annotations](https://pdfjs.express/documentation/learn-more/best-practices#store-annotations)
- [Saving a document with annotations](https://pdfjs.express/documentation/basic-operations/save-document/save-with-annotations)
- [XFDF format - In PDF.js Express Web Viewer](https://pdfjs.express/documentation/annotation/xfdf#in-pdf.js-express-web-viewer)

APIs:
- [Core.Document - extractXFDF( [pages])](https://pdfjs.express/api/Core.Document.html#extractXFDF__anchor)
- [PDF.js Express Utilities](https://pdfjs.express/api/utils/index.html#__anchor)
- [UndefinedannotationsDrawn](https://pdfjs.express/api/namespaces.list.html#event:annotationsDrawn__anchor)

Forums:
- [How to render xfdf back into pdf](https://pdfjs.community/t/how-to-render-xfdf-back-into-pdf/2026/21)
- [How to show the annotation on the PDF with selected xfdfString](https://pdfjs.community/t/how-to-show-the-annotation-on-the-pdf-with-selected-xfdfstring/2016/1)
- [How to set Note(‘stickyToolGroupButton’) annotation to custom button](https://pdfjs.community/t/how-to-set-note-stickytoolgroupbutton-annotation-to-custom-button/208/1)

  
  

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](https://utm.guru/ueQNw)

---

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [September 16, 2022, 8:08pm UTC](https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038/4 "2022-09-16T20:08:28Z")

</div>

Hello rakshitha\_r,

Continuing the conversation from [How to render xfdf back into pdf - #21 by rakshitha\_r](https://pdfjs.community/t/how-to-render-xfdf-back-into-pdf/2026/21)

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](https://utm.guru/ueQNw)

---

<div class="post-metadata">

**Author:** ![rakshitha\_r](https://avatars.discourse-cdn.com/v4/letter/r/82dd89/32.png) [@rakshitha\_r](https://pdfjs.community/u/rakshitha_r)\
**Post date:** [September 17, 2022, 2:17am UTC](https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038/5 "2022-09-17T02:17:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [September 19, 2022, 4:10pm UTC](https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038/6 "2022-09-19T16:10:26Z")

</div>

Hello rakshitha\_r,

Inside this loop:

```javascript
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.:

```javascript
    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](https://utm.guru/ueQNw)

---

<div class="post-metadata">

**Author:** ![rakshitha\_r](https://avatars.discourse-cdn.com/v4/letter/r/82dd89/32.png) [@rakshitha\_r](https://pdfjs.community/u/rakshitha_r)\
**Post date:** [September 19, 2022, 5:10pm UTC](https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038/7 "2022-09-19T17:10:02Z")

</div>

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

```javascript
      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.

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

```

---

<div class="post-metadata">

**Author:** ![rakshitha\_r](https://avatars.discourse-cdn.com/v4/letter/r/82dd89/32.png) [@rakshitha\_r](https://pdfjs.community/u/rakshitha_r)\
**Post date:** [September 19, 2022, 6:02pm UTC](https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038/8 "2022-09-19T18:02:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [September 19, 2022, 8:22pm UTC](https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038/9 "2022-09-19T20:22:54Z")

</div>

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:

```javascript
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

```javascript
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](https://utm.guru/ueQNw)

---

<div class="post-metadata">

**Author:** ![rakshitha\_r](https://avatars.discourse-cdn.com/v4/letter/r/82dd89/32.png) [@rakshitha\_r](https://pdfjs.community/u/rakshitha_r)\
**Post date:** [September 20, 2022, 5:19am UTC](https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038/10 "2022-09-20T05:19:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rakshitha\_r](https://avatars.discourse-cdn.com/v4/letter/r/82dd89/32.png) [@rakshitha\_r](https://pdfjs.community/u/rakshitha_r)\
**Post date:** [September 20, 2022, 4:55pm UTC](https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038/11 "2022-09-20T16:55:15Z")

</div>

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

```javascript
 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.

---

<div class="post-metadata">

**Author:** ![rakshitha\_r](https://avatars.discourse-cdn.com/v4/letter/r/82dd89/32.png) [@rakshitha\_r](https://pdfjs.community/u/rakshitha_r)\
**Post date:** [September 20, 2022, 6:12pm UTC](https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038/12 "2022-09-20T18:12:23Z")

</div>

> [@kkim](#):
>
> ```javascript
> instance.UI.setToolMode(instance.Core.Tools.ToolNames.RECTANGLE);
> if (instance.UI.getToolMode().name === 'AnnotationCreateRectangle'){
> instance.UI.disableElements(['annotationStyleEditButton']);
> }
> 
> ```

this helped me for this rectangular tool issue.

---

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [September 20, 2022, 7:09pm UTC](https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038/13 "2022-09-20T19:09:26Z")

</div>

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](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](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](https://utm.guru/ueQNw)

---

<div class="post-metadata">

**Author:** ![rakshitha\_r](https://avatars.discourse-cdn.com/v4/letter/r/82dd89/32.png) [@rakshitha\_r](https://pdfjs.community/u/rakshitha_r)\
**Post date:** [September 21, 2022, 4:49am UTC](https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038/14 "2022-09-21T04:49:09Z")

</div>

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:

```javascript
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,

```javascript
 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 = '';
      });
    });
  }

```

---

<div class="post-metadata">

**Author:** ![rakshitha\_r](https://avatars.discourse-cdn.com/v4/letter/r/82dd89/32.png) [@rakshitha\_r](https://pdfjs.community/u/rakshitha_r)\
**Post date:** [September 21, 2022, 5:24am UTC](https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038/15 "2022-09-21T05:24:54Z")

</div>

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,

```javascript
`<?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,

```javascript
`<?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.

---

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [September 21, 2022, 5:00pm UTC](https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038/16 "2022-09-21T17:00:27Z")

</div>

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](https://pdfjs.express/api/7.0/CoreControls.AnnotationManager.html#exportAnnotCommand)  
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](https://utm.guru/ueQNw)

---

<div class="post-metadata">

**Author:** ![rakshitha\_r](https://avatars.discourse-cdn.com/v4/letter/r/82dd89/32.png) [@rakshitha\_r](https://pdfjs.community/u/rakshitha_r)\
**Post date:** [September 22, 2022, 5:14pm UTC](https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038/17 "2022-09-22T17:14:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rakshitha\_r](https://avatars.discourse-cdn.com/v4/letter/r/82dd89/32.png) [@rakshitha\_r](https://pdfjs.community/u/rakshitha_r)\
**Post date:** [September 22, 2022, 5:16pm UTC](https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038/18 "2022-09-22T17:16:52Z")

</div>

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??

---

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [September 22, 2022, 6:50pm UTC](https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038/19 "2022-09-22T18:50:45Z")

</div>

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](https://pdfjs.express/documentation/annotation/annotation-permissions#readonly-mode)  
and you can check the status with  
[PDFJS Express WebViewer Class: AnnotationManager](https://pdfjs.express/api/Core.AnnotationManager.html#isReadOnlyModeEnabled)

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](https://utm.guru/ueQNw)

---

<div class="post-metadata">

**Author:** ![rakshitha\_r](https://avatars.discourse-cdn.com/v4/letter/r/82dd89/32.png) [@rakshitha\_r](https://pdfjs.community/u/rakshitha_r)\
**Post date:** [September 22, 2022, 11:14pm UTC](https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038/20 "2022-09-22T23:14:12Z")

</div>

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

```javascript
<?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.

---

<div class="post-metadata">

**Author:** ![rakshitha\_r](https://avatars.discourse-cdn.com/v4/letter/r/82dd89/32.png) [@rakshitha\_r](https://pdfjs.community/u/rakshitha_r)\
**Post date:** [September 23, 2022, 5:58pm UTC](https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038/21 "2022-09-23T17:58:45Z")

</div>

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,

```javascript
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:

```javascript
<?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>

```

[Next page](https://pdfjs.community/t/how-to-bind-multiple-xfdfstring-values-as-annotation-in-pdf/2038.md?page=2)