Optional ServeraiServer only
This configuration describes a connection with AI Assistant service which provides AI capabilities directly in the viewer.
Optional StandaloneallowStandalone only
Enables or disables loading of linearized PDFs. When enabled, the SDK takes advantage of linearized (also known as "fast web view") PDFs, allowing portions of the document to be displayed while it's still being downloaded. If enabled, the PDF viewer will render the document progressively, starting with the first pages, while the rest of the file is downloaded in the background. The user interface will be in read-only mode during the download.
A indicator is displayed in the toolbar showing that the document is being downloaded.
Note: Linearized loading requires the server to support byte-range requests and the PDF document to be linearized.
OptionalannotationThis property allows you to change a default list of annotation presets for the NutrientViewer instance. This can be used to customize the main toolbar buttons' behaviour before the application mounts.
When omitted, it will default to NutrientViewer.defaultAnnotationPresets.
OptionalannotationYou can customize the color dropdown of individual annotation properties using this callback. This callback receives the property name associated with the color dropdown and the array of default colors used by NutrientViewer.
With this API you can:
Customize different color dropdowns.
NutrientViewer.load({
annotationToolbarColorPresets: function ({ propertyName }) {
if (propertyName === "font-color") {
return {
presets: [
{
color: new NutrientViewer.Color({ r: 0, g: 0, b: 0 }),
localization: {
id: "brightRed",
defaultMessage: "Bright Red",
},
},
{
color: new NutrientViewer.Color({ r: 100, g: 100, b: 180 }),
localization: {
id: "deepBlue",
defaultMessage: "deepBlue",
},
},
],
};
}
if (propertyName === "stroke-color") {
return {
presets: [
{
color: new NutrientViewer.Color({ r: 0, g: 0, b: 0 }),
localization: {
id: "brightRed",
defaultMessage: "Bright Red",
},
},
{
color: new NutrientViewer.Color({ r: 100, g: 100, b: 180 }),
localization: {
id: "deepBlue",
defaultMessage: "deepBlue",
},
},
],
showColorPicker: false,
};
}
},
//...
});
OptionalannotationYou can customise the items inside the annotation toolbars by using this callback. The callback will receive the annotation which is being created or selected and based on it, you can have different annotation toolbars for different annotations.
You can do the following modifications using this API:
You can also use the hasDesktopLayout to determine if the current UI is being rendered on
mobile or desktop layout mode, which depends on the current viewport width. Based on that,
you can implement different designs for Desktop and Mobile.
This callback gets called every time the annotation toolbar is mounted.
Add a new annotation toolbar item
NutrientViewer.load({
annotationToolbarItems: (annotation, { defaultAnnotationToolbarItems, hasDesktopLayout }) => {
const node = document.createElement('node')
node.innerText = "Custom Item"
const icon = `<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" /></svg>`
return [{
id: "custom",
type: "custom",
node: node,
icon: icon,
className: 'Custom-Node',
onPress: () => alert("Custom item pressed!")
}, ...defaultAnnotationToolbarItems];
}
});
OptionalannotationThis callback is called whenever an annotation gets selected and can be used to define and return an array of ToolItem that will be rendered in a tooltip for the given annotation.
If the callback returns an empty array then NutrientViewer won't show any tooltip for the selected annotation.
NutrientViewer.load({
annotationTooltipCallback: function(annotation) {
if (annotation instanceof NutrientViewer.Annotations.TextAnnotation) {
var toolItem = {
type: 'custom',
title: 'tooltip item for text annotations',
id: 'item-text-tooltip-annotation',
className: 'TooltipItem-Text',
onPress: function () {
console.log(annotation)
}
}
return [toolItem]
} else {
return []
}
}
// ...
});
Optional StandaloneappWhen integrating NutrientViewer for Electron with context isolation enabled, this property needs to be set for the SDK to work. It will be ignored in any other case.
The value of this property needs to match the provided license key's bundle ID.
Optional Serverauthrequired, Server only
The authPayload is the configuration for the JSON Web Token.
Please refer to this guide article for information how to create valid JWTs.
OptionalautoThreshold in pixels determines when the active anchor should automatically close and snap to the origin anchor, effectively closing the shape.
OptionalautoThis property allows you to set the auto save mode, which controls when annotations or form field values get saved.
When using instant: true, the default auto save mode is IMMEDIATE, otherwise it's
INTELLIGENT.
OptionalbaseThis allows you to overwrite the auto-detected URL for the Core worker NutrientViewer assets in Standalone mode. This setting may be necessary when you integrate Nutrient Web SDK in an environment that limits the size of the static assets, like Salesforce.
If your Core assets are served from a different origin, you have to include proper CORS headers: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
This must end with a trailing slash, and the Core assets (nutrient-viewer-[hash].wasm.js
and nutrient-[hash].wasm) must be located in a nutrient-viewer-lib subfolder accessible
from the baseCoreUrl.
Optional Standalonebaseoptional, Standalone only
This allows you to overwrite the auto-detected URL for the processor engine worker NutrientViewer assets in Standalone mode. This setting may be necessary when you integrate Nutrient Web SDK in an environment that limits the size of the static assets, like Salesforce.
If these assets are served from a different origin, you have to include proper CORS headers: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
This must end with a trailing slash, and the assets in the /nutrient-viewer-lib/gdpicture-[hash]/ folder must be directly located
in the folder pointed to by baseProcessorEngineUrl.
OptionalbaseThis allows you to overwrite the auto-detected URL for all NutrientViewer assets. This setting is necessary when you load Nutrient Web SDK JavaScript from a different URL.
If your assets are served from a different origin, you have to include proper CORS headers: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Selector or element where Nutrient Web SDK will be mounted.
The element must have a width and height that's greater than zero. Nutrient Web SDK adapts to the dimensions
of this element. This way, applying responsive rules will work as expected.
The element can be styled using relative values as you would expect it to (CSS media queries are encouraged).
OptionalcontentCallback function to handle font matching during content editing operations.
This callback is invoked when the system detects a font mismatch during content editing and allows you to provide custom font substitution logic. The callback receives the system's proposed font match and metadata about the original font from the PDF.
If the callback returns a font reference, it overrides the system's choice. If it returns
undefined, the system's original match is used.
NutrientViewer.load({
contentEditingFontMatcher: (match, fontInfo, availableFonts) => {
console.log('System matched:', match);
console.log('Original font:', fontInfo.name, 'at', fontInfo.fontSize + 'px');
console.log('Available fonts:', availableFonts.map(f => f.family));
// For Helvetica fonts, try to find a suitable substitute
if (fontInfo.name?.includes("Helvetica")) {
// Look for Arial first, then any sans-serif font
const preferredFonts = ["Arial", "Roboto", "Open Sans", "Lato"];
for (const preferred of preferredFonts) {
const font = availableFonts.find(f => f.family.includes(preferred));
if (font) {
return { font, size: fontInfo.fontSize };
}
}
// Fallback to first available font
if (availableFonts.length > 0) {
return { font: availableFonts[0], size: fontInfo.fontSize };
}
}
return undefined; // Accept system match
}
});
Optional Standalonecustomoptional, Standalone only
This property allows you to provide custom fonts you want to use when loading a Standalone instance.
From the callback defined on each NutrientViewer.Font instance you can return a promise
that resolves to a Blob of the font you want to use. You are free to fetch it in whatever
way you want, and optimize its loading by retrieving it from a cache using the
Cache API, get it
from IndexedDB, etc.
See this guide article to learn more.
Fetch and use a custom set of fonts (Standalone)
const fetcher = name =>
fetch(`https://example.com/${name}`).then(r => {
if (r.status === 200) {
return r.blob();
} else {
throw new Error();
}
});
const customFonts = ["arial.ttf", "helvetica.ttf", "tahoma.ttf"]
.map(font => new NutrientViewer.Font({ name: font, callback: fetcher }));
NutrientViewer.load({
customFonts,
// ...
});
OptionalcustomThis object can include functions to be called when specific entities, like annotations, are being rendered in the viewport, and return additional or replacement DOM content for the entity instance.
Currently only annotation's rendering can be customized using the Annotation key.
If the callback returns null, the instance will be rendered normally.
OptionalcustomObject with callback methods to be called when different elements of the UI are being rendered. Can return DOM content to be appended to them, as well as callback functions to individually process different parts of the element (items) as they're rendered.
UI elements currently supported: sidebars.
//Fully customized sidebar
NutrientViewer.load({
customUI: {
[NutrientViewer.UIElement.Sidebar]: {
[NutrientViewer.SidebarMode.CUSTOM]({ containerNode }) {
// React portals can be used as well.
// Or Vue portals, or any other framework API that allows appending components
// to arbitrary DOM nodes.
// Using vanilla JS, you can just append a node to parentNode.
const div = document.createElement("div");
div.append("My custom sidebar");
containerNode.appendChild(div);
return {
// By returning the same node that was provided, we opt-out of having the node
// appended. If we return a different node, it will be appended to the provided node.
node: containerNode,
};
}
}
}
});
//Partially customized sidebar
NutrientViewer.load({
customUI: {
[NutrientViewer.UIElement.Sidebar]: {
[NutrientViewer.SidebarMode.ANNOTATIONS]({ containerNode }) {
containerNode.style.padding = "0.5rem";
if (!containerNode.querySelector(".MyCustomSidebarComponentHeader")) {
const header = document.createElement("div");
header.classList.add("MyCustomSidebarComponentHeader");
containerNode.prepend(header);
}
return {
node: containerNode,
onRenderItem({ itemContainerNode, item: annotation }) {
const footerAuthor = itemContainerNode.querySelector(".PSPDFKit-Sidebar-Annotations-Footer span");
// Change the format of the footer text by prefixing it with "Creator: " and removing the date
footerAuthor.textContent = `Creator: ${annotation.creatorName}`;
// Add aria label to the annotation icon
const annotationIcon = itemContainerNode.querySelector(".PSPDFKit-Icon");
annotationIcon.setAttribute("aria-label", `Icon for an annotation created by ${annotation.creatorName}.`);
}
};
}
}
}
});
OptionaldateAllows you to customize how to format dates displayed in the UI.
When a date is about to be rendered in specific UI elements, this function is called so the date can be formatted as desired instead of using the default date formatter.
UI elements with customizable dates currently include the annotations sidebar, and comment threads.
This function is called for each date to be formatted, and receives the corresponding Date object, the UI element to which it belongs
(either the annotations sidebar or a comment thread) and the AnnotationsUnion or NutrientViewer.Comment instance
to which it is associated.
NutrientViewer.load({
dateTimeString: ({ dateTime, element }) => {
if(element === NutrientViewer.UIDateTimeElement.ANNOTATIONS_SIDEBAR) {
return new Intl.DateTimeFormat("en-US", {
dateStyle: "short",
timeStyle: "short",
}).format(dateTime);
} else {
return new Intl.DateTimeFormat("en-US", {
dateStyle: "full",
timeStyle: "long",
}).format(dateTime);
}
}
// ...
});
OptionaldisableThis property is used to force the disabling of form rendering and parsing, even if your license would permit it.
OptionaldisableThis property allows you to disable high quality printing, which will print the document in a higher resolution (300dpi) than the default (150dpi). When not explicitly set, high quality printing is disabled for iOS and Android devices on standalone deployments to improve performances.
Optional StandalonedisableOptionaldisableDisable multi selection for annotations. Disabled by default, when enabled it doesn't allow multiple selection of annotations by calling NutrientViewer.Instance.setSelectedAnnotations, or using the multiple annotations selection UI button.
OptionaldisableBy default, Nutrient Web SDK will initialize using PDF Open Parameters that are supported by our viewer. This option can be used if you want to opt-out from this behavior.
Setting a custom ViewState will overwrite these defaults. You can use NutrientViewer.viewStateFromOpenParameters to manually extract those values.
Currently, we only support the page parameter.
OptionaldisableWhen this property is set to true, text in the document can not be highlighted.
Optional StandalonedisableOptional
When disableWebAssemblyStreaming is set to true, we force disable WebAssembly streaming
instantiation. More info about this optimization can be found at:
https://www.nutrient.io/blog/2018/optimize-webassembly-startup-performance/#streaming-instantiation-combining-download-and-instantiation-2dc410
Optional Standalonedocumentrequired, Standalone only
The URL to a supported document or its content as ArrayBuffer.
NutrientViewer supports the following type of documents:
Note that all the formats except for PDF require a dedicated license. Please contact sales to find out more about this.
When providing a URL keep in mind that Cross-Origin Resource Sharing (CORS) apply.
OptionaldocumentThis property allows you to set an initial list of document editor footer items for the NutrientViewer instance.
When omitted, it will default to NutrientViewer.defaultDocumentEditorFooterItems.
const footerItems = NutrientViewer.defaultDocumentEditorFooterItems;
footerItems.reverse();
NutrientViewer.load({ documentEditorFooterItems: footerItems, ... });
NutrientViewer.Error will throw an error when the supplied items array is not valid. This will also throw an error if your license does not include the Document Editor feature.
OptionaldocumentThis property allows you to set an initial list of document editor toolbar items for the NutrientViewer instance.
When omitted, it will default to NutrientViewer.defaultDocumentEditorToolbarItems.
const toolbarItems = NutrientViewer.defaultDocumentEditorToolbarItems;
toolbarItems.reverse();
NutrientViewer.load({ documentEditorToolbarItems: toolbarItems, ... });
will throw an error when the supplied items array is not valid. This will also throw an error if your license does not include the Document Editor feature.
Optional Serverdocumentrequired, Server only
The document ID for the document that should be displayed. You can create a document via the Nutrient Document Engine API.
Please refer to the Server API documentation for a guide on how to create valid documents.
Optional Standalonedynamicoptional, Standalone only
This property allows you to provide a URL to JSON file with fonts available for downloading, associated with specific ranges of characters and font variations.
The downloadable font files need to be in the same scope as the JSON file.
The JSON file needs to be in the following format:
type FontName = {
// The full name of the font.
fullName: string;
// The next four properties are from the `name` table in the font.
// See https://learn.microsoft.com/en-us/typography/opentype/spec/name#name-ids
// Name ID 1: Font Family name
family?: string;
// Name ID 2: Font Subfamily name
subfamily?: string;
// Name ID 16: Typographic Family name
typographicFamily?: string;
// Name ID 17: Typographic Subfamily name
typographicSubfamily?: staring;
}
// Represents a font that can be downloaded.
// filePath + faceIndex should be unique.
type Font = {
name: FontName;
// Path to the font file.
filePath: string;
// If the font file is a collection, this specifies the face index.
faceIndex?: int;
// A list of all code points supported by the font.
// This can either be a range ([number, number]) or a single codepoint.
codePoints: [[number, number] | number];
// The unicode ranges from the OS/2 table: https://learn.microsoft.com/en-us/typography/opentype/spec/os2#ur
unicodeRanges?: [4 numbers];
// A sha1 of the font file. For collections, this is a SHA of the whole file, not a single font.
sha1: string;
// Specifies true if the font is allowed to be embedded, false otherwise.
// Should only be used to make a decision to download the font, proper licensing handling should be done with the downloaded font.
allowedToEmbed: boolean;
// The boldness of the font. See https://learn.microsoft.com/en-us/typography/opentype/spec/os2#wtc
weight?: number;
}
type DynamicFonts = {
availableFonts: [Font];
v: 1;
}
OptionaleditableThis property defines all annotation types that a user is able to modify. If it's not set, the user is allowed to select, create, edit or delete every annotation type. By allowing only certain annotation types for modification, you can be sure that there is no annotation type that gets introduced in the future that your user is then able to modify.
Optional StandaloneelectronWhen integrating NutrientViewer for Electron with context isolation enabled, this property needs to be set for the SDK to work. It will be ignored in any other case.
The value of this property needs to match the provided license key's bundle ID.
Use Configuration.appName and Configuration.productId instead.
OptionalelectronicDefines specific configuration options related to the electronic signatures feature.
The creationModes key accepts an array of NutrientViewer.ElectronicSignatureCreationMode values that
define which signature creation modes and in which order will be offered as part of the Electronic Signatures
UI. It defaults to NutrientViewer.defaultElectronicSignatureCreationModes.
The fonts key accepts an array of Font instances that specify the name of fonts to be used as part
of the 'Type' signing tab. It defaults to NutrientViewer.defaultSigningFonts.
You can specify a subset of our built-in signing fonts or specify entirely custom ones.
For using custom fonts, you need to load a custom style sheet (via Configuration#styleSheets)
in which you can either specify @font-face rules for the custom font or @import other style sheets containing the fonts loading rules.
As an example of the latter, if we would wish to use the Cookie font from Google Fonts you could use the following style sheet:
@import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap');
And then pass an new NutrientViewer.Font({ name: 'Cookie' }) as part of the fonts array of
Configuration#electronicSignatures.
Optional StandaloneenableStandalone only
By default, only links that are represented as valid link annotations in the PDF will be enabled.
When enableAutomaticLinkExtraction is set to true, the text of the PDF will be scanned and
links will automatically be created.
To enable automatic link extraction on a Nutrient Document Engine (server-backed) deployment, check out: https://www.nutrient.io/guides/web/pspdfkit-server/configuration/overview/
OptionalenableEnable actions like cut, copy, paste and duplicate for annotations using keyboard shortcuts Cmd/Ctrl+X, Cmd/Ctrl+C, Cmd/Ctrl+V and Cmd/Ctrl+D respectively.
OptionalenableEnable actions history for annotations. Disabled by default, when enabled it allows to undo and redo annotation actions consecutively by calling NutrientViewer.Instance#history.undo or NutrientViewer.Instance#history.redo, or using the undo and redo UI buttons, which can be optionally enabled:
Actions history tracking can be enabled and disabled at any moment by calling NutrientViewer.Instance#history.enable or NutrientViewer.Instance#history.disable.
OptionalenableThis call back defines which text annotations should be treated as rich text annotation.
By default, all the text annotations are treated as plain text annotations, which means that
when you edit them, you will see the plain text editor. You can change this behavior by
returning true for the text annotations that you want to be treated as rich text annotations.
OptionalenableWhen you're using a ServiceWorker, set this flag to true to be able to use Nutrient Web SDK
offline. Due to a browser bug, loading CSS files would bypass service workers and we therefore
load all CSS files via XHR and embed the content. Instead of loading files like SVGs by using
url in your CSS, please add them as base64, otherwise these requests would bypass the service
worker as well.
OptionalfontAllows specifying fonts that you would like to substitute in a document and the fonts you would like to use for that substitution.
Patterns are matched using the following rules:
* matches multiple characters.? matches a single character.Ordering matters - As names could match multiple patterns, it's important to note that the order of the patterns matters.
Case-insensitive - Both the pattern and the target name are case-insensitive.
OptionalformList of signature form fields names that are not allowed to store Ink Signatures.
When a signature form field name is on this list, any new ink signature for this field that is created via the UI won't be stored.
OptionalformsStandalone only
Allows configuring some behavior around forms in the viewer.
OptionalheadlessLoads Nutrient Web SDK in Headless mode i.e. without a UI. Some UI-specific APIs, like the Toolbars API, are not available in this mode and, when used, will throw an error.
Optional StandalonehttpStandalone only
Custom HTTP headers to include when fetching the document from a URL.
This property is only used when document is a string URL (not an ArrayBuffer).
The headers will be applied to both the initial document fetch and any subsequent range requests when using linearized loading.
OptionalinitialThis property allows you to set an initial viewing state for the NutrientViewer instance.
This can be used to customize behavior before the application mounts (e.g Scroll to a specific page or use the SINGLE_PAGE mode)
It will default to a view state with its default properties (see ViewState).
If the initial view state is invalid (for example, when you define a page index that does not
exist), the method will fall back to the default value for the invalid property. This means when
you set the initial currentPageIndex to 5 but the document only has three pages, NutrientViewer will
start on the first page but will still apply other rules defined in this initial view state.
OptionalinlineYou can customize the items inside the inline text selection toolbar that is rendered every time some text is selected on the document. The callback will receive the default items of the inline toolbar and the text that is currently selected NutrientViewer.TextSelection
You can do the following modifications using this API:
icon of the a default toolbar item.You can also use the hasDesktopLayout to determine if the current UI is being rendered on
mobile or desktop layout mode, which depends on the current viewport width. Based on that,
you can implement different designs for Desktop and Mobile.
This callback gets called every time the inline text selection toolbar is mounted.
Add a custom button and a custom node to the toolbar in desktop layout.
NutrientViewer.load({
inlineTextSelectionToolbarItems: ({ defaultItems, hasDesktopLayout }, selection) => {
console.log(selection)
if (hasDesktopLayout) {
const node = document.createElement("div");
node.innerText = "Custom Item";
return [
...defaultItems,
{
type: "custom",
id: "custom-1",
node: node,
className: "Custom-Node",
onPress: () => alert("Custom node pressed!"),
},
{
type: "custom",
id: "custom-2",
title: "custom-button-2",
onPress: () => alert("Custom item pressed!"),
},
];
}
return defaultItems
},
})
OptionalinlineStandalone only
By default, we load the required Web Workers inline. That means that the Web Workers are loaded as a
blob URL, which allows us to load a Worker from other domains. However, this might interfere with strict CSP policies like worker-src: 'self'.
In that case, you can disable the inline loading of the Web Workers by setting this option to false.
Note: This option is currently not supported in Salesforce environment.
Optional Serverinstantrequired, Server only
Nutrient Instant is a real-time collaboration platform that enables your users to annotate documents using NutrientViewer across iOS, Android and their browser simultaneously. Annotations synchronized using Nutrient Instant are pushed in real-time to every connected device.
All document editing features, such as text annotations, ink drawing or text highlighting, are instantly saved and propagated across all connected devices.
When this flag is set to true, different parts of the API will also be enabled, for example:
NutrientViewer.Instance#connectedClients.
This value does not have a default. You either need to define instant: true or
instant: false in your NutrientViewer configuration.
Optional StandaloneinstantStandalone only
Instant JSON can be used to instantiate a viewer with a diff that is applied to the raw PDF. This format can be used to store annotation changes on your server and conveniently instantiate the viewer with the same content at a later time.
Instead of storing the updated PDF, this serialization only contains a diff that is applied on top of the existing PDF and thus allows you to cache the PDF and avoid transferring a potentially large PDF all the time.
You can export this format from a standalone instance by using Instance#exportInstantJSON.
annotations will follow the Instant Annotation JSON format specification.
NutrientViewer.load({
instantJSON: {
format: 'https://pspdfkit.com/instant-json/v1',
skippedPdfObjectIds: [1],
annotations: [
{ id: 1, pdfObjectId: 1, type: 'pspdfkit/text', content: 'Hello World', ...},
{ id: -1, type: 'pspdfkit/text', content: 'Hello Universe', ...},
],
},
// ...
});
@standalone
OptionalisBy implementing this callback you have a fine grained control over which annotations are read-only.
This callback will receive the Annotation a user wants to modify and by returning true or
false you can define if the annotation should be read-only (false) or modifiable (true).
This API will not disable ToolbarButtons for you, but will not allow the user to create a new Annotation with the UI.
Only allow the modification of annotations from the same author
NutrientViewer.load({
isEditableAnnotation: function(annotation) {
return annotation.creatorName === myCurrentUser.name;
},
});
Do not allow changing the value of a specific form field
NutrientViewer.load({
isEditableAnnotation: function(annotation) {
// Check if the annotation is associated with a specific form field
if (
annotation instanceof NutrientViewer.Annotations.WidgetAnnotation &&
annotation.formFieldName === "MyFormField"
) {
// If it is, disallow editing it
return false;
}
// Otherwise, allow editing
return true;
},
});
OptionalisBy implementing this callback you have a fine grained control over which comments are read-only.
This callback will receive the Comment a user wants to modify and by returning true or
false you can define if the comment should be read-only (false) or modifiable (true).
To learn more check this guide article.
Optional StandalonelicenseStandalone only
Nutrient Web SDK license key from https://my.nutrient.io/.
If not provided, the instance will run in trial mode for a limited time and then request the user to visit https://www.nutrient.io/try/ to request a trial license.
OptionallocaleThe initial locale (language) for the application.
All the available locales are defined in NutrientViewer.I18n.locales.
When a locale is not provided Nutrient Web SDK tries to autodetect the locale using window.navigator.language.
If the detected locale is not supported then the en locale is used instead.
OptionalmaxThis property allows you to configure the maximum zoom level. The largest zoom level at a given time will be calculated based on the page proportions and this option. This is not necessarily a hard limit. For example, in order to satisfy the 'fit to width' and 'fit to page' zoom modes, the actual maximum zoom may be higher.
When omitted, the default is 10.
Optional Servermaxoptional, Server only
The maximum number of users that will be shown in the suggestion dropdown when mentioning a user in a comment.
OptionalmaxDefines how often the password modal is presented after a wrong password has been entered. By default, there won't be a limit for a regular Nutrient Web SDK installation.
When running in the headless mode, this option is ignored as we don't have an interface where
we could request a password (This is the same as setting maxPasswordRetries to 0).
OptionalmeasurementSet the precision value of all the newly created measurement annotations.
OptionalmeasurementSet the default value of scale for all newly created measurement annotations.
OptionalmeasurementAllows the user to toggle the snapping behavior while creation of measurement annotations. The snapping points are the points are a combination of endpoints, midpoints and intersections.
OptionalmeasurementOptional Servermentionableoptional, Server only
A list of users that can be mentioned in comments.
NutrientViewer.load({ mentionableUsers: [
{ id: "1", name: "John Doe", displayName: "John", avatar: "https://example.com/avatar.png", description: "john.doe@gmail.com" },
{ id: "2", name: "Jane Doe", displayName: "Jane", avatar: "https://example.com/avatar.png", description: "jane.doe@gmail.com" },
{ id: "3", name: "John Smith", displayName: "John", avatar: "https://example.com/avatar.png", description: "john.smith@gmail.com" },
] });
@server
OptionalminThis property allows you to configure the minimum zoom level. The smallest zoom level at a given time will be calculated based on the page proportions and this option. This is not necessarily a hard limit. For example, in order to zoom out to show the entire page, the actual minimum zoom may be lower.
When omitted, the default is 0.5.
OptionalonAllows to modify the default behavior when annotations are resized using the selection corner handles by returning an object. This provides more control over whether annotations should keep their aspect ratio when resized, for example.
OptionalonYou can programmatically modify the properties of the comment just before it is created.
OptionalonBy default, all the URLs on which the user clicks explicitly open as expected but the URLs which open due to a result of JavaScript action are not opened due to security reasons.
You can override this behaviour using this callback. If this callback returns true, the URL will open.
Optionalonoptional
You can programmatically modify the properties of the widget annotation and the associated form field just before it is created via the Form Creator UI.
Optional StandaloneoverrideOverrides the allocable maximum memory when using Nutrient Web SDK Standalone. Only set this if you know that your users have web browsers with enough memory available.
This can improve rendering of documents with large images.
OptionalpasswordIf set, it will try to unlock the PDF with the provided password when loading it. PDFs which do not require a password won't open if this property is set.
OptionalpopulateLoads Ink Signatures when the UI displays them for the first time.
Ink Signatures are special Ink Annotations whose pageIndex and boundingBox are defined at creation time.
They can be converted to serializable objects with NutrientViewer.Annotations.toSerializableObject and stored as JSON using their InstantJSON format.
Serialized JSON annotations can be deserialized with JSON.parse and then converted to annotations with NutrientViewer.Annotations.fromSerializableObject.
A Promise that resolves to a NutrientViewer.Immutable.List of InkAnnotation that describe signatures.
OptionalpopulateLoads signatures when the UI displays them for the first time.
Signatures can be added as special Ink Annotations or Image Annotations whose pageIndex and boundingBox are defined at creation time.
They can be converted to serializable objects with NutrientViewer.Annotations.toSerializableObject and stored as JSON using their InstantJSON format.
Serialized JSON annotations can be deserialized with JSON.parse and then converted to annotations with NutrientViewer.Annotations.fromSerializableObject.
A Promise that resolves to a NutrientViewer.Immutable.List of InkAnnotation or ImageAnnotation that describe signatures.
OptionalpreventWhen copying of text is disabled, it's still possible to select text but copying either using the shortcut or a context menu will have no effect.
This is implemented internally by listening to the copy event and prevent the default
implementation.
Please note that preventing text copying only provides limited security since the text will still be transmitted to the client.
OptionalprintThis property allows you to set the NutrientViewer.PrintMode to use.
OptionalprintAllows to set different printing options like mode and printing quality.
Optionalmode?: "DOM" | "EXPORT_PDF"NutrientViewer.PrintMode mode to use for printing.
Optionalquality?: "LOW" | "MEDIUM" | "HIGH"NutrientViewer.PrintQuality The option to control the quality of the printing.
Optional Standaloneprocessoroptional, Standalone only
Document processing can be a time-consuming task, especially when working with large documents. In order to improve the user experience it is possible to choose between two different processor engines with different optimizations applied: either one with a smaller bundle size (the default), but slower overall performance, or one with a larger bundle size, but faster processing time.
Either case it's recommended to enable asset compression on your Server to improve loading time.
Optional Standaloneproductoptional, Standalone only
Allows specifying the environment in which the SDK is running.
OptionalrenderThis callback is called whenever a page is rendered or printed (only for NutrientViewer.PrintMode.DOM). You can use it to render watermarks on the page.
NutrientViewer.load({
renderPageCallback: function(ctx, pageIndex, pageSize) {
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(pageSize.width, pageSize.height);
ctx.stroke();
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText(
`This is page ${pageIndex + 1}`,
pageSize.width / 2,
pageSize.height / 2
);
}
// ...
});
OptionalrestrictThis property allows you to restrict the movement of annotations to the page boundary. This is set to true by default.
If you want to disable this, you can set it to false.
OptionalserverThis allows you to overwrite the auto-detected Nutrient Document Engine URL. This setting is necessary when your Nutrient Document Engine is located under a different URL.
Optional ServersessionServer only
The session token used to authenticate Web Viewer session with DWS Viewer API or Document Engine.
OptionalstampThis property allows you to set an initial list of stamp and image annotation templates for the NutrientViewer instance. This can be used to customize the list of available stamp and image annotation templates that will be available in the stamps picker UI before the application mounts.
When omitted, it will default to NutrientViewer.defaultStampAnnotationTemplates.
const stampAnnotationTemplates = NutrientViewer.defaultStampAnnotationTemplates
const stampAnnotationTemplates.push(new NutrientViewer.Annotations.StampAnnotation({
stampType: "Custom",
title: "My custom text",
boundingBox: new NutrientViewer.Geometry.Rect({
left: 0,
top: 0,
width: 300,
height: 100
})
}));
NutrientViewer.load({ stampAnnotationTemplates, ... });
Optional StandalonestandaloneStandalone only
Nutrient Web SDK uses an object pool to keep disposed instances in memory for fast reuse. Since this process can be memory inefficient, by default we only keep one instance in memory.
With this configuration option you can tune in the number of instances to keep in memory, or disable object pooling by setting this parameter to 0.
More about this feature: https://www.nutrient.io/blog/2018/optimize-webassembly-startup-performance/#object-pooling-caching-instances-d548cb
OptionalstyleThis will load your custom CSS as a <link rel="stylesheet"> inside the NutrientViewer component. This
is necessary to isolate styling of the viewer from the outside application and avoid external
stylesheets overwriting important viewer attributes.
An array is allowed to load multiple stylesheets. The order in the array will also be the order in which the stylesheets get loaded.
The array will be copied by us on start up time, which means that you can not mutate it after the viewer has started.
More information on how to style Nutrient Web SDK can be found in our guides.
OptionalthemeThis property allows you to set theme to use for the UI. See NutrientViewer.Theme
Note: You can customize the appearance of the UI using our public CSS classes. Please refer to this guide article for information on how to customize the appearance.
OptionaltileThis property allows you to change the size of the tiles used to render the document, in pixels. The bigger the tile, the fewer requests is made, but each tile will take longer to render.
This is useful for situations where you want to reduce the number of requests made to the server.
By default, the tile size is set to 512px in Nutrient Document Engine (server-backed) deployment, and 1536px in Standalone deployment.
OptionaltoolbarThis property allows you to set an initial list of toolbar items for the NutrientViewer instance. This can be used to customize the main toolbar before the application mounts.
When omitted, it will default to NutrientViewer.defaultToolbarItems.
OptionaltoolbarThis property allows you to configure where the toolbar is placed. If nothing is configured, it will default to the top.
Optional Standalonetrustedrequired, Standalone only
By implementing this callback you have a fine grained control over which certificates are going to be used for digital signatures validation.
The callback must return an Array of ArrayBuffer (DER) or string (PEM)
containing X.509 certificates.
See this guide article to learn more.
OptionaluiIn-place UI customization API for the supported components using slots. Refer to guide to get started.
Can be used to:
See the list of supported slots https://www.nutrient.io/guides/web/user-interface/ui-customization/supported-slots/|here.
NutrientViewer.load({
ui: {
commentThread: {
header: (instance, id) => {
const header = document.createElement('div');
header.innerText = 'Custom Comment Thread Header';
return {
render: (params) => header,
onMount: (id) => {
console.log(`Comment thread header mounted`);
},
onUnmount: (id) => {
console.log(`Comment thread header unmounted`);
}
};
}
}
}
});
OptionaluseOptional StandaloneXFDFStandalone only
XFDF can be used to instantiate a viewer with a diff that is applied to the raw PDF. This format can be used to store annotation and form fields changes on your server and conveniently instantiate the viewer with the same content at a later time.
Instead of storing the updated PDF, this serialization only contains a diff that is applied on top of the existing PDF and thus allows you to cache the PDF and avoid transferring a potentially large PDF all the time.
You can export this format from a standalone instance by using Instance#exportXFDF.
Optional StandaloneXFDFStandalone only
Whether the imported XFDF should ignore the page rotation.
The default import behavior will take the page rotation into account.
This is useful when you have PDF pages that look the same, but have different underlying page rotations. Use in connection with Instance#exportXFDF ignorePageRotation parameter.
Optional StandaloneXFDFStandalone only
Whether the annotations embedded in the PDF document should be kept instead of replaced importing XFDF.
The default import behavior will replace all annotations.
Optional StandaloneXFDFStandalone only
Whether the imported XFDF should have rich text annotations or not.
The default import behavior will convert rich text annotations to plain text annotations.
If set to true, rich text annotations will be supported and plain text annotations
will be converted to rich text annotations.
Replace With
export interface Configuration extends SharedConfiguration, Partial<Omit<ServerConfiguration, keyof SharedConfiguration> & Omit<StandaloneConfiguration, keyof SharedConfiguration>>{}