Navigate within PDF

info

In this documentation, you can learn how to implement specific features of the PDF Web SDK. If you prefer to test a demo or would like to explore the basic functionalities of this SDK, review Getting started with the PDF Viewer SDK.

Learn how to navigate within a PDF file with the PDF Web SDK.

The PDF Viewer SDK can programmatically navigate within a document. Let users navigate to a specific page of interest in a PDF document by implementing this functionality.

This guide explains how to:

1. Go to a page
2. Go to a destination
3. Full example

---

Before you begin

Navigating within a PDF document requires a DocumentView. Learn how to view a document.

Go to a page

The DocumentView offers convenient ways to navigate to a page, either incrementally using nextPage() or previousPage(), or by page number using goToPage(pageNumber: number).

The following code snippet shows basic navigation:

// go to a specific page
pdfDocument.goToPage(5);

// go to next page
pdfDocument.nextPage();

// go to previous page
pdfDocument.previousPage();

Go to a destination

note

This functionality is not yet available but will be available in future releases.

Full example

This full sample demonstrates how to navigate to the page of the first annotation after opening a document.

import { pdfToolsWebSdk, Pdf } from '@pdftools/pdf-web-sdk';

pdfToolsWebSdk.initialize().then(async () => {    
  // create document view
  const container = document.querySelector('#pdftools-web-viewer-container');
  const documentView = new UI.DocumentView(container);

  // create controller and open document
  const controller = new Pdf.Controller();
  const pdfDocument = await controller.openDocument({
    uri: '/pdf/WebViewer_Demo.pdf',
  });

  await documentView.initialize(pdfDocument);
  
  // get the first annotation in the document
  const annotationList = await pdfDocument.annotations.getAll();
  if(annotationList.length > 0)
  {
    const firstAnnotation = annotationList[0];
    pdfDocument.goToPage(firstAnnotation.page.pageNumber);
  }
});