Product:

Get started

Samples

Basic operations

Learn more

Viewer

UI Customization

Annotation

Collaboration

MS Office

Conversion

PDF/A

Forms

Generate

Page manipulation

Editing page content

Extraction

Digital signature

Bookmarks

Compare files

Optimization

Layers (OCGs)

Measurement

Redaction

Security

Portfolios

Low-level PDF API

Changelogs

APIs for Cordova / Ionic PDF viewer

new NativeViewer(options, element)

Creates a NativeViewer and embeds it on the HTML page.

Parameters

options

object

Options passed to the NativeViewer, available options are:

initialDoc: string, optional - the URL path to a document to load on startup
l: string, optional - the Apryse license key
disabledElements: array of string, optional - hides multiple elements in the viewer, see disableElements for list of available options
boundingRect: object, optional - the bounding box for where NativeViewer should be embedded. If no boundingRect is provided, the viewer will be presented full screen.
topLeftButtonTitle: string, optional - the menu item for top left navigation button, shown as icon on Android and text on iOS, available options are: menu, close, back
showTopLeftButton: boolean, optional - whether to show the top left navigation button

Type	Required	Default
object	true	N/A

element

string

An html element. If an element is provided, the viewer will be added at the location specified by boundingRect. (If no boundingRect is provided, on iOS the viewer will be presented directly over the element itself, and on Android the viewer will be presented full screen.) If no element is provided, the API showDocumentViewer() must be used to show the viewer.

Type	Required	Default
string	false	N/A

Example

JavaScript

1var viewerElement = document.getElementById('viewer');
2var rect = viewerElement.getBoundingClientRect();
3var viewer = new Apryse.NativeViewer({
4    l: '<your-key-here>',
5    initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_mobile_about.pdf',
6    boundingRect: { left: rect.left, top: rect.top, width: rect.width, height: rect.height },
7    disabledElements: [
8    // hide elements as you wish
9    ]
10}, viewerElement);

disableElements(dataElements)

Hides multiple elements in the viewer, available options are:

viewControlsButton
freeHandToolButton
highlightToolButton
underlineToolButton
squigglyToolButton
strikeoutToolButton
rectangleToolButton
ellipseToolButton
lineToolButton
arrowToolButton
polylineToolButton
polygonToolButton
cloudToolButton
signatureToolButton
freeTextToolButton
stickyToolButton
calloutToolButton
stampToolButton
toolsButton
searchButton
shareButton
thumbnailsButton
listsButton
thumbnailSlider

Parameters

dataElements

array

Array of element keys.

Type	Required	Default
array of string	true	N/A

Example

JavaScript

1// remove search button and line create tool
2this.viewer.disableElements([ 'searchButton', 'lineToolButton' ]);

disableTools(toolNames)

Disable multiple tools.

Parameters

toolNames

array

Array of name of the tools, available options are:

AnnotationEdit
TextSelect
AnnotationCreateSticky
AnnotationCreateFreeHand
AnnotationCreateTextHighlight
AnnotationCreateTextUnderline
AnnotationCreateTextSquiggly
AnnotationCreateTextStrikeout
AnnotationCreateFreeText
AnnotationCreateCallout
AnnotationCreateSignature
AnnotationCreateLine
AnnotationCreateArrow
AnnotationCreatePolyline
AnnotationCreateStamp
AnnotationCreateRectangle
AnnotationCreateEllipse
AnnotationCreatePolygon
AnnotationCreatePolygonCloud
AnnotationCreateDistanceMeasurement
AnnotationCreatePerimeterMeasurement
AnnotationCreateAreaMeasurement

Type	Required	Default
array of string	false	all tools

Example

JavaScript

1// enable sticky annotation tool and free text tool
2this.viewer.disableTools([ 'AnnotationCreateSticky', 'AnnotationCreateFreeText' ]);

enableTools(toolNames)

Enable multiple tools that were previously disabled.

Parameters

toolNames

array

Array of name of the tools, available options are:

AnnotationEdit
TextSelect
AnnotationCreateSticky
AnnotationCreateFreeHand
AnnotationCreateTextHighlight
AnnotationCreateTextUnderline
AnnotationCreateTextSquiggly
AnnotationCreateTextStrikeout
AnnotationCreateFreeText
AnnotationCreateCallout
AnnotationCreateSignature
AnnotationCreateLine
AnnotationCreateArrow
AnnotationCreatePolyline
AnnotationCreateStamp
AnnotationCreateRectangle
AnnotationCreateEllipse
AnnotationCreatePolygon
AnnotationCreatePolygonCloud
AnnotationCreateDistanceMeasurement
AnnotationCreatePerimeterMeasurement
AnnotationCreateAreaMeasurement

Type	Required	Default
array of string	false	all tools

Example

JavaScript

1// enable sticky annotation tool and free text tool
2this.viewer.disableElements([ 'AnnotationCreateSticky', 'AnnotationCreateFreeText' ]);

setToolMode(toolName)

Sets tool mode.

Parameters

toolName

string

Name of the tool, available options are:

AnnotationEdit
TextSelect
AnnotationCreateSticky
AnnotationCreateFreeHand
AnnotationCreateTextHighlight
AnnotationCreateTextUnderline
AnnotationCreateTextSquiggly
AnnotationCreateTextStrikeout
AnnotationCreateFreeText
AnnotationCreateCallout
AnnotationCreateSignature
AnnotationCreateLine
AnnotationCreateArrow
AnnotationCreatePolyline
AnnotationCreateStamp
AnnotationCreateRectangle
AnnotationCreateEllipse
AnnotationCreatePolygon
AnnotationCreatePolygonCloud
AnnotationCreateDistanceMeasurement
AnnotationCreatePerimeterMeasurement
AnnotationCreateAreaMeasurement

Type	Required	Default
string	true	N/A

Example

JavaScript

1// sets the current tool mode to freehand inking
2this.viewer.setToolMode('AnnotationCreateFreeHand');

loadDocument(documentPath)

Load a document inside NativeViewer UI.

Parameters

documentPath

string

Type	Required	Default
string	true	N/A

Example

JavaScript

1this.viewer.loadDocument('https://pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_mobile_about.pdf');

showDocumentViewer()

Shows a previously constructed NativeViewer.

If a boundingRect is defined, the viewer will be displayed on top of the web content within the specified rect. If no boundingRect is defined, the viewer will be presented full screen.

Example

JavaScript

1this.viewer.showDocumentViewer();

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales