Section:

Add Link to PDF Annotations

You can make annotations clickable and link to a page in the same document or an external URL. This is done by grouping a link annotation with the desired annotation. This can be useful to create links to other content through a visual annotation markup as opposed to plain text. For example, you can leave a stamp annotation of a picture taken somewhere in the world and attach a geolocation URL to it.

Adding links to annotations through the UI

By default, the ContextMenu of an annotation has an option for annotation links:

Apryse Docs Image

Which, upon being clicked, will pop-up a modal for adding a hyperlink, or intra-document link, to an annotation:

Apryse Docs Image

Programmatically add hyperlink to an existing annotation

To programmatically add a hyperlink to an existing annotation, we must first create a link annotation and attach a URI action to it, which is triggered when the existing annotation is clicked. Finally, the link annotation is grouped with the desired annotation.

1WebViewer(...).then(instance => {
2  const { Actions, Annotations, annotationManager, documentViewer } = instance.Core;
3
4  documentViewer.addEventListener('documentLoaded', () => {
5    /**
6     * Assumes an annotation has been created, with the variable name "originalAnnotation"
7     */
8    const newLink = new Annotations.Link();
9    newLink.PageNumber = originalAnnotation.PageNumber;
10    newLink.X = originalAnnotation.X;
11    newLink.Y = originalAnnotation.Y;
12    newLink.Width = originalAnnotation.Width;
13    newLink.Height = originalAnnotation.Height;
14
15    /**
16     * Optional: Add styling to link to indicate to user the annotation has a
17     * link associated with it
18     */
19    newLink.StrokeColor = new Annotations.Color(0, 165, 228);
20    newLink.StrokeStyle = 'underline';
21    newLink.StrokeThickness = 2;
22
23    newLink.addAction(
24      'U',
25      new Actions.URI({
26        uri: 'https://www.apryse.com',
27      }),
28    );
29
30    annotationManager.addAnnotation(newLink);
31    annotationManager.groupAnnotations(originalAnnotation, [newLink]);
32    // Re-render annotations (requires major redraw)
33    annotationManager.drawAnnotationsFromList(newLink);
34  });
35});

Related Links

Programmatically add a page link to an existing annotation

Similar to the example above, a link annotation is used to trigger an action when the annotation is clicked. However, in this case, a GoTo action is used instead to go to a certain page in the document.

1WebViewer(...).then(instance => {
2  const { Actions, Annotations, annotationManager, documentViewer } = instance.Core;
3
4  documentViewer.addEventListener('documentLoaded', () => {
5    /**
6     * Assumes an annotation has been created, with the variable name "originalAnnotation"
7     */
8    const newLink = new Annotations.Link();
9    newLink.PageNumber = originalAnnotation.PageNumber;
10    newLink.X = originalAnnotation.X;
11    newLink.Y = originalAnnotation.Y;
12    newLink.Width = originalAnnotation.Width;
13    newLink.Height = originalAnnotation.Height;
14
15    /**
16     * Optional: Add styling to link to indicate to user the annotation has a
17     * link associated with it
18     */
19    newLink.StrokeColor = new Annotations.Color(0, 165, 228);
20    newLink.StrokeStyle = 'underline';
21    newLink.StrokeThickness = 2;
22
23    const pageToLinkTo = 2;
24
25    newLink.addAction(
26      'U',
27      new Actions.GoTo({
28        dest: new Actions.GoTo.Dest({
29          page: pageToLinkTo,
30        }),
31      }),
32    );
33
34    annotationManager.addAnnotation(newLink);
35    annotationManager.groupAnnotations(originalAnnotation, [newLink]);
36    // Re-render annotations (requires major redraw)
37    annotationManager.drawAnnotationsFromList(newLink);
38  });
39});

Related Links

Next steps

Check out how you can group annotations or perhaps create your own custom annotation!

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales