Namespace: NutrientViewer

NutrientViewer

The main NutrientViewer namespace is exported in the global NutrientViewer.

Classes

Namespaces

Members

Methods

Type Definitions




Members

(static, constant) AIComparisonOperationType

Describes types of AI operations for document comparison. These operations can be used with ComparisonOperationType.AI.

Properties:
Name Type Description
ANALYZE NutrientViewer.AIComparisonOperationType

Analyze and summarize differences between documents.

TAG NutrientViewer.AIComparisonOperationType

Tag changes with specified categories.

(static, constant) Alignment

Specifies the alignment of an UI element relative to its parent container.

Properties:
Name Type Description
START NutrientViewer.Alignment
END NutrientViewer.Alignment

(static, readonly) AnnotationsWillChangeReason

Indicates the reason why NutrientViewer.AnnotationsWillChangeEvent was emitted.

(static, constant) AutoSaveMode

When working with annotations and form field values, there are multiple options when the data can get saved. The AutoSaveMode controls this behavior.

Properties:
Name Type Description
IMMEDIATE NutrientViewer.AutoSaveMode

Saves immediately whenever an attribute of the annotation changed, or whenever a form field value got updated.

INTELLIGENT NutrientViewer.AutoSaveMode

Saves annotations automatically, when the user finishes editing an annotation. For form fields, this behaves like NutrientViewer.AutoSaveMode.IMMEDIATE.

DISABLED NutrientViewer.AutoSaveMode

Never saves annotations or form field values automatically. Annotations and form field values can still be saved via NutrientViewer.Instance#save or NutrientViewer.Instance#saveFormFieldValues

In this mode, document signatures validation information will not be automatically updated if the document is modified, until changes are saved.

(static, constant) BlendMode

Represents one of the available blend modes for highlight and ink annotations.

Properties:
Name Type Description
normal NutrientViewer.BlendMode
multiply NutrientViewer.BlendMode
screen NutrientViewer.BlendMode
overlay NutrientViewer.BlendMode
darken NutrientViewer.BlendMode
lighten NutrientViewer.BlendMode
colorDodge NutrientViewer.BlendMode
colorBurn NutrientViewer.BlendMode
hardLight NutrientViewer.BlendMode
softLight NutrientViewer.BlendMode
difference NutrientViewer.BlendMode
exclusion NutrientViewer.BlendMode

(static, constant) BorderStyle

Represents one of the available border styles for the widget annotations.

Properties:
Name Type Description
solid NutrientViewer.BorderStyle
dashed NutrientViewer.BorderStyle
beveled NutrientViewer.BorderStyle
inset NutrientViewer.BorderStyle
underline NutrientViewer.BorderStyle

(static) Callout: object

Callout arrow line properties.

Properties of the arrow line attached to a callout (text) annotation.

Type:
  • object
Properties:
Name Type Attributes Description
start NutrientViewer.Geometry.Point <nullable>

Starting point of the arrow line.

knee NutrientViewer.Geometry.Point <nullable>

Knee point of the arrow line.

end NutrientViewer.Geometry.Point <nullable>

Ending point of the arrow line.

cap NutrientViewer.LineCap <nullable>

The line cap style.

innerRectInset NutrientViewer.Geometry.Inset <nullable>

The inner rectangle inset.

(static, constant) CertificateChainValidationStatus

The different possible validation states of the certificate chain.

Properties:
Name Type Description
ok NutrientViewer.CertificateChainValidationStatus

The certificate chain validates correctly.

ok_but_self_signed NutrientViewer.CertificateChainValidationStatus

The certificate chain contains a self-signed certificate.

ok_but_could_not_check_revocation NutrientViewer.CertificateChainValidationStatus

Revocation check network error. Either due to invalid server URL or network timeout. The certificate is valid with a warning.

untrusted NutrientViewer.CertificateChainValidationStatus

The certificate chain contains a certificate that has been classified as "untrusted".

The certificate date is correct, but the identity is unknown because it has not been included in the list of trusted certificates and none of its parents are trusted certificates.

expired NutrientViewer.CertificateChainValidationStatus

The certificate used to sign the document has expired now. Note that the certificate may be valid at the time the document was signed, which is not checked.

not_yet_valid NutrientViewer.CertificateChainValidationStatus

The certificate used to sign the document is not valid yet.

invalid NutrientViewer.CertificateChainValidationStatus

The certificate is not valid.

revoked NutrientViewer.CertificateChainValidationStatus

The certificate has been revoked.

failed_to_retrieve_signature_contents NutrientViewer.CertificateChainValidationStatus

Could not fetch the contents of the signature.

general_validation_problem NutrientViewer.CertificateChainValidationStatus

An unknown problem happened when the certificate trust chain was validated.

Between the possible reasons for this could be that the signature is malformed, the certificate chain is too long and other unknown conditions.

(static, constant) CommentDisplay

A specific comment display mode that will always be applied when the visible part of the document contains comments.

In mobile devices, comments are always displayed in a drawer a the bottom of the viewport

Properties:
Name Type Description
FITTING NutrientViewer.CommentDisplay

Comments are displayed in a dialog or floating depending on the available viewport space.

POPOVER NutrientViewer.CommentDisplay

Comments are displayed in a popover dialog next to their reference annotation marker.

FLOATING NutrientViewer.CommentDisplay

Comments are displayed floating next to the page side, at the same height as their reference annotation marker, except when ViewState#zoom is set to ZoomeMode#FIT_TO_WIDTH, in which case they are displayed in a popover dialog instead.

(static, constant) ComparisonOperationType

Describes types for document comparison operation.

Properties:
Name Type Description
TEXT NutrientViewer.ComparisonOperationType

Compare the text of documents.

AI NutrientViewer.ComparisonOperationType

Compare documents using AI-powered analysis.

(static, constant) Conformance

Represents one of the available conformance types for PDF/A documents.

Properties:
Name Type Description
PDFA_1A NutrientViewer.Conformance
PDFA_1B NutrientViewer.Conformance
PDFA_2A NutrientViewer.Conformance
PDFA_2U NutrientViewer.Conformance
PDFA_2B NutrientViewer.Conformance
PDFA_3A NutrientViewer.Conformance
PDFA_3U NutrientViewer.Conformance
PDFA_3B NutrientViewer.Conformance
PDFA_4 NutrientViewer.Conformance
PDFA_4E NutrientViewer.Conformance
PDFA_4F NutrientViewer.Conformance

(static, constant) DocumentComparisonSourceType

Represents one of the available document sources to be used in document comparison.

Properties:
Name Type Description
USE_OPEN_DOCUMENT NutrientViewer.DocumentComparisonSourceType

use the currently open document as source.

USE_FILE_DIALOG NutrientViewer.DocumentComparisonSourceType

show the file dialog for the user to choose the source document from the local file system.

(static, constant) DocumentIntegrityStatus

The different signature validation states the document can be in.

Properties:
Name Type Description
ok NutrientViewer.DocumentIntegrityStatus

The part of the document covered by the signature has not been modified.

tampered_document NutrientViewer.DocumentIntegrityStatus

The part of the document covered by the signature has been modified.

failed_to_retrieve_signature_contents NutrientViewer.DocumentIntegrityStatus

The signature /Contents couldn't be parsed.

failed_to_retrieve_byterange NutrientViewer.DocumentIntegrityStatus

The signature /ByteRange couldn't be parsed.

failed_to_compute_digest NutrientViewer.DocumentIntegrityStatus

The digest of the document couldn't be calculated.

failed_retrieve_signing_certificate NutrientViewer.DocumentIntegrityStatus

The signing certificate from the signature contents couldn't be extracted.

failed_retrieve_public_key NutrientViewer.DocumentIntegrityStatus

The public key from the signature contents couldn't be extracted.

failed_encryption_padding NutrientViewer.DocumentIntegrityStatus

The encryption padding from the signature contents couldn't be extracted.

tampered_or_invalid_timestamp NutrientViewer.DocumentIntegrityStatus

The digital signature contains a timestamp that is not valid or the timestamped data was tampered with.

general_failure NutrientViewer.DocumentIntegrityStatus

An unspecific error.

(static, constant) DocumentValidationStatus

The different possible validation states of the document. Based on the validation of the digital signatures it contains.

Properties:
Name Type Description
valid NutrientViewer.DocumentValidationStatus

All of the signatures of the document are valid, that is, it should be shown with a green checkmark or similar in the UI.

warning NutrientViewer.DocumentValidationStatus

All of the signatures of the document are valid with concerns, that is, it should be shown with a yellow warning or similar in the UI.

error NutrientViewer.DocumentValidationStatus

At least one signature of the document is invalid, that is, it should be shown with a red cross of similar in the UI.

not_signed NutrientViewer.DocumentValidationStatus

The document does not contain digital signatures.

(static, constant) ElectronicSignatureCreationMode

Represents one of the available signing methods for adding new electronic signatures using the UI.

Properties:
Name Type Description
DRAW NutrientViewer.ElectronicSignatureCreationMode

