Zoom Options in Our JavaScript PDF Viewer

PSPDFKit for Web features different UI elements and API helpers to both manage zooming in and out of a document and handle zooming automatically.

Zooming with the UI

Documents opened in PSPDFKit for Web’s viewer can be zoomed in on and out of using the corresponding toolbar buttons, zoom-in and zoom-out:

Zooming can also be controlled using keyboard shortcuts:

• Ctrl/Cmd + + — zoom in

• Ctrl/Cmd + - — zoom out

• Ctrl/Cmd + 0 — zoom to auto

The zoom-mode button can be used to toggle the current zoom so that the page fits either the viewport width or the viewport height:

The marquee-zoom button, hidden by default, can be used to zoom to the area of a rectangle drawn by the user:

The marquee-zoom button can be enabled in the PSPDFKit.Configuration object passed to PSPDFKit.load():

PSPDFKit.load({
  toolbarItems: PSPDFKit.defaultToolbarItems.concat([{ type: "marquee-zoom" }])
});

Or, it can be enabled using the instance.setToolbarItems() API method:

instance.setToolbarItems((items) => items.concat([{ type: "marquee-zoom" }]));

Zooming with the API

Different settings related to zooming can be set using the API.

Changing Zoom Values

Zoom values can be passed in PSPDFKit.Configuration#initialViewState when loading a document.

This example sets the initial value to PSPDFKit.ZoomMode.AUTO (the default):

PSPDFKit.load({
  initialViewState: new PSPDFKit.ViewState({
    zoom: PSPDFKit.ZoomMode.AUTO
  })
});

It’s also possible to set it to a specific zoom value:

PSPDFKit.load({
  initialViewState: new PSPDFKit.ViewState({
    zoom: 2
  })
});

This value can be changed at any time after loading via instance.setViewState():

instance.setViewState((viewState) => viewState.set("zoom", 1.5));

Available values for PSPDFKit.ViewState#zoom can be looked up in the API reference on PSPDFKit.ZoomMode.

Querying Current Zoom Values

The current zoom value can be queried with instance.currentZoomLevel at any time.

Other dynamic values related to zooming available in the current instance are:

• instance.minimumZoomLevel — minimum zoom level attainable using the UI or the API

• instance.maximumZoomLevel — maximum zoom level attainable using the UI or the API

API Zooming Helpers

The API provides some helpers to make programmatic zoom handling easier.

This example zooms in to the document by a single step via PSPDFKit.ViewState#zoomIn():

instance.setViewState((viewState) => viewState.zoomIn());

It has its counterpart, PSPDFKit.ViewState#zoomOut():

instance.setViewState((viewState) => viewState.zoomOut());

Finally, instance.jumpAndZoomToRect() can zoom to any part of the document.

This example navigates to page 10 of the document and zooms in to the bounding box of an annotation, making it take the whole viewport size:

instance.jumpAndZoomToRect(10, annotation.boundingBox);

ℹ️ Note: When the zoom value changes, the page background may be rendered again in order to keep showing a sharp image.