Zoom to a specific annotation when the PDF loads

Q: When PDF loads in PSPDF, we want to zoom in a particular annotation.

A: You can zoom to an annotation by setting the zoom to a value that would make the annotation fit in the viewport, and then using the annotation’s bounding box as target for instance.jumpToRect().

You can also add some padding around the annotation bounding box if needed:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
PSPDFKit.load(configuration).then(instance => {
  function zoomToAnnotation(annotation, padding) {
    const pageIndex = annotation.pageIndex;
    const rect = annotation.boundingBox.grow(padding);
    const viewportPxRect = instance.contentDocument
      .querySelector(".PSPDFKit-Viewport")
      .getBoundingClientRect();
    const viewportSize = {
      width: viewportPxRect.width / instance.currentZoomLevel,
      height: viewportPxRect.height / instance.currentZoomLevel
    };
    const rectRatio = rect.width / rect.height;
    const viewportSizeRatio = viewportSize.width / viewportSize.height;
    let zoomMultiplier = 1;
    if (rectRatio > viewportSizeRatio) {
      zoomMultiplier = viewportSize.width / rect.width;
    } else if (rectRatio < viewportSizeRatio) {
      zoomMultiplier = viewportSize.height / rect.height;
    }
    instance.setViewState(viewState =>
      viewState
        .set("zoom", instance.currentZoomLevel * zoomMultiplier)
        .set("currentPageIndex", pageIndex)
    );
    const scrollViewport = instance.contentDocument.querySelector(
      ".PSPDFKit-Scroll"
    );
    const scrollContentPxRect = scrollViewport.firstChild.getBoundingClientRect();
    const clientRect = instance.transformContentPageToClientSpace(
      rect,
      pageIndex
    );
    scrollViewport.scrollTo({
      top: -scrollContentPxRect.top + clientRect.top,
      left: -scrollContentPxRect.left + clientRect.left,
      behavior: "auto"
    });
  }
  // Set padding around annotation
  const padding = 8
  // Get annotations for page 0
  instance.getAnnotations(0).then(annotations => {
      // This will target the first annotation found in the page, with padding around
      zoomToAnnotation(annotations.first(), padding);
      // This will select the annotation
      instance.setSelectedAnnotation(annotations.first().id);
  });
});

This has been tested with PSPDFKit for Web 2019.3.