Foxit Developer

Page Navigation and Zoom ​

Foxit PDF SDK for Web supports controlling page navigation, zoom, and view rotation through the Viewer and render objects. Related APIs include:

  • PDFViewer.zoomTo()
  • PDFViewer.rotateTo()
  • PDFViewer.redraw()
  • PDFDocRender.getCurrentPageIndex()
  • PDFDocRender.goToPage()

With the full UI (UIExtension), interactions such as page input, previous/next page, zoom buttons, and rotate view are usually built in. This topic explains how to control these viewing states through APIs.

Go to a Specific Page ​

PDFDocRender.goToPage(index, offset, isPDFPoint) navigates to the specified page. Page indexes start at 0.

javascript
const pdfViewer = await pdfui.getPDFViewer();
const docRender = pdfViewer.getPDFDocRender();

// Go to page 3.
await docRender.goToPage(2);

To jump to a specific position on the page, pass offset. When isPDFPoint is true, offset is treated as PDF coordinates; otherwise it is treated as device coordinates.

javascript
await docRender.goToPage(0, { x: 0, y: 500 }, true);

Get the Current Page ​

The current page index can be read from PDFDocRender:

javascript
const docRender = pdfViewer.getPDFDocRender();
const currentPageIndex = docRender.getCurrentPageIndex();

Zoom the Document ​

PDFViewer.zoomTo(scale, position) sets the zoom level. scale can be a numeric value or a fit mode supported by the Viewer, such as 'fitWidth' or 'fitHeight'.

javascript
await pdfViewer.zoomTo(1.25);
await pdfViewer.zoomTo('fitWidth');
await pdfViewer.zoomTo('fitHeight');

When passing a numeric value, the zoom level must fall within the minimum and maximum allowed by Viewer initialization options.

Rotate the View ​

PDFViewer.rotateTo(degree, options) rotates page display in the Viewer. This API only changes how the Viewer displays pages; it does not modify PDF page data.

javascript
await pdfViewer.rotateTo(90);

Supported angles are typically 0, 90, 180, 270, or multiples of 90.

Refresh Display ​

After API changes that affect page display, call PDFViewer.redraw(force) to update the current view.

javascript
await pdfViewer.redraw();
await pdfViewer.redraw(true);

Notes ​

  • Page indexes start at 0.
  • Page navigation, zoom, and view rotation are Viewer state and are not written to the PDF file.
  • When jumping by coordinates, distinguish PDF coordinates from Viewer/device pixels.
  • To change the rotation angle of PDF pages themselves, use the page rotation APIs in Page organizer.