Select PDF annotations using JavaScript

Nutrient Web SDK enables you to select annotations with the built-in user interface (UI) or with JavaScript.

Using the built-in UI

Use the UI to select one annotation or multiple annotations.

To select one annotation, left-click the annotation in the viewport.

To select multiple annotations, use one of the following methods:

• Click the Select Multiple Annotations toolbar item. Left-click and draw a rectangle around the annotations you want to select.

• Select one annotation. Then press Shift to select more annotations one by one.
• Press Control (Windows) or Command (macOS). Left-click and draw a rectangle around the annotations you want to select.
• Press Control-A (Windows) or Command-A (macOS) to select all annotations on the page.

To keep rectangle selection active without displaying the Select Multiple Annotations toolbar item, set the interaction mode after loading the document. Then remove the item from the toolbar:

instance.setViewState(viewState =>
  viewState.set(
    "interactionMode",
    NutrientViewer.InteractionMode.MULTI_ANNOTATIONS_SELECTION
  )
);

instance.setToolbarItems(items =>
  items.filter(item => item.type !== "multi-annotations-selection")
);

With this interaction mode active, click and drag on the document to select multiple annotations.

Grouping annotations

Grouping annotations enables you to select the same annotation set later and apply actions to the group. After you group annotations, click one annotation in the group to select the whole group.

Group the selected annotations in one of the following ways:

• Click the Group toolbar item.

• Press Control-G (Windows) or Command-G (macOS).

Ungroup the annotations in one of the following ways:

• Click the Ungroup toolbar item.

• Click one of the annotations in the group, and press Control-Shift-G (Windows) or Command-Shift-G (macOS).

Modifying multiple annotations

After you select multiple annotations, use one of the following actions:

• Drag all the selected annotations to a new location on the page.
• Copy all the selected annotations by pressing Control-C (Windows) or Command-C (macOS).
• Paste all the selected annotations by pressing Control-V (Windows) or Command-V (macOS).
• Duplicate all the selected annotations by pressing Control-D (Windows) or Command-D (macOS).
• Delete all the selected annotations by pressing Del (Windows) or Command-Backspace (macOS).

Selecting annotations programmatically

You can also select annotations with JavaScript. To select annotations, pass the annotation IDs to the setSelectedAnnotations method:

instance.setSelectedAnnotations(
  NutrientViewer.Immutable.List(["annotationsOrAnnotationsIds"])
);

To deselect the current annotations, pass null to the setSelectedAnnotations method.