Navigate within PDF

Extensive development effort required

This guide outlines a functionality that requires extensive development effort. Use the readily available features of the PDF Viewer SDK instead of implementing a viewer from scratch. Only use this guide if you want to implement your PDF viewer and customize it as much as possible. To test and implement the primary functionality 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);
  }
});