UI in which users draw a signature.

IMAGE NutrientViewer.ElectronicSignatureCreationMode

UI in which users pick or drag an image to use that as the signature.

TYPE NutrientViewer.ElectronicSignatureCreationMode

UI in which users can type a text and generate an image signature from it.

(static) HistoryChangeEvent: NutrientViewer.HistoryChangeEvent

HistoryChangeEvent

Type:
Properties:
Name Type Attributes Description
action string <nullable>

Type of history change.

before AnnotationsUnion <nullable>

Annotation state before the action.

after AnnotationsUnion <nullable>

Annotation state after the action.

(static) HistoryWillChangeEvent: NutrientViewer.HistoryWillChangeEvent

HistoryWillChangeEvent

Type:
Properties:
Name Type Description
type string

Type of action (create, update or delete).

annotation NutrientViewer.Annotations.Annotation

Annotation state being added to the history.

preventDefault function

Callback to prevent the change from being tracked.

(static, constant) InteractionMode

Controls the current interaction mode in the viewer.

Properties:
Name Type Description
TEXT_HIGHLIGHTER NutrientViewer.InteractionMode

When this mode is activated, the creation of new highlight annotations will be enabled and the text will be highlighted as it's selected.

INK NutrientViewer.InteractionMode

When this mode is activated, the creation of new ink annotations will be enabled. This transforms the page to a drawable canvas and an annotation is created while drawing on it. If properties (e.g. color) or the page index changes, a new annotation is created.

INK_SIGNATURE NutrientViewer.InteractionMode

Deprecated: When this mode is activated, the creation of new ink signatures will be enabled. This this shows a dialog where it is possible to select an existing ink signature or create a new one and store it.

This interaction mode is deprecated and it will act just like SIGNATURE.

SIGNATURE NutrientViewer.InteractionMode

When this mode is activated, the creation of new signatures will be enabled. This shows a dialog where it is possible to select an existing signature or create a new one and potentially save it.

STAMP_PICKER NutrientViewer.InteractionMode

When this mode is activated, the stamp annotation templates picker modal UI will be shown. Once a template is selected, the new annotation is configured and created
in the document.

STAMP_CUSTOM NutrientViewer.InteractionMode

When this mode is activated, the custom stamp annotation template editor modal UI will be shown. Once a the custom template is edited, the new custom stamp annotation will be created in the document.

SHAPE_LINE NutrientViewer.InteractionMode

When this mode is activated, the creation of new line annotations will be enabled. This transforms the page to a drawable canvas and an annotation is created while drawing on it.

SHAPE_RECTANGLE NutrientViewer.InteractionMode

When this mode is activated, the creation of new rectangle annotations will be enabled. This transforms the page to a drawable canvas and an annotation is created while drawing on it.

SHAPE_ELLIPSE NutrientViewer.InteractionMode

When this mode is activated, the creation of new ellipse annotations will be enabled. This transforms the page to a drawable canvas and an annotation is created while drawing on it. If properties (e.g. color) or the page index changes, a new annotation is created.

SHAPE_POLYGON NutrientViewer.InteractionMode

When this mode is activated, the creation of new polygon annotations will be enabled. This transforms the page to a drawable canvas and an annotation is created while drawing on it. If properties (e.g. color) or the page index changes, a new annotation is created.

SHAPE_POLYLINE NutrientViewer.InteractionMode

When this mode is activated, the creation of new polyline annotations will be enabled. This transforms the page to a drawable canvas and an annotation is created while drawing on it. If properties (e.g. color) or the page index changes, a new annotation is created.

INK_ERASER NutrientViewer.InteractionMode

When this mode is activated, removing of current ink annotation points will be enabled. This transforms the page to a canvas where the cursor can remove ink annotation points by hand, as well as choose the cursor width.

NOTE NutrientViewer.InteractionMode

When this mode is activated, the creation of new note annotations will be enabled. This transforms the page to a clickable area where the annotation will be created at the position of the click.

COMMENT_MARKER NutrientViewer.InteractionMode

When this mode is activated, the creation of new comment marker annotations will be enabled. This transforms the page to a clickable area where the annotation will be created at the position of the click.

TEXT NutrientViewer.InteractionMode

When this mode is activated, the creation of new text annotations will be enabled. This transforms the page to a clickable area where the annotation will be created at the position of the click.

CALLOUT NutrientViewer.InteractionMode

When this mode is activated, the creation of new callout annotations will be enabled. This transforms the page to a clickable area where the annotation will be created at the position of the click.

PAN NutrientViewer.InteractionMode

This enables the pan tool to allow the user to navigate on a desktop browser using mouse dragging. This will disable text selection.

On a touch device, this will have no effect since panning is already the default technique for scrolling on websites.

SEARCH NutrientViewer.InteractionMode

Enables the search mode and focuses the search input field.

DOCUMENT_EDITOR NutrientViewer.InteractionMode

This shows the document editor modal.

MARQUEE_ZOOM NutrientViewer.InteractionMode

This enables the Marquee Zoom tool. When enabled, you can draw a rectangle on the screen which is zoomed into and scrolled to, once the pointer is released.

REDACT_TEXT_HIGHLIGHTER NutrientViewer.InteractionMode

When this mode is activated, the creation of new redaction annotations will be enabled by highlighting regions of text and the text will be marked for redaction as it's selected.

REDACT_SHAPE_RECTANGLE NutrientViewer.InteractionMode

When this mode is activated, the creation of new redaction annotations will be enabled by drawing rectangles on the pages. This transforms the page to a drawable canvas and annotations are created while drawing on it.

DOCUMENT_CROP NutrientViewer.InteractionMode

When this mode is activated, the creation of cropping area selection is enabled.

BUTTON_WIDGET NutrientViewer.InteractionMode

When this mode is activated, the creation of button widget annotations is enabled.

TEXT_WIDGET NutrientViewer.InteractionMode

When this mode is activated, the creation of text widget annotations is enabled.

RADIO_BUTTON_WIDGET NutrientViewer.InteractionMode

When this mode is activated, the creation of radio button widget annotations is enabled.

CHECKBOX_WIDGET NutrientViewer.InteractionMode

When this mode is activated, the creation of checkbox widget annotations is enabled.

COMBO_BOX_WIDGET NutrientViewer.InteractionMode

When this mode is activated, the creation of combo box widget annotations is enabled.

LIST_BOX_WIDGET NutrientViewer.InteractionMode

When this mode is activated, the creation of list box widget annotations is enabled.

SIGNATURE_WIDGET NutrientViewer.InteractionMode

When this mode is activated, the creation of signature widget annotations is enabled.

DATE_WIDGET NutrientViewer.InteractionMode

When this mode is activated, the creation of date widget annotations is enabled.

FORM_CREATOR NutrientViewer.InteractionMode

When this mode is activated, you will be able to edit and create widget annotations.

LINK NutrientViewer.InteractionMode

When this mode is activated, you will be able to create link annotations.

DISTANCE NutrientViewer.InteractionMode

When this mode is activated, you will be able to create distance annotations. This transforms the page to a drawable canvas and an annotation is created while drawing on it.

PERIMETER NutrientViewer.InteractionMode

When this mode is activated, you will be able to create perimeter annotations. This transforms the page to a drawable canvas and an annotation is created while drawing on it.

RECTANGLE_AREA NutrientViewer.InteractionMode

When this mode is activated, you will be able to create Rectangle Area annotations. This transforms the page to a drawable canvas and an annotation is created while drawing on it.

ELLIPSE_AREA NutrientViewer.InteractionMode

When this mode is activated, you will be able to create Ellipse Area annotations. This transforms the page to a drawable canvas and an annotation is created while drawing on it.

POLYGON_AREA NutrientViewer.InteractionMode

When this mode is activated, you will be able to create Polygon Area annotations. This transforms the page to a drawable canvas and an annotation is created while drawing on it.

CONTENT_EDITOR NutrientViewer.InteractionMode

Available only in Standalone mode with the content editor license: when this mode is activated, you will be able to edit the page contents.

MULTI_ANNOTATIONS_SELECTION NutrientViewer.InteractionMode

When this mode is activated, multiple annotations can be selected with the UI.

MEASUREMENT NutrientViewer.InteractionMode

Available only with the measurement license: when this mode is activated, the measurement annotations mode will be activated.

MEASUREMENT_SETTINGS NutrientViewer.InteractionMode

Available only with the measurement license: when this mode is activated, the measurement settings mode will be activated.

(static, constant) LayoutMode

Describes how the pages will be laid out in the document view.

Properties:
Name Type Description
SINGLE NutrientViewer.LayoutMode

Pages will always be displayed in the single page mode.

This is the default mode.

DOUBLE NutrientViewer.LayoutMode

Pages will always be displayed in groups of two.

AUTO NutrientViewer.LayoutMode

Automatically sets the layout mode to NutrientViewer.LayoutMode.SINGLE or NutrientViewer.LayoutMode.DOUBLE depending on the available space.

