Skip to main content
Version: Version 5

Interface: PdfToolsViewer

API for interacting with the PDF Viewer SDK, exposing core functionalities for document interaction, event handling, and UI management.

Extends​

Properties​

addLanguage​

addLanguage: (locale, translations) => void

Adds a complete new language with all translations.

Parameters​

locale​

string

Language code.

translations​

TranslationMap

Complete translation map with all keys.

Returns​

void

Example​

viewer.addLanguage('es', {
    'toolbar.button.open': 'Abrir',
    'toolbar.button.save': 'Guardar',
    'toolbar.button.print': 'Imprimir',
    // ... all other necessary translations
});

addTheme​

addTheme: (name, partial, baseTheme?) => void

Adds a custom theme by extending a base theme.

Parameters​

name​

string

Custom theme name.

partial​

PartialSemanticTheme

Partial theme to merge with the base theme.

baseTheme?​

BuiltInTheme

Base theme to extend (light or dark).

Returns​

void

Example​

viewer.addTheme('brand', { accent: { default: '#FF5500' } }, 'light');

clearThemeVariableOverrides​

clearThemeVariableOverrides: () => void

Clears all CSS variable overrides, reverting to the theme defaults.

Returns​

void

Example​

viewer.clearThemeVariableOverrides();

customizeTranslations​

customizeTranslations: (locale, overrides) => void

Customizes specific translations for a locale.

Parameters​

locale​

string

Language code.

overrides​

PartialTranslationMap

Partial translation map with keys to override.

Returns​

void

Example​

viewer.customizeTranslations('en', {
    'toolbar.button.save': 'Save Document',
    // Only the save button text will be updated, other translations remain unchanged
});

dispose​

dispose: () => void

Disposes of the PDF Viewer instance, freeing up resources.

Returns​

void

Example​

viewer.dispose();

document​

document: Document

Groups all the document-related API actions.

documentView​

documentView: DocumentView

Groups all the documentView-related API actions.

getAvailableLocales​

getAvailableLocales: () => string[]

Gets all available locales, both built-in and custom added.

Returns​

string[]

Array of locale codes.

Example​

const locales = viewer.getAvailableLocales(); // ['en', 'de', 'fr', etc.]

getAvailableThemes​

getAvailableThemes: () => string[]

Gets all available themes.

Returns​

string[]

Array of theme names including auto.

Example​

const themes = viewer.getAvailableThemes(); // ['auto', 'light', 'dark', ...]

getLocale​

getLocale: () => string

Gets the current locale.

Returns​

string

Current locale.

Example​

const current = viewer.getLocale(); // `en`, `de`, `fr`, etc.

getTheme​

getTheme: () => string

Gets the current active theme name.

Returns​

string

Current theme name. It never returns auto.

Example​

const theme = viewer.getTheme(); // 'light' or 'dark' or custom

getUser​

getUser: () => string

Gets the current user.

Returns​

string

The user identifier, or null if no user is set.

hideComponents​

hideComponents: (names) => void

Hides specified UI components in the Viewer.

Parameters​

names​

"toolbar" | "document-upload-screen" | "open-document-button" | "save-button" | "print-button" | "hamburger-menu-button" | "pagination" | "previous-page-button" | "next-page-button" | "zoom-in-button" | "zoom-out-button" | "zoom-dropdown" | "fit-mode-dropdown" | "page-mode-dropdown" | "annotations-button" | "overview-button" | "thumbnails-button" | "search-button" | "annotation-toolbar" | "text-selection-button" | "sticky-note-button" | "highlight-text-button" | "stamp-button" | "line-button" | "shape-button" | "ink-button" | "image-button" | "text-button" | "redaction-button" | "left-sidebar" | "stamp-types-panel" | "redact-panel" | "right-sidebar" | "annotations-panel" | "overview-panel" | "thumbnails-panel" | "search-panel" | "stamp-annotation-popover" | "image-annotation-popover" | "line-annotation-popover" | "shape-annotation-popover" | "ink-annotation-popover" | "free-text-annotation-popover" | "redaction-annotation-popover" | ("toolbar" | "document-upload-screen" | "open-document-button" | "save-button" | "print-button" | "hamburger-menu-button" | "pagination" | "previous-page-button" | "next-page-button" | "zoom-in-button" | "zoom-out-button" | "zoom-dropdown" | "fit-mode-dropdown" | "page-mode-dropdown" | "annotations-button" | "overview-button" | "thumbnails-button" | "search-button" | "annotation-toolbar" | "text-selection-button" | "sticky-note-button" | "highlight-text-button" | "stamp-button" | "line-button" | "shape-button" | "ink-button" | "image-button" | "text-button" | "redaction-button" | "left-sidebar" | "stamp-types-panel" | "redact-panel" | "right-sidebar" | "annotations-panel" | "overview-panel" | "thumbnails-panel" | "search-panel" | "stamp-annotation-popover" | "image-annotation-popover" | "line-annotation-popover" | "shape-annotation-popover" | "ink-annotation-popover" | "free-text-annotation-popover" | "redaction-annotation-popover")[]

Component name(s) to hide.

Returns​

void

Example​

// Hide a single component
viewer.hideComponents('document-upload-screen');

// Hide multiple components
viewer.hideComponents(['save-button', 'print-button']);

initialize​

initialize: (config, container) => Promise<void>

Initializes the PDF Viewer within a specified container element.

Parameters​

config​

ViewerConfig

The configuration options for initializing the viewer.

container​

HTMLElement

The HTML element to contain the viewer.

Returns​

Promise<void>

A promise that resolves when the viewer is initialized.

Example​

await viewer.initialize(config, document.getElementById('viewer-container'));

overrideButtonBehavior​

