Apryse WebViewer Global

Global

Methods

getInstance( [element])

Gets an already existing instance of WebViewer. If only one instance of WebViewer exists on the page, then 'element' is not required, and the function will return the instance of WebViewer. If more than one instance of WebViewer exists, you must pass in the DOM element containing the instance of WebViewer you want to retrieve. This function can be imported directly as a module as well.

Parameters:

Name	Type	Argument	Description
`element`	HTMLElement	<optional>	The DOM element containing the instance of WebViewer you want to retrieve

Returns:

Returns an instance of WebViewer. Returns null if no instances are available.

Type: WebViewerInstance

Example

import { getInstance } from '@pdftron/webviewer'

// After WebViewer has already been constructed
const instance = getInstance();

WebComponent(options, viewerElement)

A function that creates an instance of WebViewer, and embeds it on the HTML page This constructor uses a Web Component to embed WebViewer instead of an Iframe.

Parameters:

Name	Type	Description
`options`	WebViewerOptions
`viewerElement`	HTMLElement

Returns:

A promise resolved with WebViewer instance.

Type: Promise.<WebViewerInstance>

Example

WebViewer.WebComponent({
      licenseKey: 'Insert commercial license key here after purchase'
    }, document.getElementById('viewer'))
      .then(function(instance) {
        const documentViewer = instance.Core.documentViewer;
        const annotationManager = instance.Core.annotationManager;
        // call methods from instance, documentViewer and annotationManager as needed

        // you can also access major namespaces from the instances as follows:
        // const Tools = instance.Core.Tools;
        // const Annotations = instance.Core.Annotations;
      });

WebViewer(options, viewerElement)

A function that creates an instance of WebViewer, and embeds it on the HTML page

Parameters:

Name	Type	Description
`options`	WebViewerOptions
`viewerElement`	HTMLElement

Properties:

Name	Type	Description
`WorkerTypes`	WorkerTypes	The types of workers that can be preloaded in WebViewer
`BackendTypes`	BackendTypes	The types of backend workers .
`WebComponent`	WebComponent	The WebViewer WebComponent constructor, see WebComponent.
`Iframe`	WebViewer	The default WebViewer constructor, which uses an IFrame.

Returns:

A promise resolved with WebViewer instance.

Type: Promise.<WebViewerInstance>

Example

WebViewer({
      licenseKey: 'Insert commercial license key here after purchase'
    }, document.getElementById('viewer'))
      .then(function(instance) {
        const documentViewer = instance.Core.documentViewer;
        const annotationManager = instance.Core.annotationManager;
        // call methods from instance, documentViewer and annotationManager as needed

        // you can also access major namespaces from the instances as follows:
        // const Tools = instance.Core.Tools;
        // const Annotations = instance.Core.Annotations;
      });

Type Definitions

AnnotationStyleTabConfiguration

Type:

object

Properties:

Name	Type	Description
`styleTabs`	Array.<string>	Indicates the available style tabs in the annotation style popup window. See UI.AnnotationStylePopupTabs.
`currentStyleTab`	string	The current tab in the annotation style popup window.

BackendTypes

The types of backend workers. Pass "asm" to force the use of the ASM.js worker, "ems" to force the use of the WebAssembly worker (or ASM.js on non-wasm browsers) or "wasm-threads" to use threaded WebAssembly.

Properties:

Name	Type	Description
`ASM`	string	'asm' Use of ASM.js worker.
`WASM`	string	'ems' Use of the WebAssembly worker (or ASM.js on non-wasm browsers).
`THREADED_WASM`	string	'wasm-threads' Use of threaded WebAssembly worker.

ContainerProperties

Type:

Object

Properties:

Name	Type	Argument	Description
`label`	string	<optional>	The label of the container.
`dataElement`	string	<optional>	The data element of the container.
`placement`	'top' \| 'bottom' \| 'left' \| 'right'	<optional>	A string that determines the placement of the header.
`justifyContent`	'start' \| 'end' \| 'flex-start' \| 'flex-end' \| 'center' \| 'space-between' \| 'space-around' \| 'space-evenly'	<optional>	A string that determines the flex justify content value of the container.
`grow`	number	<optional>	The flex grow value of the container.
`gap`	number	<optional>	The gap between the items in the container.
`position`	'start' \| 'center' \| 'end'	<optional>	A string that determines the position of the container.
`items`	Array.<Object>	<optional>	The items or other containers within the container.
`style`	Object	<optional>	An object that can set the CSS style of the container.

FlyoutItem

Represents an item in a flyout with optional submenu.

Type:

Object

Properties:

Name	Type	Argument	Description
`dataElement`	string	<optional>	A unique string that identifies the flyout item.
`label`	string	<optional>	The label of the flyout item.
`onClick`	function	<optional>	A function that is called when the item is clicked.
`icon`	string	<optional>	Path to an image or base64 data. Can also be the filename of a .svg from the WebViewer icons folder found here: assets/icons/ (i.e. `icon-save` to use `icon-save.svg`).
`children`	Array.<FlyoutItem>	<optional>	An array of objects that represents the items in a sub-menu, has the same properties as the parent items property and can be infinitely nested.