Specifically NutrientViewer.LayoutMode.DOUBLE is chosen when the NutrientViewer container is in landscape mode and its size is greater than 992px.

This mode is a perfect fit for tablets in particular since it will automatically update the layout mode then device orientation changes.

When the dimensions of the viewport change (i.e. the browser window is resized), the view will be restored to make the current page visible.

(static, constant) LineCap

Represents one of the available line caps for the line and polyline annotations.

Properties:
Name Type Description
square NutrientViewer.LineCap

square line cap

circle NutrientViewer.LineCap

circle line cap

diamond NutrientViewer.LineCap

diamond line cap

openArrow NutrientViewer.LineCap

open arrow line cap

closedArrow NutrientViewer.LineCap

closed arrow line cap

butt NutrientViewer.LineCap

butt line cap

reverseOpenArrow NutrientViewer.LineCap

reverse open arrow line cap

reverseClosedArrow NutrientViewer.LineCap

reverse closed arrow line cap

slash NutrientViewer.LineCap

slash line cap

(static, constant) MeasurementPrecision

Precision values for length of measurement annotations.

Properties:
Name Type Description
WHOLE NutrientViewer.MeasurementPrecision
ONE NutrientViewer.MeasurementPrecision
TWO NutrientViewer.MeasurementPrecision
THREE NutrientViewer.MeasurementPrecision
FOUR NutrientViewer.MeasurementPrecision
HALVES NutrientViewer.MeasurementPrecision
QUARTERS NutrientViewer.MeasurementPrecision
EIGHTHS NutrientViewer.MeasurementPrecision
SIXTEENTHS NutrientViewer.MeasurementPrecision

(static, constant) MeasurementScaleUnitFrom

Represents one of the units from which you can scale from for measurement annotations.

Properties:
Name Type Description
INCHES NutrientViewer.MeasurementScaleUnitFrom
MILLIMETERS NutrientViewer.MeasurementScaleUnitFrom
CENTIMETERS NutrientViewer.MeasurementScaleUnitFrom
POINTS NutrientViewer.MeasurementScaleUnitFrom

(static, constant) MeasurementScaleUnitTo

Represents one of the units to which you can scale from for measurement annotations.

Properties:
Name Type Description
INCHES NutrientViewer.MeasurementScaleUnitTo
MILLIMETERS NutrientViewer.MeasurementScaleUnitTo
CENTIMETERS NutrientViewer.MeasurementScaleUnitTo
POINTS NutrientViewer.MeasurementScaleUnitTo
FEET NutrientViewer.MeasurementScaleUnitTo
METERS NutrientViewer.MeasurementScaleUnitTo
YARDS NutrientViewer.MeasurementScaleUnitTo
KILOMETERS NutrientViewer.MeasurementScaleUnitTo
MILES NutrientViewer.MeasurementScaleUnitTo

(static, constant) NoteIcon

Available icons for Note Annotations.

Properties:
Name Type Description
COMMENT NutrientViewer.NoteIcon
RIGHT_POINTER NutrientViewer.NoteIcon
RIGHT_ARROW NutrientViewer.NoteIcon
CHECK NutrientViewer.NoteIcon
CIRCLE NutrientViewer.NoteIcon
CROSS NutrientViewer.NoteIcon
INSERT NutrientViewer.NoteIcon
NEW_PARAGRAPH NutrientViewer.NoteIcon
NOTE NutrientViewer.NoteIcon
PARAGRAPH NutrientViewer.NoteIcon
HELP NutrientViewer.NoteIcon
STAR NutrientViewer.NoteIcon
KEY NutrientViewer.NoteIcon

(static, constant) OfficeDocumentFormat

Document conversion output formats.

Properties:
Name Type Description
docx NutrientViewer.OfficeDocumentFormat

DOCX document format.

xlsx NutrientViewer.OfficeDocumentFormat

XLSX document format.

pptx NutrientViewer.OfficeDocumentFormat

PPTX document format.

(static, constant) PAdESLevel

The different PAdES levels.

Properties:
Name Type Description
b_b NutrientViewer.PAdESLevel

B-B

b_t NutrientViewer.PAdESLevel

B-T

b_lt NutrientViewer.PAdESLevel

B-LT

(static, constant) PrintMode

Describes mode used to print a PDF document.

Properties:
Name Type Description
DOM NutrientViewer.PrintMode

This method will render all pages of the PDF document in advance before it sends the results to the printer. This works in all major browsers and will not give your users access to the source PDF file. However, this method is CPU-bound and memory usage scales with PDF size.

Because of its reliability and cross browsers support this method is the default.

Some caveats when using this method:

  • To achieve cross-browser support, we render the resulting images into the main window. We try to hide already existing HTML by applying display: none !important. If the printed page still contains other HTML elements, make sure to apply an appropriate print stylesheet to your web app.
  • This method will produce incorrect results, when pages of the document have different sizes. Unfortunately, there's no way to work around this issue since it's a CSS limitation.
EXPORT_PDF NutrientViewer.PrintMode

This method is built to be resource efficient and to avoid having to render all pages in advance, which might balloon memory usage to multi-GB on PDFs with 100+ pages.

It supports all common browsers, however some fall back to opening the PDF file in a new tab, which might give your users unwanted access to the source files.

Google Chrome and Microsoft Internet Explorer provide the APIs required to use the native renderer, as a fallback on other browser we generate and open a PDF in a new tab. This allows users to print the PDF in a native PDF reader which can, as opposed to browser-built implementations, talk directly to the connected printer.

When using this print mode, we can not call the NutrientViewer.RenderPageCallback when printing pages.

Note: If the PDF is password-protected, we always fall back to opening the PDF in a new tab.

(static, constant) PrintQuality

Describes Quality used to print a PDF document.

Properties:
Name Type Description
LOW NutrientViewer.PrintQuality

Low will print the PDF in original quality.

MEDIUM NutrientViewer.PrintQuality

Medium quality printing (150 dpi).

HIGH NutrientViewer.PrintQuality

High quality printing (300 dpi).

Note: With increase in the PDF print Quality speed of printing will decrease.

(static, constant) ProcessorEngine

optional, 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.

Processor Engine Comparison:

Preference Bundle Size Document Processing Recommended Use
smallerSize Smaller Slower Prioritize compact app size
fasterProcessing Larger Faster Quick document processing
Properties:
Name Type Description
smallerSize NutrientViewer.ProcessorEngine

A smaller processor engine will be used for processing (default).

fasterProcessing NutrientViewer.ProcessorEngine

A faster processor engine will be used for processing.

(static, constant) ProductId

Properties:
Name Type Description
SharePoint NutrientViewer.ProductId

Enables using the SDK in a SharePoint environment. When used, the document should be loaded from a SharePoint site.

Salesforce NutrientViewer.ProductId

Enables using the SDK in a Salesforce environment. When used, the SDK should be loaded from a Salesforce site.

(static, constant) ScrollMode

Describes mode of page scrolling in the document view - either continuous, per spread (paginated) or disabled (changing pages through the UI is disabled).

Properties:
Name Type Description
CONTINUOUS NutrientViewer.ScrollMode

Render all pages as a list and allow smooth scrolling.

This is the default mode.

PER_SPREAD NutrientViewer.ScrollMode

Makes scrolling only possible within a spread. Whenever this mode is activated, or pages are changed when this mode is active, the zoom mode will be reset to NutrientViewer.ZoomMode.FIT_TO_VIEWPORT.

DISABLED NutrientViewer.ScrollMode

Makes scrolling only possible within a spread and doesn't allow changing pages. Whenever this mode is activated the zoom mode will be reset to NutrientViewer.ZoomMode.FIT_TO_VIEWPORT.

(static, constant) SearchPattern

Allows you to perform a search by a built-in pattern that matches common strings.

Note that by design, some of these patterns might overfit the criteria (i.e. include false positive results). This might happen since we strive for including all positive results and avoid data loss. Make sure to review the matches found.

Properties:
Name Type Description
CREDIT_CARD_NUMBER NutrientViewer.SearchPattern

Catches credit card numbers with a number beginning with 1-6, and must be 13 to 19 digits long. Spaces and - are allowed anywhere in the number.

DATE NutrientViewer.SearchPattern

Matches date formats such as mm/dd/yyyy, mm/dd/yy, dd/mm/yyyy, and dd/mm/yy. It will reject any days/months greater than 31 and will match if a leading zero is or is not used for a single digit day or month. The delimiter can either be -, . or /.

TIME NutrientViewer.SearchPattern

Matches time formats such as 00:00:00, 00:00, 00:00 PM. 12 and 24 hour formats are allowed. Seconds and 12 hour AM/PM denotation are both optional.

EMAIL_ADDRESS NutrientViewer.SearchPattern

Matches an email address with the format of [email protected] where xyz can be any alpha numeric character or a . For more information on the pattern please see http://emailregex.com/.

INTERNATIONAL_PHONE_NUMBER NutrientViewer.SearchPattern

Matches International style phone numbers with a prefix of + or 00, containing between 7 - 15 digits with spaces or - occurring anywhere within the number.

