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.
javascriptdocViewer.webViewerSwitchSpreadMode(mode)
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.
javascriptdocViewer.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.
javascriptdocViewer.webViewerSwitchScrollMode(mode)
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)
Name | Required | Type | Description |
---|---|---|---|
value | yes | string | The 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.
// Zoom in
docViewer.zoomIn()
// Zoom out
docViewer.zoomOut()
// Scale changed
docViewer.webViewerScaleChanged(scale)
Name | Required | Type | Description |
---|---|---|---|
scale | yes | number | Zoom Scale, Zoom In: 10, Zoom Out: 0.5 |