ItemProperties

Item options

Type:

Object

Properties:

Name	Type	Argument	Description
`dataElement`	string	<optional>	The data element of the item.
`title`	string	<optional>	The tooltip of the item.
`disabled`	boolean	<optional>	Whether the item is disabled or not.
`type`	string	<optional>	The type of the item.

ItemType

Description of allowable item types.

Type:

'modularHeader' | 'customButton' | 'statefulButton' | 'groupedItems' | 'ribbonItem' | 'divider' | 'toggleButton' | 'ribbonGroup' | 'toolButton' | 'zoom' | 'flyout' | 'pageControls' | 'presetButton' | 'viewControls' | 'menu' | 'tabPanel'

PanelProperties

Type:

Object

Properties:

Name	Type	Description
`dataElement`	string	The data-element for panel.
`location`	string	Location of the panel in UI, left or right.
`render`	string \| UI.renderCustomPanel	Either the name of a predefined panel to render or a function that returns a panel element.

StyleTab

The style tab in the annotation style popup window. See UI.AnnotationStylePopupTabs for valid style tabs.

Type:

string

TabPanelItemProperties

Type:

Object

Properties:

Name	Type	Argument	Description
`dataElement`	string	<optional>	Unique dataElement name for the panel.
`icon`	string	<optional>	Path to an image or base64 data. Can also be the filename of a .svg from the WebViewer icons folder found here: assets/icons/ (i.e. `icon-save` to use `icon-save.svg`).
`label`	string	<optional>	The label to be displayed for the panel in the Tab Panel.
`render`	function \| string		The function that renders the panel or the name of the preset panel.

TabPanelProperties

Type:

Object

Properties:

Name	Type	Argument	Description
`dataElement`	string		Unique dataElement name for the tab panel.
`panelsList`	Array.<TabPanelItemProperties>		The list of panels to be displayed in the tab panel.
`location`	string	<optional>	The location of the panel. It can be either 'left' or 'right'

WebViewerOptions

Type:

Object

Properties:

Name Type Argument Default Description

path string Path to the WebViewer lib folder

annotationUser string <optional> Guest Name of the user for annotations

config string <optional> URL path to a custom JavaScript for customizations

custom string <optional> A serialized data object that will be passed into the iframe. The data can be accessed in the config file after deserializing. https://docs.apryse.com/documentation/web/guides/config-files/#passing-custom-data

css string <optional> URL path to a custom CSS file for customizations

disabledElements Array.<string> <optional> List of data-elements to be disabled in UI

autoFocusNoteOnAnnotationSelection boolean <optional> true Enables auto focus of input in notes panel on selection of annotation

accessibleMode boolean <optional> false Enable accessibility features. E.g tab page selection and page text in the DOM

enableAnnotations boolean <optional> true Enable annotations feature

enableAzureWorkaround boolean <optional> false Enable workaround of the issue in Azure related to range requests

enableOptimizedWorkers boolean <optional> true If true, WebViewer will use optimized workers if possible. Otherwise, it will use regular workers

enableFilePicker boolean <optional> false Enable file picker feature

enableMeasurement boolean <optional> false Enable measurement tools

enableRedaction boolean <optional> false Enable redaction tool

disableVirtualDisplayMode boolean <optional> false Disable virtual display mode for pages. The virtual display mode allows documents with many pages to be loaded efficiently in continuous scrolling mode. If disabled then single page mode will be used for documents with many pages.

hideDetachedReplies boolean <optional> true Whether to hide detached replies. These are replies that reference a parent annotation which no longer exists.

extension string | Array.<string> <optional> Extension of the document to be loaded. **Multi-tab** must be an array of documents ex: Webviewer({ initialDoc: ['pdf_doc', 'word_doc'], extension: ['pdf', 'docx'] }) OR Webviewer({ initialDoc: ['pdf_doc1', 'pdf_doc2'], extension: ['pdf'] })

filename string <optional> The name of the file that will be used when downloading the document. The extension in the filename will be used as the document type to be loaded (e.g. myfile.docx will treat the file as docx) if no extension option is passed.

forceClientSideInit boolean <optional> false If set to true then when loading a document using WebViewer Server the document will always switch to client only rendering allowing page manipulation and the full API to be used.

loadAsPDF boolean <optional> false If set to true then when loading an office document, it'll be converted to a PDF file. This allow page manipulation and other features to be used

fullAPI boolean <optional> false Enable PDFNet.js library functions

initialDoc string | Array.<string> <optional> URL path to a document to load on startup. If an array of 2 or more documents is passed, webviewer will enable multi-tab mode.

isAdminUser boolean <optional> false Set user permission to admin

isReadOnly boolean <optional> false Set user permission to read-only

licenseKey string <optional> License key for viewing documents. If not set then WebViewer will be in demo mode.