IP_V4 NutrientViewer.SearchPattern

Matches an IPV4 address limited to number ranges of 0-255 with an optional mask.

IP_V6 NutrientViewer.SearchPattern

Matches full and compressed IPv6 addresses as defined in RFC 2373.

MAC_ADDRESS NutrientViewer.SearchPattern

Matches a MAC address with delimiters of either - or :

NORTH_AMERICAN_PHONE_NUMBER NutrientViewer.SearchPattern

Matches a NANP (https://en.wikipedia.org/wiki/North_American_Numbering_Plan) style phone number. In general this will match US, Canadian and various other Caribbean countries. The pattern will also match an optional international prefix of +1.

SOCIAL_SECURITY_NUMBER NutrientViewer.SearchPattern

Matches a US social security number (SSN). The format of the number should be either XXX-XX-XXXX or XXXXXXXXX with X denoting [0-9]. We expect the number to have word boundaries on either side, or to be the start/end of the string.

URL NutrientViewer.SearchPattern

Matches a URL with a prefix of http|https|www with an optional subdomain.

US_ZIP_CODE NutrientViewer.SearchPattern

Matches a USA style Zip Code. The format expected is 00000 or 00000-0000, where the delimiter can either be - or /.

VIN NutrientViewer.SearchPattern

Matches US and ISO 3779 standard VINs. The format expects 17 characters with the last 5 characters being numeric. I,O,Q,_ characters are not allowed in upper or lower case.

(static, constant) SearchType

Defines the search type used for text search operations or when creating redaction annotations based on text search.

Properties:
Name Type Description
TEXT NutrientViewer.SearchType

This is the default search type. This is used when you want to search for strings/text.

PRESET NutrientViewer.SearchType

The search type when you want to use the patterns provided by us. see NutrientViewer.SearchPattern for the list of all the patterns.

REGEX NutrientViewer.SearchType

The search type when you want to search using regex. Regex syntax:

(static, constant) ShowSignatureValidationStatusMode

Controls when the digital signature validation UI should be shown.

Properties:
Name Type Description
IF_SIGNED NutrientViewer.ShowSignatureValidationStatusMode

Show the digital signature validation UI if digital signatures are found on the current document.

HAS_WARNINGS NutrientViewer.ShowSignatureValidationStatusMode

Only show the digital signature validation UI if digital signatures with problems or invalid ones are found, and also if the document has been modified since the moment it's been signed.

HAS_ERRORS NutrientViewer.ShowSignatureValidationStatusMode

Only show the digital signature validation UI if invalid signatures are found.

NEVER NutrientViewer.ShowSignatureValidationStatusMode

Never show the digital signature validation UI.

(static, constant) SidebarMode

Controls the current sidebar mode in the viewer.

Properties:
Name Type Description
ANNOTATIONS NutrientViewer.SidebarMode

Annotations sidebar.

BOOKMARKS NutrientViewer.SidebarMode

Bookmarks.

DOCUMENT_OUTLINE NutrientViewer.SidebarMode

Document Outline (table of contents).

THUMBNAILS NutrientViewer.SidebarMode

Thumbnails preview.

SIGNATURES NutrientViewer.SidebarMode

List of Signatures.

LAYERS NutrientViewer.SidebarMode

List of OCG layers in the document.

ATTACHMENTS NutrientViewer.SidebarMode

List of embedded files in the document.

CUSTOM NutrientViewer.SidebarMode

Custom preview.

(static, constant) SidebarPlacement

Controls the sidebar placement.

Properties:
Name Type Description
START NutrientViewer.SidebarPlacement

The sidebar is shown before the content in the reading direction. For any LTR languages this will be the left side, for RTL languages this will be the right side.

END NutrientViewer.SidebarPlacement

The sidebar is shown after the content in the reading direction. For any LTR languages this will be the right side, for RTL languages this will be the left side.

(static, constant) SignatureAppearanceMode

Specifies the signature appearance mode: whether graphics, description, or both are included in it. See https://www.nutrient.io/guides/web/signatures/digital-signatures/signature-lifecycle/configure-digital-signature-appearance/ for a detailed discussion of the signature modes.

Properties:
Name Type Description
signatureOnly NutrientViewer.SignatureAppearanceMode

Only the graphic is included in the signature appearance.

signatureAndDescription NutrientViewer.SignatureAppearanceMode

Both the graphic and description are included in the signature appearance.

descriptionOnly NutrientViewer.SignatureAppearanceMode

Only the description is included in the signature appearance.

(static, constant) SignatureContainerType

Type of the signature container used for document signatures transfer between the client and the signing service.

Properties:
Name Type Description
raw NutrientViewer.SignatureContainerType

raw

pkcs7 NutrientViewer.SignatureContainerType

pkcs7

(static, constant) SignatureSaveMode

Selects the save mode for ink signatures.

Properties:
Name Type Description
ALWAYS NutrientViewer.SignatureSaveMode

Always store new ink signatures.

NEVER NutrientViewer.SignatureSaveMode

Never store new ink signatures.

USING_UI NutrientViewer.SignatureSaveMode

Store new ink signatures if the option is selected in the UI.

(static, constant) SignatureType

The different types of digital signatures.

Properties:
Name Type Description
CMS NutrientViewer.SignatureType

CMS

CAdES NutrientViewer.SignatureType

CAdES

(static, constant) SignatureValidationStatus

The different possible validation states of the signature.

Properties:
Name Type Description
valid NutrientViewer.SignatureValidationStatus

The overall status of the signature is valid, that is, it should be shown with a green checkmark or similar in the UI.

warning NutrientViewer.SignatureValidationStatus

The overall status of the signature is valid with concerns, that is, it should be shown with a yellow warning or similar in the UI.

error NutrientViewer.SignatureValidationStatus

The overall status of the signature is that it is invalid, that is, it should be shown with a red cross of similar in the UI.

(static) SigningData: object

This object can be provided optionally as part of the NutrientViewer.SignaturePreparationData passed as first argument when calling instance.signDocument() and contains the certificates, private key and signature type for the SDK to use for signing the document using the Web Crypto API.

certificates must be an Array of ArrayBuffer (DER-encoded) or string (PEM-encoded) containing X.509 certificates.

The SDK can sign the document using the Web SubtleCrypto API as long as the certificate chain and private key are provided here.

privatekey must be a string that contains the private key to sign (PEM-encoded). If privateKey is not included, NutrientViewer.TwoStepSignatureCallback needs to be passed as second argument for the instance.signDocument() call to perform the signing.

If certificates is not provided, only NutrientViewer.SignatureType.CMS can be created.

If signatureType is not provided, NutrientViewer.SignatureType.CAdES will be used by default as long as certificates is provided, and will default to NutrientViewer.SignatureType.CMS otherwise.

If timestamp is provided, the signatureType must be NutrientViewer.SignatureType.CAdES.

Type:
  • object
Properties:
Name Type Attributes Description
certificates Array.<ArrayBuffer> | Array.<string> <nullable>

Certificates used to sign the document.

signatureType NutrientViewer.SignatureType <nullable>

Signature type.

privateKey string <nullable>

Private key used to sign the document.

signatureContainer NutrientViewer.SignatureContainerType <nullable>

Signature container type. Can be NutrientViewer.SignatureContainerType.raw or NutrientViewer.SignatureContainerType.pkcs7.

padesLevel NutrientViewer.PAdESLevel <nullable>

PAdES level to use when creating the signature (Document Engine only). This parameter is ignored when the signatureType is cms. Defaults to b-lt.

timestamp object <nullable>

Timestamping authority information (Standalone only).

Properties
Name Type Attributes Description
url string

URL of the timestamp server.

username string <nullable>

Username for the timestamp server.

password string <nullable>

Password for the timestamp server.

ltv boolean <nullable>

Flag to enable LTV (Long Term Validation) for the signature (Standalone only).

(static, constant) Theme

Describes theme to use.

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.

Properties:
Name Type Description
LIGHT NutrientViewer.Theme

Light mode. This is the default theme.

DARK NutrientViewer.Theme

Dark mode.

AUTO NutrientViewer.Theme

Uses NutrientViewer.Theme.LIGHT or NutrientViewer.Theme.DARK based on the user preferences or prefers-color-scheme media query.

HIGH_CONTRAST_LIGHT NutrientViewer.Theme

High contrast light mode which is AAA compliant.

HIGH_CONTRAST_DARK NutrientViewer.Theme

High contrast dark mode which is AAA compliant.

(static, constant) ToolbarPlacement

Configure where the toolbar is placed.

Properties:
Name Type Description
TOP NutrientViewer.ToolbarPlacement

The default value. The toolbar will be placed at the top of the viewport.

BOTTOM NutrientViewer.ToolbarPlacement

The toolbar will be placed at the bottom of the viewport.

(static, constant) UIDateTimeElement

Indicates which UI element certain JavaScript Date instance will be rendered in. Used as part of NutrientViewer.Configuration#dateTimeString.

Properties:
Name Type Description
COMMENT_THREAD NutrientViewer.UIDateTimeElement

Comment thread.

ANNOTATIONS_SIDEBAR NutrientViewer.UIDateTimeElement

Annotations sidebar.

(static, constant) UIElement

Customizable user interface element.

Properties:
Name Type Description
Sidebar NutrientViewer.UIElement

Sidebar element

(static, constant) WheelZoomMode

A specific zoom configuration that will always be applied whenever the viewport is resized.

Properties:
Name Type Description
DEFAULT NutrientViewer.WheelZoomMode

The viewer zooms when scroll wheel + Ctrl key is pressed.

ALWAYS NutrientViewer.WheelZoomMode

The viewer will always zoom when scrolling using the mouse wheel

DISABLED NutrientViewer.WheelZoomMode

Zooming via scroll wheel is disabled completely, irregardless of which key is pressed

(static, constant) ZoomMode

A specific zoom mode that will always be applied whenever the viewport is resized.

Properties:
Name Type Description
AUTO NutrientViewer.ZoomMode

Generates a zoomLevel that will automatically align the page for the best viewing experience.

FIT_TO_WIDTH NutrientViewer.ZoomMode

Uses a zoomLevel that will fit the width of the broadest page into the viewport. The height might overflow.

FIT_TO_VIEWPORT NutrientViewer.ZoomMode

Uses a zoomLevel that will fit the current page into the viewport completely.

(static, readonly) defaultAnnotationPresets: Object.<NutrientViewer.AnnotationPreset>

Returns a deep copy of an object containing the default annotation presets.

The default annotation presets for annotations include the default values for the annotation models, and can be retrieved before loading the instance.

The default annotation presets for annotation variants also include the modified properties corresponding to each annotation variant.

Used by toolbar buttons like line or arrow.

  1. arrow
  2. highlighter
  3. line
  4. rectangle
  5. cloudy-rectangle
  6. dashed-rectangle
  7. ellipse
  8. cloudy-ellipse
  9. dashed-ellipse
  10. polygon
  11. cloudy-polygon
  12. dashed-polygon
  13. polyline
  14. text-highlighter
  15. ink
  16. ink-signature
  17. note
  18. text
  19. stamp
  20. image
  21. widget
  22. strikeout
  23. underline
  24. squiggle
  25. highlight
  26. redaction
  27. es-signature
  28. perimeter
  29. distance
  30. ellipse-area
  31. rectangle-area
  32. polygon-area

For the ink preset you can also set the width of the ink eraser tool via the inkEraserWidth property.

Type:

(static, readonly) defaultAnnotationsSidebarContent: Array.<function(new:NutrientViewer.Annotations.Annotation)>

Type:

(static, readonly) defaultDocumentEditorFooterItems: Array.<NutrientViewer.DocumentEditorFooterItem>

Returns a deep copy of an array containing the default document editor footer items ordered by NutrientViewer.DocumentEditorFooterItem#type in the following way:

  1. cancel
  2. selected-pages
  3. spacer
  4. loading-indicator
  5. save-as
  6. save

The loading-indicator is only visible when the changes are being committed and selected-pages is only visible when you have selected multiple pages.

Type:

(static, readonly) defaultDocumentEditorToolbarItems: Array.<NutrientViewer.DocumentEditorToolbarItem>

Returns a deep copy of an array containing the default document editor toolbar items ordered by NutrientViewer.DocumentEditorToolbarItem#type in the following way:

  1. add
  2. remove
  3. duplicate
  4. rotate-left
  5. rotate-right
  6. move
  7. move-left
  8. move-right
  9. import-document
  10. extract-pages
  11. spacer
  12. undo
  13. redo
  14. select-all
  15. select-none
  16. zoom-out
  17. zoom-in
Type:

(static, readonly) defaultEditableAnnotationTypes: Array.<NutrientViewer.Annotations.Annotation>

Returns a deep copy of an array containing the default editable annotation types.

Type:

(static, readonly) defaultElectronicSignatureColorPresets: Array.<NutrientViewer.ColorPreset>

Returns a deep copy of an array containing the default color presets offered as part of the electronic signatures modal.

  1. blue
  2. pspdfkit blue
  3. black
Type:
  • Array.<NutrientViewer.ColorPreset>

(static, readonly) defaultElectronicSignatureCreationModes: Array.<NutrientViewer.ElectronicSignatureCreationMode>

Returns a deep copy of an array containing the default creationModes offered as part of the electronic signatures modal.

  1. DRAW
  2. IMAGE
  3. TYPE
Type:

(static, readonly) defaultSigningFonts: Array.<NutrientViewer.Font>

Returns a deep copy of an array containing the default fonts that are available for electronic signatures.

  1. NutrientViewer.Font({ name: 'Caveat' })
  2. NutrientViewer.Font({ name: 'Pacifico' })
  3. NutrientViewer.Font({ name: 'Marck Script' })
  4. NutrientViewer.Font({ name: 'Meddon' })
Type:

(static, readonly) defaultStampAnnotationTemplates: Array.<(NutrientViewer.Annotations.StampAnnotation|NutrientViewer.Annotations.ImageAnnotation)>

Returns a deep copy of an array containing the default stamp and image annotation templates, which are stamp annotation instances. However, image annotation templates can also be added to this Array using NutrientViewer.setStampAnnotationTemplates. Used by the stamp picker UI. Initially it contains only the following stamp annotations:

  1. Approved
  2. NotApproved
  3. Draft
  4. Final
  5. Completed
  6. Confidential
  7. ForPublicRelease
  8. NotForPublicRelease
  9. ForComment
  10. Void
  11. PreliminaryResults
  12. InformationOnly
  13. Rejected
  14. Accepted
  15. InitialHere
  16. SignHere
  17. Witness
  18. AsIs
  19. Departmental
  20. Experimental
  21. Expired
  22. Sold
  23. TopSecret
  24. Revised
  25. RejectedWithText
Type:

(static, readonly) defaultTextComparisonInnerToolbarItems: Array.<NutrientViewer.TextComparisonInnerToolbarItem>

Returns a deep copy of an array containing the default text comparison instance toolbar items ordered by NutrientViewer.TextComparisonInnerToolbarItem#type in the following way:

  1. pager
  2. pan
  3. zoom-out
  4. zoom-in
  5. spacer

Please keep in mind that under some circumstances some items may be removed from the final list.

Type:

(static, readonly) defaultTextComparisonToolbarItems: Array.<NutrientViewer.TextComparisonToolbarItem>

Returns a deep copy of an array containing the default text comparison toolbar items ordered by NutrientViewer.TextComparisonToolbarItem#type in the following way:

  1. comparison-changes
  2. prev-change
  3. next-change
  4. scroll-lock

Please keep in mind that under some circumstances some items may be removed from the final list.

Type:

(static, readonly) defaultToolbarItems: Array.<NutrientViewer.ToolbarItem>

Returns a deep copy of an array containing the default toolbar items ordered by NutrientViewer.ToolbarItem#type in the following way:

  1. sidebar-thumbnails
  2. sidebar-document-outline
  3. sidebar-annotations
  4. sidebar-bookmarks
  5. sidebar-signatures
  6. sidebar-attachments
  7. sidebar-layers
  8. pager
  9. pan
  10. zoom-out
  11. zoom-in
  12. zoom-mode
  13. spacer
  14. annotate
  15. ink
  16. highlighter
  17. text-highlighter
  18. ink-eraser
  19. signature
  20. image
  21. stamp
  22. note
  23. text
  24. line
  25. arrow
  26. rectangle
  27. cloudy-rectangle
  28. dashed-rectangle
  29. ellipse
  30. cloudy-ellipse
  31. dashed-ellipse
  32. polygon
  33. cloudy-polygon
  34. dashed-polygon
  35. polyline
  36. print
  37. document-editor
  38. document-crop
  39. search
  40. export-pdf
  41. debug
  42. content-editor
  43. link
  44. multi-annotations-selection
  45. callout

Please keep in mind that under some circumstances some items may be removed from the final list.

Items hidden for touch devices:

  • pan

Items hidden for touch devices when the media query (max-width: 992px) for medium devices matches:

  • zoom-out
  • zoom-in
  • zoom-mode

Please keep in mind that the media query is only added for touch devices. You can change this behavior by defining your own mediaQueries and replacing the original item. To learn more about how to do so please refer to our guide.

Items hidden for small screens (max-width: 992px)

  • text
  • callout
  • ink
  • highlighter
  • text-highlighter
  • ink-eraser
  • line
  • arrow
  • rectangle
  • cloudy-rectangle
  • dashed-rectangle
  • ellipse
  • cloudy-ellipse
  • dashed-ellipse
  • polygon
  • cloudy-polygon
  • dashed-polygon
  • polyline
  • signature
  • image
  • stamp
  • note
  • undo
  • redo
  • link

Items shown on small screens (max-width: 992px)

  • annotate

Items hidden when in read-only mode:

  • text
  • ink
  • highlighter
  • text-highlighter
  • ink-eraser
  • line
  • arrow
  • rectangle
  • cloudy-rectangle
  • dashed-rectangle
  • ellipse
  • cloudy-ellipse
  • dashed-ellipse
  • polygon
  • cloudy-polygon
  • dashed-polygon
  • polyline
  • signature
  • image
  • stamp
  • note
  • undo
  • redo
  • link
  • multi-annotations-selection

Hidden when not in debug mode (See this guide article):

  • debug

Hidden by default and only available when explicitly set via the API:

  • layout-config
  • marquee-zoom
  • comment
  • redact-text-highlighter
  • redact-rectangle
  • cloudy-rectangle
  • dashed-rectangle
  • cloudy-ellipse
  • dashed-ellipse
  • dashed-polygon
  • undo
  • redo
  • document-comparison
  • form-creator
  • content-editor
  • measure
  • pager-expanded: This is the expanded version of the pager which is visible by default on larger screens. In case you want to always show it, you should replace pager with pager-expanded.
Type:

(static, readonly) version

Returns the framework version (e.g. "2019.4.0").


Methods

(static) build(authPayload, instructions, inputs) → {Promise.<ArrayBuffer>}

Performs processing via Nutrient Backend Build API.

  • Document Engine (requires Document Engine >= 1.6.0)
  • DWS

In you are running in standalone mode, the resulting ArrayBuffer can be converted to PDF with NutrientViewer.convertToPDF() (if it's not already PDF) and then loaded with NutrientViewer.load().

Parameters:
Name Type Description
authPayload NutrientViewer.ProcessingAuthPayload

Information needed to authenticate processing request with Nutrient backend.

instructions NutrientViewer.BuildInstructions

Build API instructions that describe the processing operation.

inputs Array.<NutrientViewer.BuildInput>

An array of all inputs required for the processing operation.

Since:
  • Document Engine 1.6.0
Returns:

Promise that resolves to an ArrayBuffer with the processing result. In case of an error, rejects with a NutrientViewer.Error with detailed error message.

Type
Promise.<ArrayBuffer>
Example
NutrientViewer.build(
 // Authorize request.
 { jwt: authPayload.jwt },
 // Instructions for the processing request.
 {
   parts: [
     // Use first input as the first part of the final document.
     { file: "document" },
     // Use a sample DOCX document served from URL as the second part of the final document.
     {
       file: {
         url: "https://www.nutrient.io/api/downloads/samples/docx/document.docx",
       },
     },
   ],
 },
 // Inputs required by the request. These will be uploaded with the request. The remote file served from URL does not need to be uploaded.
 [{ name: "document", content: document }]
);

(static) convertToOffice(configuration, format) → {Promise.<ArrayBuffer>}

Converts a document to the specified supported conversion format.

Returns a Promise resolving to an ArrayBuffer of the converted document, or rejecting with a NutrientViewer.Error.

It requires a configuration object. If the configuration is invalid, the promise will be rejected with a NutrientViewer.Error.

Parameters:
Name Type Description
configuration NutrientViewer.Configuration

A configuration Object.

format NutrientViewer.OfficeDocumentFormat

Format to export the document to.

Returns:

Promise that resolves to an ArrayBuffer of the converted file

Type
Promise.<ArrayBuffer>
Example
NutrientViewer.convertToOffice({
  document: "/article.pdf",
  licenseKey: "YOUR_LICENSE_KEY",
},
NutrientViewer.OfficeDocumentFormat.docx
).then((arrayBuffer) => {
  console.log("Successfully converted document", arrayBuffer);
}).catch((error) => {
  console.error(error.message);
})

(static) convertToPDF(configuration, conformance, officeConversionSettingsnullable) → {Promise.<ArrayBuffer>}

Converts a file to a PDF.

Returns a Promise resolving to an ArrayBuffer of a PDF, or rejecting with a NutrientViewer.Error.

The resulting ArrayBuffer can be directly loaded with NutrientViewer.load().

It requires a configuration object. If the configuration is invalid, the promise will be rejected with a NutrientViewer.Error.

Parameters:
Name Type Attributes Description
configuration NutrientViewer.Configuration

A configuration Object

conformance NutrientViewer.Conformance | null

A conformance level of the output PDF

officeConversionSettings NutrientViewer.OfficeConversionSettings <nullable>

Settings specific to office conversion

Returns:

Promise that resolves to an ArrayBuffer of a file converted to PDF

Type
Promise.<ArrayBuffer>
Example
NutrientViewer.convertToPDF({
  document: "/sales-report.docx",
  licenseKey: "YOUR_LICENSE_KEY",
}).then((arrayBuffer) => {
  console.log("Successfully converted document", arrayBuffer);
}).catch((error) => {
  console.error(error.message);
})

(static) generateInstantId() → {string}

Generates a new unique ID usable as an ID of annotation, formField, bookmark or comment.

Returns:

A unique identifier.

Type
string

(static) isSignatureCallbackResponseRaw(obj) → {boolean}

Checks if an object is a SignatureCallbackResponseRaw.

Parameters:
Name Type Description
obj any

The object to check.

Returns:

True if the object is a SignatureCallbackResponseRaw, false otherwise.

Type
boolean

(static) load(configuration) → {Promise.<NutrientViewer.Instance, NutrientViewer.Error>}

Creates a new NutrientViewer instance.

Returns a Promise resolving to a new NutrientViewer.Instance, or rejecting with a NutrientViewer.Error.

It requires a configuration object. When the configuration is invalid, the promise will be rejected with a NutrientViewer.Error.

Parameters:
Name Type Description
configuration NutrientViewer.Configuration

A configuration Object

Returns:

Promise that resolves in an NutrientViewer.Instance

Type
Promise.<NutrientViewer.Instance, NutrientViewer.Error>
Examples

Load Nutrient Web SDK Server

NutrientViewer.load({
  authPayload: { jwt: "xxx.xxx.xxx" },
  container: ".foo",
  documentId: "85203",
  instant: true,
}).then((instance) => {
  console.log("Successfully mounted NutrientViewer", instance);
}).catch((error) => {
  console.error(error.message);
})

Load Nutrient Web SDK Standalone

NutrientViewer.load({
  document: "/sales-report.pdf",
  container: ".foo",
  licenseKey: "YOUR_LICENSE_KEY",
}).then((instance) => {
  console.log("Successfully mounted NutrientViewer", instance);
}).catch((error) => {
  console.error(error.message);
})

(static) populateDocumentTemplate(configuration, templateData) → {Promise.<ArrayBuffer>}

This is used to Populate the document template (Docx format) with corresponding data.

Returns a Promise resolving to an ArrayBuffer of a Docx, or rejecting with a NutrientViewer.Error.

The resulting ArrayBuffer can be converted to PDF with NutrientViewer.convertToPDF(). and finally loaded with NutrientViewer.load().

It requires a configuration object and config object with data NutrientViewer.TemplateDataToPopulateDocument which contains the data to be populated in document and delimiter marker to know placeholder of the data. If the configuration is invalid, the promise will be rejected with a NutrientViewer.Error.

Parameters:
Name Type Description
configuration NutrientViewer.Configuration

A configuration Object

templateData NutrientViewer.TemplateDataToPopulateDocument

A template data object

Returns:

Promise that resolves to an ArrayBuffer of a file converted to PDF

Type
Promise.<ArrayBuffer>
Example
NutrientViewer.populateDocumentTemplate(
{
  document: '/sales-report.docx',
  licenseKey: 'YOUR_LICENSE_KEY',
},
{
  config: {
    delimiter: {
      start: '{{',
      end: '}}',
    },
  },
  model: {
    products: [
      {
        title: 'Duk',
        name: 'DukSoftware',
        reference: 'DS0',
      },
      {
        title: 'Tingerloo',
        name: 'Tingerlee',
        reference: 'T00',
      },
    ],
  },
},
)
.then(arrayBuffer => {
  console.log('Successfully populated the template Document with data', arrayBuffer)
})
.catch(error => {
  console.error(error.message)
})
The `delimiter` object sets the pair of delimiters that encloses a template marker
i.e. placeholder marker that need to be substituted with the data.

The `model` object associates a template marker with the corresponding substitution in the final, produced document.

=== Supported Template Features ===
Placeholders let users substitute a marker with some text and Loops generate repetitions
of a given pattern.

The syntax for loops is `#` for the opening tag, and `/` for the closing one in the docs.

For instance if the document contains:

```
{#ITEMS} {name} {price} {/ITEMS}
```

Here, `ITEMS` is the name of the loop template marker, and `name` and `price` are regular placeholder
template markers over which the SDK iterates replacing the `name` placeholder with corresponding `name` value
in `model`, and similarly the `price` placeholder is replaced by the corresponding `price` value in `model`.

```
{
  model: {
    items: [
      {
        name: "A",
        price: 10
      },
      {
        name: "B",
        price: 15
      }
    ]
  }
}
```

(static) preloadWorker(configuration) → {Promise.<void>}

Standalone only

Preloads the standalone WASM worker.

In cases where you don't want to load a PDF right away, the first invocation of NutrientViewer.load after allowing this function to resolve will be significantly faster.

If NutrientViewer.load is called while this function has not yet resolved, then NutrientViewer.load will simply reuse the request from this function without adding any overhead.

Parameters:
Name Type Description
configuration NutrientViewer.Configuration

A configuration Object

Returns:

Promise that resolves when preloading is complete

Type
Promise.<void>
Example
// Fetches worker asynchronously
NutrientViewer.preloadWorker(configuration);
document.querySelector("#open-pdf-button").addEventListener(async () => {
  await NutrientViewer.load({ ...configuration, document: "my-doc.pdf" });
});

(static) unload(target) → {boolean}

Unloads an existing NutrientViewer instance.

It requires an target parameter that is a CSS selector, an HTMLElement or the reference to a NutrientViewer.Instance returned by NutrientViewer.load.

Parameters:
Name Type Description
target HTMLElement | string | NutrientViewer.Instance

A target to unload

Throws:

Will throw an error when the target is invalid but will work when it does not have a mounted Nutrient Web SDK instance.

Type
NutrientViewer.Error
Returns:

When true, an instance of Nutrient Web SDK was unmounted.

Type
boolean
Examples

Unload Nutrient Web SDK using an instance

let instance = null;
NutrientViewer.load({
  document: "/sales-report.pdf",
  container: ".foo",
}).then((i) => {
  instance = i
})
.then(() => {
  // Unload the given instance
  NutrientViewer.unload(instance)
}).catch((error) => {
  console.error(error.message);
})

Unload Nutrient Web SDK using a CSS selector

NutrientViewer.load({
  document: "/sales-report.pdf",
  container: ".foo",
})
.then(() => {
  // Unload the given instance
  NutrientViewer.unload(".foo")
})

Unload Nutrient Web SDK using an HTMLElement

NutrientViewer.load({
  document: "/sales-report.pdf",
  container: ".foo",
})
.then(() => {
  // Unload the given instance
  NutrientViewer.unload(document.querySelector(".foo"))
})

(static) viewStateFromOpenParameters() → {NutrientViewer.ViewState}

Merges the properties extracted from the location.hash into the NutrientViewer.ViewState.

Properties will be extracted following the PDF Open Parameters spec.

Currently, we only support the page parameter.

Parameters:
Type Description
NutrientViewer.ViewState
Returns:
Type
NutrientViewer.ViewState

Type Definitions

AIAssistantConfiguration

Configuration for the AI Assistant.

Type:
  • object
Properties:
Name Type Attributes Description
sessionId string

The session to reopen, or an ID for the new session to create. This ID should be unique for each session and should use alphanumeric characters only.

jwt string

The JWT token to authenticate the user.

backendUrl string

The URL that hosts AI Assistant service. e.g. 'https://localhost:4000'.

userId string <nullable>

An optional user ID for the current user. This ID should be unique for each user and should use alphanumeric characters only.

Example
{
    sessionId: 'session-id',
    jwt: 'xxx.xxx.xxx'
    backendUrl: 'https://localhost:4000',
}

AnnotationResizeStartCallback(event) → {AnnotationResizeStartCallbackConfiguration|undefined}

This callback is called whenever an annotation is about to be resized. You can use it to control resize behavior.

Parameters:
Name Type Description
event NutrientViewer.AnnotationsResizeEvent

The event containing information regarding the resizing of the annotation

Returns:

The configuration of the resize behavior or undefined for default behavior.

Type
AnnotationResizeStartCallbackConfiguration | undefined

AnnotationToolbarColorPresetsCallback(options) → {NutrientViewer.AnnotationToolbarColorPresetConfig}

This callback allows users to customize the colors that will be displayed in our color dropdown picker, and to add a custom color picker UI to it.

Parameters:
Name Type Description
options object
Properties
Name Type Description
propertyName BuiltInColorProperty

The annotation property for which we need to render a customized array of colors in the color dropdown. The built-in color properties are:

-'color' -'stroke-color' -'fill-color' -'background-color' -'font-color' -'outline-color

Different annotations have different color properties, but all of them are listed above. If you pass a color property that it's not supported, you will get an error.

defaultItems Array.<ColorPreset>

array of default colors

Returns:

the configuration of the customized color picker

Type
NutrientViewer.AnnotationToolbarColorPresetConfig
Example

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,
     };
   }
 },
 //...
});

