Guides ​

If you’re interested in all of the ComPDFKit features, please go through our guides to quickly add PDF viewing, annotating, editing, form filling, and signing to your application. The following sections list some examples to show you how to add document functionalities to your web apps using our JavaScript APIs.

Viewer ​

The viewer provides a fast and battle-tested rendering engine with a wide range of advanced features including display modes, content selection, zoom level settings, and page navigation, which offers developers a way to quickly embed a highly configurable PDF viewer in web apps.

Display Modes ​

ComPDFKit Web Viewer provides viewing PDFs in different display modes. Let's see what the display modes are and call the following method to display in different display modes. The corresponding parameters show in the following table.

• Single Page

  Show one page at a time for users to continuously scroll up and down to navigate through the pages.

• Two-up Mode

  Display two pages side-by-side and continuously scroll up and down to navigate through the pages.

• Cover Mode

  Show the cover page on the first page during two-up.

  javascript

  docViewer.webViewerSwitchSpreadMode(mode)

  1
  

  Name	Required	Type	Description
  mode	yes	number	Display Modes Parameter, Single Mode: 0, Two-up Mode: 1, Cover Mode: 2

• Full Screen Mode

  It's a mode to view PDFs in full-screen, which fills the entire screen with the PDF content. The following method is given to start the full-screen presentation mode.

  javascript

  docViewer.requestFullScreenMode()

  1
  

PDF Navigation ​

Provide thumbnails, bookmarks, and layers to navigate PDF content.

• Page Navigation

  After loading a PDF document, you can programmatically interact with it, which allows you to view and transition between the pages like scrolling and jumping to specific pages.

  javascript

  // Previous page
  docViewer.previousPage()
  
  // Next page
  docViewer.nextPage()
  
  // Jump to a page
  docViewer.pageNumberChanged('3')

  1
  2
  3
  4
  5
  6
  7
  8
  

• Scroll Mode

  ComPDFKit Web Viewer has two scrolling modes: Vertical and Horizontal. You can set the corresponding mode by using the following method.

  javascript

  docViewer.webViewerSwitchScrollMode(mode)

  1
  

  This is the parameters to apply different scroll modes.

  Name	Required	Type	Description
  mode	yes	number	Scroll Mode Parameter, Vertical: 0, Horizontal: 1

• Thumbnails

  Provide methods to render PDF pages as thumbnail images.

Text Search & Selection ​

ComPDFKit Web Viewer offers developers an API for programmatic full-text search, as well as UI for searching and highlighting relevant matches. You can use the method below to search for content in PDFs with ComPDFKit Web Viewer.

docViewer.webViewerSearch(value)

Zooming ​

ComPDFKit Web Viewer provides super zoom out and in to unlock more zoom levels, and pinch-to-zoom or double tap on the specific area to perform a smart page content analysis, or you can programmatically interact with it by using the following method.

Use the following methods to zoom in/out by a certain zoom value or scale.

// Zoom in
docViewer.zoomIn()

// Zoom out
docViewer.zoomOut()

// Scale changed
docViewer.webViewerScaleChanged(scale)