Skip to content
On this page

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)
    NameRequiredTypeDescription
    modeyesnumberDisplay 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()

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')
  • 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)

    This is the parameters to apply different scroll modes.

    NameRequiredTypeDescription
    modeyesnumberScroll 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.

javascript
docViewer.webViewerSearch(value)
NameRequiredTypeDescription
valueyesstringThe Searched Content

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.

javascript
// Zoom in
docViewer.zoomIn()

// Zoom out
docViewer.zoomOut()

// Scale changed
docViewer.webViewerScaleChanged(scale)
NameRequiredTypeDescription
scaleyesnumberZoom Scale, Zoom In: 10, Zoom Out: 0.5