AnnotationToolbarItemsCallback(annotation, options)

This callback can be run on individual annotation toolbars to modify their toolbar items.

For more information, see NutrientViewer.Configuration#annotationToolbarItems

Parameters:
Name Type Description
annotation AnnotationsUnion | null

The annotation that is going to be created or is currently selected. In case the annotation is not yet created, pageIndex is null. In case of items for annotation toolbars used in interaction modes like NutrientViewer.InteractionMode.INK_ERASER, annotation is null.

options AnnotationToolbarItemsCallbackOptions

The AnnotationToolbarItemsCallbackOptions that can be helpful in implementing custom toolbar.

AnnotationTooltipCallback(annotation)

This callback is called whenever an annotation gets selected and can be used to define and return an array of NutrientViewer.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.

Parameters:
Name Type Description
annotation Annotation

The selected annotation.

Example

Register a AnnotationTooltipCallback handler to show a tooltip for text annotations only.

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 []
    }
  }
  // ...
});

Change

An union of supported types of changes.

Type:

ComparisonDocuments

Represents a pair of documents to be compared.

Type:
  • object
Properties:
Name Type Description
originalDocument NutrientViewer.DocumentDescriptor

The original document.

changedDocument NutrientViewer.DocumentDescriptor

The changed document.

CustomUIItemRendererCallback(payload)

