Apryse WebViewer

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

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

ItemProperties

Type:
  • Object
Properties:
Name Type Description
dataElement string The data element of the item.
title string The title of the item which appears in a tooltip.
disabled boolean Whether the item is disabled or not.
type string 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'

StyleTab

The style tab in the annotation style popup window. See UI.AnnotationStylePopupTabs for valid style tabs.
Type:
  • string

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 <optional>
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 <optional>
 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) {
    ...
  });