overrideButtonBehavior: (name, eventName, callback) => void

Overrides the behavior of a specific button.

Parameters​

name​

"toolbar" | "document-upload-screen" | "open-document-button" | "save-button" | "print-button" | "hamburger-menu-button" | "pagination" | "previous-page-button" | "next-page-button" | "zoom-in-button" | "zoom-out-button" | "zoom-dropdown" | "fit-mode-dropdown" | "page-mode-dropdown" | "annotations-button" | "overview-button" | "thumbnails-button" | "search-button" | "annotation-toolbar" | "text-selection-button" | "sticky-note-button" | "highlight-text-button" | "stamp-button" | "line-button" | "shape-button" | "ink-button" | "image-button" | "text-button" | "redaction-button" | "left-sidebar" | "stamp-types-panel" | "redact-panel" | "right-sidebar" | "annotations-panel" | "overview-panel" | "thumbnails-panel" | "search-panel" | "stamp-annotation-popover" | "image-annotation-popover" | "line-annotation-popover" | "shape-annotation-popover" | "ink-annotation-popover" | "free-text-annotation-popover" | "redaction-annotation-popover"

The component name of the button.

eventName​

"click"

The name of the event to listen for.

callback​

() => void

The callback function to execute when the event is triggered.

Returns​

void

Example​

viewer.overrideButtonBehavior('save-button', 'click', () => {
    console.log('Save button clicked');
});

overrideThemeVariables​

overrideThemeVariables: (overrides) => void

Overrides specific CSS variables at the runtime. Overrides take precedence over the theme values.

Parameters​

overrides​

CssVariableOverrides

CSS variable overrides.

Returns​

void

Example​

viewer.overrideThemeVariables({
    '--pdftools-button-primary-bg-color': 'green',
});

plugins​

plugins: Plugins

Groups all the plugins-related API actions. Plugins let users extend the viewer with their own interactive layers and behaviors.

setLocale​

setLocale: (locale) => void

Changes the Viewer’s language at the runtime, and updates all UI elements with new translations.

Parameters​

locale​

LocaleCode | string & Record<never, never>

Language code, one of the available locales in the Viewer. The Viewer comes with built-in translations for English (en), German (de) and French (fr).

Returns​

void

Throws​

Error if the locale doesn’t exist.

Example​

viewer.setLocale('fr');

setTheme​

setTheme: (name) => void

Sets the current theme.

Parameters​

name​

ThemeName

auto, light, dark, or custom theme name. auto follows the OS preference.

Returns​

void

Example​

viewer.setTheme('dark');
viewer.setTheme('auto'); // follows the OS preference

setUser​

setUser: (user) => void

Sets the user.

Parameters​

user​

string

The user identifier.

Returns​

void

showComponents​

showComponents: (names) => void

Shows specified UI components in the Viewer.

Parameters​

names​

"toolbar" | "document-upload-screen" | "open-document-button" | "save-button" | "print-button" | "hamburger-menu-button" | "pagination" | "previous-page-button" | "next-page-button" | "zoom-in-button" | "zoom-out-button" | "zoom-dropdown" | "fit-mode-dropdown" | "page-mode-dropdown" | "annotations-button" | "overview-button" | "thumbnails-button" | "search-button" | "annotation-toolbar" | "text-selection-button" | "sticky-note-button" | "highlight-text-button" | "stamp-button" | "line-button" | "shape-button" | "ink-button" | "image-button" | "text-button" | "redaction-button" | "left-sidebar" | "stamp-types-panel" | "redact-panel" | "right-sidebar" | "annotations-panel" | "overview-panel" | "thumbnails-panel" | "search-panel" | "stamp-annotation-popover" | "image-annotation-popover" | "line-annotation-popover" | "shape-annotation-popover" | "ink-annotation-popover" | "free-text-annotation-popover" | "redaction-annotation-popover" | ("toolbar" | "document-upload-screen" | "open-document-button" | "save-button" | "print-button" | "hamburger-menu-button" | "pagination" | "previous-page-button" | "next-page-button" | "zoom-in-button" | "zoom-out-button" | "zoom-dropdown" | "fit-mode-dropdown" | "page-mode-dropdown" | "annotations-button" | "overview-button" | "thumbnails-button" | "search-button" | "annotation-toolbar" | "text-selection-button" | "sticky-note-button" | "highlight-text-button" | "stamp-button" | "line-button" | "shape-button" | "ink-button" | "image-button" | "text-button" | "redaction-button" | "left-sidebar" | "stamp-types-panel" | "redact-panel" | "right-sidebar" | "annotations-panel" | "overview-panel" | "thumbnails-panel" | "search-panel" | "stamp-annotation-popover" | "image-annotation-popover" | "line-annotation-popover" | "shape-annotation-popover" | "ink-annotation-popover" | "free-text-annotation-popover" | "redaction-annotation-popover")[]

Component name(s) to show.

Returns​

void

Example​

// Show a single component
viewer.showComponents('document-upload-screen');

// Show multiple components
viewer.showComponents(['save-button', 'print-button']);

Methods​

addEventListener()​

addEventListener<K>(eventName, callback): void

Adds an event listener for a specified event.

Type Parameters​

K​

K extends keyof EventMap

Parameters​

eventName​

K

The name of the event to listen for.

callback​

EventMap[K]

The callback function to execute when the event is triggered.

Returns​

void

Inherited from​

EventHandler.addEventListener

removeEventListener()​

removeEventListener<K>(eventName, callback): void

Removes an event listener for a specified event.

Type Parameters​

K​

K extends keyof EventMap

Parameters​

eventName​

K

The name of the event to stop listening for.

callback​

EventMap[K]

The callback function to remove.

Returns​

void

Inherited from​

EventHandler.removeEventListener