This user defined function receives the item element's container DOM node and the item data it renders as argument. It's called whenever the item element because of the container element updates.

Parameters:
Name Type Description
payload object

UI element data

Properties
Name Type Description
itemContainerNode Node

Container DOM element.

item any

Item data rendered by the element.

CustomUIRendererCallback(payload) → {NutrientViewer.CustomUIRendererConfiguration}

This user defined function receives the element's container DOM node and the data it renders as argument. It's called whenever the element is mounted, each time the data is modified, and whenever NutrientViewer.Instance#setCustomUIConfiguration is called.

It must return a NutrientViewer.CustomUIRendererConfiguration object.

Parameters:
Name Type Description
payload object

UI element data

Properties
Name Type Description
containerNode Node

Container DOM element.

items NutrientViewer.Immutable.List.<any> | null

Data rendered by the element.

Returns:
Type
NutrientViewer.CustomUIRendererConfiguration

DateTimeStringCallback(args)

Defining this callback allows you to customize how dates are rendered as part of the NutrientViewer UI.

Parameters:
Name Type Description
args object

Arguments passed to the callback.

Properties
Name Type Description
date Date

The date to be formatted.

element NutrientViewer.UIDateTimeElement

The NutrientViewer UI element on which the date is going to be rendered.

object AnnotationsUnion | NutrientViewer.Comment