mobileRedirect boolean <optional> false Whether the viewer should redirect to a new window or not when loaded on a mobile device

preloadWorker string <optional> Type of workers to be preloaded. See WorkerTypes to see all available options. You can also include multiple types comma separated e.g. `${Webviewer.WorkerTypes.PDF},${Webviewer.WorkerTypes.OFFICE}`

backendType string <optional> A string representing the "backend type" for rendering PDF and Office documents. Pass "asm" to force the use of the ASM.js worker, "ems" to force the use of the WebAssembly worker (or ASM.js on non-wasm browsers) or "wasm-threads" to use threaded WebAssembly.

useDownloader boolean <optional> A boolean indicating whether Downloader should be used on urls (PDF only). https://docs.apryse.com/documentation/web/guides/usedownloader-option/.

workerTransportPromise

object

Properties

Name	Type	Argument	Description
`pdf`	function	<optional>	Promise that resolves to a PDF worker
`office`	function	<optional>	Promise that resolves to an office worker

webviewerServerURL string <optional> The URL path to the hosted WebViewer Server

singleServerMode boolean <optional> false Set server to ignore health failures. For usage with setups using a single server

disableLogs boolean <optional> false Disables console logs coming from WebViewer, including the version and build numbers

enableViewStateAnnotations boolean <optional> false Enables view state annotations (double clicking a sticky annotation will reset the viewer to the state it was in when the annotation was created)

uiPath string <optional> Path to UI folder to use a different UI or customized UI. Default is'./ui/index.html'.

notesInLeftPanel boolean <optional> false If true then it moves the notes panel into a tab inside the left panel

selectAnnotationOnCreation boolean <optional> false If true then newly added annotations will be selected automatically

highContrastMode boolean <optional> false If true then the UI will use high contrast colors to help with accessibility.

documentXFDFRetriever Core.DocumentViewer.DocumentXFDFRetriever <optional> null The XFDF retriever that will be called when a document is being loaded. The retriever should return a Promise which should resolve to the XFDF string that is going to merged into the document

streaming boolean <optional> A boolean indicating whether to use http or streaming PartRetriever, it is recommended to keep streaming false for better performance. https://docs.apryse.com/documentation/web/guides/streaming-option/.

additionalTranslations

object

An object to add/edit additional translations data for a specific language

Properties

Name Type Description

language string The language code for which you want to add/edit translation data

translations

object

A key/value object with the new/updated translations

Properties

Name	Type	Description
`key`	string	A key value for the new/updated translation. Refer to the lib/ui/i18n folder to find the existing keys in the translation files
`value`	string	A value of the new/updated translation

disableIndexedDB boolean <optional> false If true than the usage of indexedDB will be disabled for webviewer **Multi-tab Only**.

autoExpandOutlines boolean <optional> If set to true, will expand outlines by default.

enableAnnotationNumbering boolean <optional> If set to true, as annotations are imported/created they will each be numbered. Starting at 1, each annotation will be assigned the next greatest available number.

enableOfficeEditing boolean <optional> If true, will load docx files with editing capabilities.

disableMultiViewerComparison boolean <optional> false If true then MultiViewerMode will not show compare overlay annotations.

disableObjectURLBlobs boolean <optional> false If true, then uncompressed JavaScript files will be loaded without instantiating a Blob. If false, then the URL.createObjectUrl API will be used to instantiate an uncompressed Blob instance of the appropriate PDF worker file (Note that this goes against the Content-Security-Policy (CSP) rule "script-src blob:").

ui string <optional> default Type of UI to be used. Accepts `default`|`beta`. Toggle the beta UI to check out the new modular UI.

WorkerTypes

Used to preload workers before a document has been loaded.

Properties:

Name	Type	Description
`PDF`	string	To preload the PDF worker object
`OFFICE`	string	To preload the Office worker object
`LEGACY_OFFICE`	string	To preload the Legacy Office worker object
`CONTENT_EDIT`	string	To preload the content edit worker object
`OFFICE_EDITOR`	string	To preload the office editor worker object
`ALL`	string	To preload all the workers objects

Example

WebViewer({
   preloadWorker: `${WebViewer.WorkerTypes.PDF},${WebViewer.WorkerTypes.OFFICE}`
 })
 .then(function(instance) {
    ...
  });

Global

Methods

getInstance( [element])

Parameters:

Returns:

Example

WebComponent(options, viewerElement)

Parameters:

Returns:

Example

WebViewer(options, viewerElement)

Parameters:

Properties:

Returns:

Example

Type Definitions

AnnotationStyleTabConfiguration

Type:

Properties:

BackendTypes

Properties:

ContainerProperties

Type:

Properties:

FlyoutItem

Type:

Properties:

ItemProperties

Type:

Properties:

ItemType

Type:

PanelProperties

Type:

Properties:

StyleTab

Type:

TabPanelItemProperties

Type:

Properties:

TabPanelProperties

Type:

Properties:

WebViewerOptions

Type:

Properties:

Properties

Properties

Properties

WorkerTypes

Properties:

Example

Search results