The annotation or comment that contains the date that is being rendered.

Example
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);
    }
  }
  // ...
});

DocumentComparisonConfiguration

Object containing configuration options for document comparison.

Defines specific configuration options related to the document comparison feature. Passed when calling NutrientViewer.Instance#setDocumentComparisonMode.

Example
instance.setDocumentComparisonMode({
  documentA: {
    source: NutrientViewer.DocumentComparisonSourceType.USE_OPEN_DOCUMENT
  },
  documentB: {
    source: NutrientViewer.DocumentComparisonSourceType.USE_FILE_DIALOG
  },
  autoCompare: false
});

ElectronicSignatureDefaultTextCallback() → {string|null}

Callback that returns the default text for the Type Electronic Signature UI.

Returns:

The default text for the Type Electronic Signature UI.

Type
string | null

EnableRichTextCallback(textAnnotation)

This 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.

For more information, see NutrientViewer.Configuration#enableRichText.

Parameters:
Name Type Description
textAnnotation TextAnnotation
Example

Only treat newly created annotations as rich text annotations

NutrientViewer.load({
  enableRichText: annotation => annotation.pageIndex === null
  // ...
});

FontSubstitution

An array of fonts to be substituted and the fonts to substitute them with

Describes the 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.

Type:
  • object
Properties:
Name Type Description
pattern string

The font you would like to be substituted

target string

The font you would like to substitute the "from" font with

Example

Substitute all Noto fonts found in the document with AwesomeFont

const myFontsSubstitutions = [{
 pattern: "Noto*",
 target: "AwesomeFont"
}]

NutrientViewer.load(
 //...
 fontSubstitutions: myFontsSubstitutions,
)

InlineTextSelectionToolbarItemsCallback(selection)

This callback can be run on specific text selection to modify its inline toolbar items.

Parameters:
Name Type Description
selection NutrientViewer.TextSelection

The text that is currently selected.

InlineToolbarItemsCallbackOptions()

Nutrient Web SDK comes with a built-in toolbar that shows whenever some text is selected on a document, we will refer to said tooltip as inline toolbar from now on. This callback allows users to customize said inline toolbar.

Properties:
Name Type Description
defaultAnnotationToolbarItems Array.<BuiltInInlineToolbarItem>

The list of default items thats is shown in the inline toolbar

hasDesktopLayout boolean

Whether the screen is in desktop layout.

IsEditableAnnotationCallback(annotation)

This callback defines 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).

For more information, see NutrientViewer.Configuration#isEditableAnnotation.

Parameters:
Name Type Description
annotation AnnotationsUnion
Example

Only allow the modification of annotations from the same author

NutrientViewer.load({
  isEditableAnnotation: function(annotation) {
    return annotation.creatorName === myCurrentUser.name;
  },
});

MeasurementValueConfiguration()

Nutrient Web SDK allows you to pass a customized configuration for measurements annotation scale and precision through the following callback

Properties:
Name Type Attributes Description
name string

Your custom configuration name. It has to be unique.

scale IMeasurementScale

The custom scale passed in the configuration, it represent the scale used in the document

precision IMeasurementPrecision

Precision values for the length of measurement annotations

selected boolean <nullable>

Whether a custom scale is selected or not.

Example

Configure a custom scale and pass it to our viewer

const customScales = [
  {
    scale: {
      unitFrom: NutrientViewer.MeasurementScaleUnitFrom.CENTIMETERS,
      unitTo: NutrientViewer.MeasurementScaleUnitTo.METERS,
      fromValue: 1,
      toValue: 2
    },
    precision: NutrientViewer.MeasurementPrecision.FOUR,
    selected: true
  }
];

NutrientViewer.load({
  // Other options.
  measurementValueConfiguration: (documentScales) => {
    return [...customScales, ...documentScales];
  }
});

ModificationType

Indicates the type of modification made to a NutrientViewer.Change.

Type:
  • 'CREATED' | 'UPDATED' | 'DELETED'

OnCommentCreationStartCallback(comment)

You can programmatically modify the properties of the comment just before it is created.

Parameters:
Name Type Description
comment Comment
Example

Set default text of a Comment

NutrientViewer.load({
  onCommentCreationStart: comment => comment.set('text', { format: 'xhtml', value: '<p>This comment has a default value</p>' })
  // ...
});

OnWidgetAnnotationCreationStartCallback(widgetAnnotation, formField)

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.

Parameters:
Name Type Description
widgetAnnotation NutrientViewer.Annotations.WidgetAnnotation

The widget annotation that is about to be created.

formField NutrientViewer.FormFields.FormField

The original form field that is associated with the widget annotation.

Example

Set the opacity of all widget annotations.

NutrientViewer.load({
  onWidgetAnnotationCreationStart: (annotation, formField) => {
    return { annotation: annotation.set('opacity', 0.7) };
  }
  // ...
});

RenderPageCallback(canvas, pageIndex, size)

This 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.

Make sure that the rendering commands are as efficient as possible as they might be invoked multiple times per page (once per tile).

For more information, see NutrientViewer.Configuration#renderPageCallback.

Parameters:
Name Type Description
canvas CanvasRenderingContext2D

A 2D <canvas/> rendering context.

pageIndex number

The current page index, starting with 0 for the first page.

size NutrientViewer.Geometry.Size

The size of the page that you're drawing at. The canvas is already scaled accordingly.

Example

Register a RenderPageCallback handler at configuration time.

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

SigningServiceData

Data for the digital signing service.

Contains information to be optionally passed along to the backend signing service when NutrientViewer.Instance.signDocument() is called, so it can be used for identification, security or any other purpose.

Type:

TrustedCAsCallback() → {Promise.<Array.<(ArrayBuffer|string)>>}

On Standalone, by implementing this callback you have a fine grained control over which certificates are going to be used for digital signatures validation.

For more information, see NutrientViewer.Configuration#trustedCAsCallback

Returns:

The CA certificates in DER (ArrayBuffer) or PEM (string) format. NutrientViewer.load({ trustedCAsCallback: function() { return new Promise((resolve, reject) => { fetch("/your-certificate.cer") .then(res => res.arrayBuffer()) .then(cert => resolve([cert])) .catch(reject) }); }, // ... });

Type
Promise.<Array.<(ArrayBuffer|string)>>
Example
<caption>Fetch and use custom set of certificates (Standalone)</caption>

TwoStepSignatureCallback(signaturePreparedData) → {Promise.<(ArrayBuffer|NutrientViewer.SignatureCallbackResponsePkcs7|NutrientViewer.SignatureCallbackResponseRaw)>}

This callback is called when a document has been prepared for digitally signing by calling instance.signDocument(). It receives the current document hash, file contents and data to be signed as arguments, and must return a Promise object that resolves to any of these types:

  • An ArrayBuffer that contains either the signed data or a PKCS7 container that includes it.
  • A SignatureCallbackResponsePkcs7 that is structured type for when the signature device or service creates signatures in the PKCS#7 format.
  • A SignatureCallbackResponseRaw that is structured type for when the signature device or service creates signatures in the raw (for instance, PKCS#1.5) format. If the returned Promise object rejects, the document will not be signed.

The provided file contents or the data to be signed can be used as input for the Web Crypto API, or for a signing service of your choice to be signed (hashed and encrypted). The file contents hash is also provided so it can be used it to verify the validity of the contents.

See this guide article for more information on how to digitally sign a document on Standalone.

Parameters:
Name Type Description
signaturePreparedData object

Signature prepared data.

Properties
Name Type Attributes Description
hash string

Hash of the current document.

fileContents ArrayBuffer <nullable>

Content of the file to be signed. Provided only for CMS signatures.

dataToBeSigned ArrayBuffer

Data to be signed for CAdES signatures.

Returns:

A promise that resolves to any of these:

  • An ArrayBuffer that contains the signed data in the PKCS#1.5 or PKCS#7 format.
  • A SignatureCallbackResponsePkcs7, for when the signature device or service creates signatures in the PKCS#7 format.
  • A SignatureCallbackResponseRaw, for when the signature device or service creates signatures in the raw (for instance, PKCS#1.5) format. The ArrayBuffer return type is deprecated. It's recommended to return either a SignatureCallbackResponsePkcs7 or SignatureCallbackResponseRaw, depending on the signature format.
Type
Promise.<(ArrayBuffer|NutrientViewer.SignatureCallbackResponsePkcs7|NutrientViewer.SignatureCallbackResponseRaw)>
Example

Sign document (Standalone)

instance.signDocument(null, function({ hash, fileContents }) {
  return new Promise(function(resolve, reject) {
    const PKCS7Container = getPKCS7Container(hash, fileContents);
    if (PKCS7Container != null) {
      return resolve(PKCS7Container)
    }
    reject(new Error("Could not retrieve the PKCS7 container."))
  })
}).then(function() {
  console.log("Document signed!");
})

ZoomConfiguration

Object containing setup for zooming.

This object contains configuration options for zooming. It allows granular control over the viewer zooming behavior.

Type:
  • object
Properties:
Name Type Description
zoomMode NutrientViewer.ZoomMode | undefined

NutrientViewer.ZoomMode - Defines the zoom mode to use.

wheelZoomMode NutrientViewer.WheelZoomMode | undefined

NutrientViewer.WheelZoomMode - Defines the scroll zoom mode to use.

options NutrientViewer.ZoomOptions | undefined

The zoom options to use.

Properties
Name Type Description
enableKeyboardZoom boolean | undefined

Controls whether keyboard shortcuts for zooming (e.g., Ctrl/Cmd +/-) are enabled. Defaults to true.

enableGestureZoom boolean | undefined

Controls whether pinch-to-zoom and other touch/trackpad zoom gestures are enabled. Defaults to true.

Examples
deafult config:
NutrientViewer.load({
  zoom: {
    zoomMode: NutrientViewer.ZoomMode.AUTO,
    wheelZoomMode: NutrientViewer.WheelZoomMode.WITH_CTRL,
    options: {
      enableKeyboardZoom: true,
      enableGestureZoom: true,
    },
  },
});
The following example sets the zoom mode to FIT_TO_WIDTH, the scroll zoom mode to DISABLED, and disables the keyboard zooming.
NutrientViewer.load({
  zoom: {
    zoomMode: NutrientViewer.ZoomMode.FIT_TO_WIDTH,
    wheelZoomMode: NutrientViewer.WheelZoomMode.DISABLED,
    options: {
      enableKeyboardZoom: false,
    },
  },
});

documentEditorUIConfig

An object that allows you to configure the Document Editor UI.

Type:
  • object
Properties:
Name Type Description
thumbnailMinSize number

The minimum size of the thumbnail

thumbnailMaxSize number

The maximum size of the thumbnail

thumbnailDefaultSize number

The default size of the thumbnail

Example
const myDocumentEditorUIConfig =  {
      thumbnailDefaultSize: 500,
      thumbnailMinSize: 100,
      thumbnailMaxSize: 600,
    }

NutrientViewer.load(
 //...
 documentEditorConfig: myDocumentEditorUIConfig,
)