API for React Native PDF viewer

Apryse React Native now has support for TypeScript. Since not all customers use the language, the typings used in this document will be described using normal JavaScript types. For TypeScript users, type information is automatically provided while coding. They can also be found in our TypeScript source files.

RNPdftron contains static methods for global library initialization, configuration, and utility methods.

Initializes Apryse SDK with your Apryse commercial license key. You can run Apryse in demo mode by passing an empty string.

Parameters:

RNPdftron.initialize('your_license_key');

Enables JavaScript for Apryse SDK, by default it is enabled.

Parameters:

RNPdftron.enableJavaScript(true);

Gets the current PDFNet version.

Returns a Promise.

Promise Parameters:

RNPdftron.getVersion().then((version) => {
  console.log("Current PDFNet version:", version);
});

Gets the version of current platform (Android/iOS).

Returns a Promise.

Promise Parameters:

RNPdftron.getPlatformVersion().then((platformVersion) => {
  console.log("App currently running on:", platformVersion);
});

Gets the font list available on the OS (Android only). This is typically useful when you are mostly working with non-ASCII characters in the viewer.

Returns a Promise.

Promise Parameters:

RNPdftron.getSystemFontList().then((fontList) => {
  console.log("OS font list:", fontList);
});

Clear the information and bitmap cache for rubber stamps (Android only). This is typically useful when the content of rubber stamps has been changed in the viewer.

Returns a promise.

RNPdftron.clearRubberStampCache().then(() => {
  console.log("Rubber stamp cache cleared");
});

Encrypts (password-protects) a document. Note: This function does not lock the document and cannot be used while the document is opened in the viewer.

Parameters:

Returns a promise.

Example:

RNPdftron.encryptDocument("/sdcard/Download/new.pdf", "1111", "").then(() => {
  console.log("done password");
});

Generates a PDF using a template in the form of an Office document and replacement data in the form of a JSON object. For more information please see our template guide .

Parameters:

Returns a Promise.

Promise Parameters:

The user is responsible for cleaning up the temporary file that is generated.

Example:

RNPdftron.pdfFromOfficeTemplate("/sdcard/Download/red.docx", json).then((resultPdfPath) => {
  console.log(resultPdfPath);
});

A React component for displaying documents of different types such as PDF, docx, pptx, xlsx and various image formats.

string, required

The path or url to the document.

Example:

<DocumentView
  document={'https://pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_about.pdf'}
/>

string, optional

The password of the document, if any.

Example:

<DocumentView
  password={'password'}
/>

bool, optional, defaults to false

If true, document prop will be treated as a base64 string. If it is not the base64 string of a pdf file, base64FileExtension is required.

When viewing a document initialized with a base64 string (i.e. a memory buffer), a temporary file is created on Android and iOS.

<DocumentView
  isBase64String={true}
  document={'...'} // base 64 string
/>

string, required if using base64 string of a non-pdf file, defaults to ".pdf"

The file extension for the base64 string in document, if isBase64String is true.

<DocumentView
  isBase64String={true}
  document={'...'} // base 64 string
  base64FileExtension={'.jpeg'}
/>

object, optional

Defines custom headers to use with HTTP/HTTPS requests.

<DocumentView
  customHeaders={{headerKey: 'headerValue'}}
/>

bool, optional, defaults to false

Defines whether the viewer is read-only. If true, the UI will not allow the user to change the document.

<DocumentView
  readOnly={true}
/>

function, optional

This function is called when the document finishes loading.

<DocumentView
  onDocumentLoaded = {(path) => { 
    console.log('The document has finished loading:', path); 
  }}
/>

function, optional

This function is called when document opening encounters an error.

<DocumentView
  onDocumentError = {(error) => { 
    console.log('Error occured during document opening:', error); 
  }}
/>

array of string, optional, defaults to none

Defines buttons to be disabled for the viewer. Strings should be Config.Buttons constants.

<DocumentView
  disabledElements={[Config.Buttons.userBookmarkListButton]}
/>

array of string, optional, defaults to none

Defines tools to be disabled for the viewer. Strings should be Config.Tools constants.

<DocumentView
  disabledTools={[Config.Tools.annotationCreateLine, Config.Tools.annotationCreateRectangle]}
/>

function, optional

This function is called when the current tool changes to a new tool

Parameters:

<DocumentView
  onToolChanged = {({previousTool, tool}) => {
    console.log('Tool has been changed from', previousTool, 'to', tool);
  }}
/>

string, optional

The file name of the icon to be used for the leading navigation button. The button will use the specified icon if it is valid, and the default icon otherwise.

Example:

<DocumentView
  leadingNavButtonIcon={Platform.OS === 'ios' ? 'ic_close_black_24px.png' : 'ic_arrow_back_white_24dp'}
/>

Note: to add the image file to your application, please follow the steps below:

1. Add the image resource to the drawable directory in example/android/app/src/main/res. For details about supported file types and potential compression, check out this guide.

2. Now you can use the image in the viewer. For example, if you add button_close.png to drawable, you could use 'button_close' in leadingNavButtonIcon.

1. After pods has been installed, open the .xcworkspace file for this application in Xcode (in this case, it's example.xcworkspace), and navigate through the list below. This would allow you to add resources, in this case, an image, to your project.

• "Project navigator"
• "example" (or the app name)
• "Build Phases"
• "Copy Bundle Resources"
• "+".

2. Now you can use the image in the viewer. For example, if you add button_open.png to the bundle, you could use 'button_open.png' in leadingNavButtonIcon.

bool, optional, defaults to true

Defines whether to show the leading navigation button.

<DocumentView
  showLeadingNavButton={true}
/>

function, optional

This function is called when the leading navigation button is pressed.

<DocumentView
  onLeadingNavButtonPressed = {() => {
    console.log('The leading nav has been pressed');
  }}
/>

bool, optional, defaults to true

Defines whether the document slider of the viewer is enabled.

<DocumentView
  documentSliderEnabled={false}
/>

array of string, optional, defaults to none.

Defines view mode items to be hidden in the view mode dialog. Strings should be [Config.ViewModePickerItem]((https://github.com/ApryseSDK/pdftron-react-native/blob/master/src/Config/Config.js) constants.

<DocumentView
  hideViewModeItems={[
    Config.ViewModePickerItem.Crop,
    Config.ViewModePickerItem.Rotation,
    Config.ViewModePickerItem.ColorMode
  ]}
/>

bool, optional, defaults to true

Deprecated. Use hideTopAppNavBar prop instead.

bool, optional, defaults to true

Defines whether the bottom toolbar of the viewer is enabled.

<DocumentView
  bottomToolbarEnabled={false}
/>

array of objects, options (one of Config.DefaultToolbars constants or custom toolbar object)

Defines custom toolbars. If passed in, the default toolbars will no longer appear. It is possible to mix and match with default toolbars. See example below:

const myToolbar = {
  [Config.CustomToolbarKey.Id]: 'myToolbar',
  [Config.CustomToolbarKey.Name]: 'myToolbar', 
  [Config.CustomToolbarKey.Icon]: Config.ToolbarIcons.FillAndSign,
  [Config.CustomToolbarKey.Items]: [Config.Tools.annotationCreateArrow, Config.Tools.annotationCreateCallout, Config.Buttons.undo]
};

...
<DocumentView
  annotationToolbars={[Config.DefaultToolbars.Annotate, myToolbar]}
/>

array of strings, optional, defaults to none

Defines which default annotation toolbars should be hidden. Note that this prop should be used when annotationToolbars is not defined. Strings should be Config.DefaultToolbars constants.

<DocumentView
  hideDefaultAnnotationToolbars={[Config.DefaultToolbars.Annotate, Config.DefaultToolbars.Favorite]}
/>

bool, optional, defaults to false

Defines whether to show the toolbar switcher in the top toolbar.

<DocumentView
  hideAnnotationToolbarSwitcher={false}
/>

bool, optional, defaults to false

Defines whether to hide both the top app nav bar and the annotation toolbar.

<DocumentView
  hideTopToolbars={false}
/>

bool, optional, defaults to false

Defines whether to hide the top navigation app bar.

<DocumentView
  hideTopAppNavBar={true}
/>

bool, optional, defaults to true

Defines whether an unhandled tap in the viewer should toggle the visibility of the top and bottom toolbars. When false, the top and bottom toolbar visibility will not be toggled and the page content will fit between the bars, if any.

<DocumentView
  hideToolbarsOnTap={false}
/>

array of strings, optional, iOS only

Customizes the right bar section of the top app nav bar. If passed in, the default right bar section will not be used. Strings should be [Config.Buttons]((https://github.com/ApryseSDK/pdftron-react-native/blob/master/src/Config/Config.js) constants.

<DocumentView
  topAppNavBarRightBar={[Config.Buttons.reflowButton, Config.Buttons.outlineListButton]}
/>

array of strings, optional, only the outline list, thumbnail list, share, view mode, search, and reflow buttons are supported on Android

Defines a custom bottom toolbar. If passed in, the default bottom toolbar will not be used. Strings should be [Config.Buttons]((https://github.com/ApryseSDK/pdftron-react-native/blob/master/src/Config/Config.js) constants.

<DocumentView
  bottomToolbar={[Config.Buttons.reflowButton, Config.Buttons.outlineListButton]}
/>

bool, optional, defaults to false, Android only

Defines whether the viewer will add padding to take account of the system status bar.

<DocumentView
  padStatusBar={true}
/>

string, optional, default value is 'FitWidth'

Defines the fit mode (default zoom level) of the viewer. String should be one of Config.FitMode constants.

<DocumentView
  fitMode={Config.FitMode.FitPage}
/>

string, optional, default value is 'Continuous'

Defines the layout mode of the viewer. String should be one of Config.LayoutMode constants.

<DocumentView
  layoutMode={Config.LayoutMode.FacingContinuous}
/>

function, optional

This function is called when the layout of the viewer has been changed.

<DocumentView
  onLayoutChanged = {() => {
    console.log('Layout has been updated.');
  }}
/>

number, optional

Defines the initial page number that viewer displays when the document is opened. Note that page numbers are 1-indexed.

<DocumentView
  initialPageNumber={5}
/>

number, optional

Defines the currently displayed page number. Different from initialPageNumber, changing this prop value at runtime will change the page accordingly.

<DocumentView
  pageNumber={5}
/>

bool, optional, defaults to true

Defines whether the viewer should change pages when the user taps the edge of a page, when the viewer is in a horizontal viewing mode.

<DocumentView
  pageChangeOnTap={true}
/>

bool, optional, defaults to true

Defines whether to show the page indicator for the viewer.

<DocumentView
  pageIndicatorEnabled={true}
/>

bool, optional, defaults to true, iOS only

Defines whether the keyboard shortcuts of the viewer are enabled.

<DocumentView
  keyboardShortcutsEnabled={false}
/>

function, optional

This function is called when the page number has been changed.

Parameters:

<DocumentView
  onPageChanged = {({previousPageNumber, pageNumber}) => {
    console.log('Page number changes from', previousPageNumber, 'to', pageNumber); 
  }}
/>

function, optional

This function is called when the zoom scale has been changed.

Parameters:

<DocumentView
  onZoomChanged = {(zoom) => {
    console.log('Current zoom ratio is', zoom); 
  }}
/>

function, optional

This function is called when a zooming has been finished. For example, if zoom via gesture, this is called on gesture release.

Parameters:

<DocumentView
  onZoomFinished = {(zoom) => {
    console.log('Current zoom ratio is', zoom);
  }}

number, optional

Defines the horizontal scroll position in the current document viewer.

<DocumentView
  horizontalScrollPos={50}
/>

number, optional

Defines the vertical scroll position in the current document viewer.

<DocumentView
  verticalScrollPos={50}
/>

function, optional

This function is called when the scroll position has been changed.

Parameters:

<DocumentView
  onScrollChanged = {({horizontal, vertical}) => {
    console.log('Current scroll position is', horizontal, 'horizontally, and', vertical, 'vertically.');
  }}

bool, optional, defaults to true

Whether to show images in reflow mode.

<DocumentView
  imageInReflowEnabled={false}
/>

string, optional, default value is 'Horizontal'. Android only.

Sets the scrolling direction of the reflow control. Strings should be Config.ReflowOrientation constants.

<DocumentView
  reflowOrientation={Config.ReflowOrientation.Vertical} 
/>

array of strings, optional, defaults to none

Defines annotation types that will not show in the annotation (long-press) menu. Strings should be Config.Tools constants.

<DocumentView
  hideAnnotationMenu={[Config.Tools.annotationCreateArrow, Config.Tools.annotationEraserTool]}
/>

array of strings, optional, default contains all the items

Defines the menu items that can show when an annotation is selected. Strings should be Config.AnnotationMenu constants.

<DocumentView
  annotationMenuItems={[Config.AnnotationMenu.search, Config.AnnotationMenu.share]}
/>

array of strings, optional, defaults to none

Defines the menu items that will skip default behavior when pressed. Strings should be Config.AnnotationMenu constants. They will still be displayed in the annotation menu, and the function onAnnotationMenuPress will be called where custom behavior can be implemented.

<DocumentView
  overrideAnnotationMenuBehavior={[Config.AnnotationMenu.copy]}
/>

function, optional

This function is called when an annotation menu item passed in to overrideAnnotationMenuBehavior is pressed.

Parameters:

<DocumentView
  onAnnotationMenuPress = {({annotationMenu, annotations}) => {
    console.log('Annotation menu item', annotationMenu, 'has been pressed');
    annotations.forEach(annotation => {
      console.log('The id of selected annotation is', annotation.id);
      console.log('The page number of selected annotation is', annotation.pageNumber);
      console.log('The type of selected annotation is', annotation.type);
      console.log('The lower left corner of selected annotation is', annotation.x1, annotation.y1);
    });
  }}
/>

bool, optional, defaults to true

Defines whether to show the popup menu of options when the user long presses on text or blank space on the document.

<DocumentView
  longPressMenuEnabled={true}
/>

array of strings, optional, default contains all the items

Defines menu items that can be shown when long pressing on text or blank space. Strings should be Config.LongPressMenu constants.

<DocumentView
  longPressMenuItems={[Config.LongPressMenu.copy, Config.LongPressMenu.read]}
/>

array of strings, optional, defaults to none

Defines the menu items on long press that will skip default behavior when pressed. Strings should be Config.LongPressMenu constants. They will still be displayed in the long press menu, and the function onLongPressMenuPress will be called where custom behavior can be implemented.

<DocumentView
  overrideLongPressMenuBehavior={[Config.LongPressMenu.search]}
/>

function, optional

This function is called if the pressed long press menu item is passed in to overrideLongPressMenuBehavior

Parameters:

<DocumentView
  onLongPressMenuPress = {({longPressMenu, longPressText}) => {
    console.log('Long press menu item', longPressMenu, 'has been pressed');
    if (longPressText !== '') {
      console.log('The selected text is', longPressText);
    }
  }}
/>

array of string, optional, defaults to none

Defines actions that will skip default behavior, such as external link click. Strings should be Config.Actions constants. The function onBehaviorActivated will be called where custom behavior can be implemented, whenever the defined actions occur.

<DocumentView
  overrideBehavior={[Config.Actions.linkPress]}
/>

function, optional

This function is called if the activated behavior is passed in to overrideBehavior

Parameters:

Data param table:

<DocumentView
  onBehaviorActivated = {({action, data}) => {
    console.log('Activated action is', action);
    if (action === Config.Actions.linkPress) {
      console.log('The external link pressed is', data.url);
    } else if (action === Config.Actions.stickyNoteShowPopUp) {
      console.log('Sticky note has been activated, but it would not show a pop up window.');
    }
  }}
/>

bool, optional, defaults to false

Defines whether viewer will use tabs in order to have more than one document open simultaneously (like a web browser). Changing the document prop value will cause a new tab to be opened with the associated file.

<DocumentView
  multiTabEnabled={true}
/>

string, optional, default is the file name

Set the tab title if multiTabEnabled is true.

<DocumentView
  multiTabEnabled={true} // requirement
  tabTitle={'tab1'}
/>

number, optional, defaults to unlimited

Sets the limit on the maximum number of tabs that the viewer could have at a time. Open more documents after reaching this limit will overwrite the old tabs.

<DocumentView
  multiTabEnabled={true} // requirement
  maxTabCount={5}
/>

bool, optional, defaults to false

Defines whether to enable realtime collaboration. If true then currentUser must be set as well for collaboration mode to work. Feature set may vary between local and collaboration mode

<DocumentView
  collabEnabled={true}
  currentUser={'Pdftron'}
/>

string, required if collabEnabled is set to true

Defines the current user. Created annotations will have their title (author) set to this string.

<DocumentView
  collabEnabled={true}
  currentUser={'Pdftron'}
/>

string, optional

Defines the current user name. Will set the user name only if collabEnabled is true and currentUser is defined. This should be used only if you want the user's display name to be different than the annotation's title/author (in the case that currentUser is an ID rather than a human-friendly name.)

<DocumentView
  collabEnabled={true}
  currentUser={'Pdftron'}
  currentUserName={'Hello_World'}
/>

bool, optional, defaults to false

Defines whether an annotation's permission flags will be respected when it is selected. For example, a locked annotation can not be resized or moved.

<DocumentView
  annotationPermissionCheckEnabled={true}
/>

string, optional

Defines the author name for all annotations created on the current document. Exported xfdfCommand will include this piece of information.

<DocumentView
  annotationAuthor={'Apryse'}
/>

bool, optional, defaults to true

If true, the active annotation creation tool will remain in the current annotation creation tool. Otherwise, it will revert to the "pan tool" after an annotation is created.

<DocumentView
  continuousAnnotationEditing={true}
/>

bool, optional, defaults to true

Defines whether an annotation is selected after it is created. On iOS, this functions for shape and text markup annotations only.

<DocumentView
  selectAnnotationAfterCreation={true}
/>

function, optional

This function is called if a change has been made to annotations in the current document. Unlike onAnnotationChanged, this function has an XFDF command string as its parameter. If you are modifying or deleting multiple annotations, then on Android the function is only called once, and on iOS it is called for each annotation.

Parameters:

Known Issues
On iOS, there is currently a bug that prevents the last XFDF from being retrieved when modifying annotations while collaboration mode is enabled.

<DocumentView
  onExportAnnotationCommand = {({action, xfdfCommand, annotations}) => {
    console.log('Annotation edit action is', action);
    console.log('The exported xfdfCommand is', xfdfCommand);
    annotations.forEach((annotation) => {
      console.log('Annotation id is', annotation.id);
      if (!this.state.collabEnabled) {
        console.log('Annotation pageNumber is', annotation.pageNumber);
        console.log('Annotation type is', annotation.type);
      }
    });
  }}
  collabEnabled={this.state.collabEnabled}
  currentUser={'Pdftron'}
/>

function, optional

This function is called when an annotation(s) is selected.

Parameters:

<DocumentView
  onAnnotationsSelected = {({annotations}) => {
    annotations.forEach(annotation => {
      console.log('The id of selected annotation is', annotation.id);
      console.log('It is in page', annotation.pageNumber);
      console.log('Its type is', annotation.type);
      console.log('Its lower left corner has coordinate', annotation.rect.x1, annotation.rect.y1);
    });
  }}
/>

function, optional

This function is called if a change has been made to an annotation(s) in the current document.

Parameters:

<DocumentView
  onAnnotationChanged = {({action, annotations}) => {
    console.log('Annotation edit action is', action);
    annotations.forEach(annotation => {
      console.log('The id of changed annotation is', annotation.id);
      console.log('It is in page', annotation.pageNumber);
      console.log('Its type is', annotation.type);
    });
  }}
/>

function, optional

This function is called if a change has been made to form field values.

Parameters:

<DocumentView
  onFormFieldValueChanged = {({fields}) => {
    console.log('Annotation edit action is', action);
    annotations.forEach(annotation => {
      console.log('The id of changed annotation is', annotation.id);
      console.log('It is in page', annotation.pageNumber);
    });
  }}
/>

bool, optional, Android only, default value is true

If document editing is enabled, then this value determines if the annotation list is editable.

<DocumentView
  annotationListEditingEnabled={true}
/>

function, optional

This function is called if a change has been made to user bookmarks.

Parameters:

<DocumentView
  onBookmarkChanged = {({bookmarkJson}) => {
    console.log('Bookmarks have been changed. Current bookmark collection is', bookmarkJson);
  }}
/>

bool, optional, default value is true

Defines whether the bookmark list can be edited. If the viewer is readonly then bookmarks on Android are still editable but are saved to the device rather than the PDF.

<DocumentView
  userBookmarksListEditingEnabled={true}
/>

bool, optional, defaults to false

Defines whether signature fields will be signed with image stamps. This is useful if you are saving XFDF to remote source.

<DocumentView
  signSignatureFieldsWithStamps={true}
/>

bool, optional, defaults to true

Defines whether to show saved signatures for re-use when using the signing tool.

<DocumentView
  showSavedSignatures={true}
/>

array of strings, optional

Defines filter modes that should be hidden in the thumbnails browser. Strings should be Config.ThumbnailFilterMode constants

<DocumentView
  hideThumbnailFilterModes={[Config.ThumbnailFilterMode.Annotated]}
/>

bool, optional, defaults to true

Defines whether user can modify the document using the thumbnail view (e.g. add/remove/rotate pages).

<DocumentView
  thumbnailViewEditingEnabled={true}
/>

function, optional

This function is called immediately before a text search begins, either through user actions, or function calls such as findText.

<DocumentView
  onTextSearchStart = {() => {
    console.log('Text search has started');
  }}
/>

function, optional

This function is called after a text search is finished or canceled.

Parameters:

quads indicate the quad boundary boxes for the selection, which could have a size larger than 1 if selection spans across different lines. Each quad have 4 points with x, y coordinates specified in number, representing a boundary box. The 4 points are in counter-clockwise order, though the first point is not guaranteed to be on lower-left relatively to the box.

<DocumentView
  onTextSearchResult = {({found, textSelection}) => {
    if (found) {
      console.log('Found selection on page', textSelection.pageNumber);
      for (let i = 0; i < textSelection.quads.length; i ++) {
        const quad = textSelection.quads[i];
        console.log('selection boundary quad', i);
        for (const quadPoint of quad) {
          console.log('A quad point has coordinates', quadPoint.x, quadPoint.y);
        }
      }
    }
  }}
/>

bool, optional, defaults to true

Defines whether a stylus should act as a pen when in pan mode. If false, it will act as a finger.

<DocumentView
  useStylusAsPen={true}
/>

bool, optional, Android and iOS 13+ only, defaults to true

Defines whether the UI will appear in a dark color when the system is dark mode. If false, it will use viewer setting instead.

<DocumentView
  followSystemDarkMode={false}
/>

bool, optional, defaults to true

Defines whether document is automatically saved by the viewer.

<DocumentView
  autoSaveEnabled={true}
/>

bool, optional, defaults to false

Defines whether to restrict data usage when viewing online PDFs.

<DocumentView
  restrictDownloadUsage={true}
/>

bool, optional, defaults to true, Android only

Defines whether the page stack navigation buttons will appear in the viewer.

<DocumentView
  pageStackEnabled={false}
/>

bool, optional, defaults to true, Android only

Defines whether the quick navigation buttons will appear in the viewer.

<DocumentView
  showQuickNavigationButton={false}
/>

bool, optional, defaults to true on Android and false on iOS

Defines whether the navigation list will be displayed as a side panel on large devices such as iPads and tablets.

<DocumentView
  showNavigationListAsSidePanelOnLargeDevices={true}
/>

Returns the path of the current document. If isBase64String is true, this would be the path to the temporary pdf file converted from the base64 string in document.

Returns a Promise.

Promise Parameters:

this._viewer.getDocumentPath().then((path) => {
  console.log('The path to current document is: ' + path);
});

Saves the current document. If isBase64String is true, this would be the base64 string encoded from the temporary pdf file, which is created from the base64 string in document.

Returns a Promise.

Promise Parameters:

this._viewer.saveDocument().then((filePath) => {
  console.log('saveDocument:', filePath);
});

Sets the color post processing transformation mode for the viewer.

Parameters:

this._viewer.setColorPostProcessMode(Config.ColorPostProcessMode.NightMode);

Sets the white and black color for the color post processing transformation.

Parameters:

const whiteColor = {"red": 0, "green": 0, "blue": 255};
const blackColor = {"red": 255, "green": 0, "blue": 0};
this._viewer.setColorPostProcessColors(whiteColor, blackColor);

Sets the current tool mode.

Parameters:

this._viewer.setToolMode(Config.Tools.annotationCreateFreeHand);

Commits the current tool, only available for multi-stroke ink and poly-shape.

Returns a Promise.

Promise Parameters:

this._viewer.commitTool().then((committed) => {
  // committed: true if either ink or poly-shape tool is committed, false otherwise
});

Gets the total number of pages in the currently displayed document.

Returns a Promise.

Promise Parameters:

this._viewer.getPageCount().then((pageCount) => {
  console.log('pageCount', pageCount);
});

Sets current page of the document.

Parameters:

Returns a Promise.

Promise Parameters:

this._viewer.setCurrentPage(4).then((success) => {
  if (success) {
    console.log("Current page is set to 4.");
  }
});

Go to the previous page of the document. If on first page, it would stay on first page.

Returns a Promise.

Promise Parameters:

this._viewer.gotoPreviousPage().then((success) => {
  if (success) {
    console.log("Go to previous page.");
  }
});

Go to the next page of the document. If on last page, it would stay on last page.

Returns a Promise.

Promise Parameters:

this._viewer.gotoNextPage().then((success) => {
  if (success) {
    console.log("Go to next page.");
  }
});

Go to the first page of the document.

Returns a Promise.

Promise Parameters:

this._viewer.gotoFirstPage().then((success) => {
  if (success) {
    console.log("Go to first page.");
  }
});

Go to the last page of the document.

Returns a Promise.

Promise Parameters:

this._viewer.gotoLastPage().then((success) => {
  if (success) {
    console.log("Go to last page.");
  }
});

Gets the crop box for specified page as a JSON object.

Parameters:

Returns a Promise.

Promise Parameters:

this._viewer.getPageCropBox(1).then((cropBox) => {
  console.log('bottom-left coordinate:', cropBox.x1, cropBox.y1);
  console.log('top-right coordinate:', cropBox.x2, cropBox.y2);
  console.log('width and height:', cropBox.width, cropBox.height);
});

Gets the visible pages in the current viewer as an array.

Returns a Promise.

Promise Parameters:

this._viewer.getVisiblePages().then((visiblePages) => {
  for (const page of visiblePages) {
    console.log('page', page, 'is visible.')
  }
});

Gets the rotation value of all pages in the current document.

Returns a Promise.

Promise Parameters:

this._viewer.getPageRotation().then((pageRotation) => {
  console.log('The current page rotation degree is' + pageRotation);
});

Rotates all pages in the current document in clockwise direction (by 90 degrees).

Returns a Promise.

this._viewer.rotateClockwise();

Rotates all pages in the current document in counter-clockwise direction (by 90 degrees).

Returns a Promise.

this._viewer.rotateCounterClockwise();

Imports remote annotation command to local document.

Parameters:

Returns a Promise.

const xfdfCommand = 'xfdfCommand <?xml version="1.0" encoding="UTF-8"?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><add><circle style="solid" width="5" color="#E44234" opacity="1" creationdate="D:20201218025606Z" flags="print" date="D:20201218025606Z" name="9d0f2d63-a0cc-4f06-b786-58178c4bd2b1" page="0" rect="56.4793,584.496,208.849,739.369" title="PDF" /></add><modify /><delete /><pdf-info import-version="3" version="2" xmlns="http://www.pdftron.com/pdfinfo" /></xfdf>';
this._viewer.importAnnotationCommand(xfdf);

Imports XFDF annotation string to the current document.

Parameters:

Returns a Promise.

const xfdf = '<?xml version="1.0" encoding="UTF-8"?>\n<xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">\n\t<annots>\n\t\t<circle style="solid" width="5" color="#E44234" opacity="1" creationdate="D:20190729202215Z" flags="print" date="D:20190729202215Z" page="0" rect="138.824,653.226,236.28,725.159" title="" /></annots>\n\t<pages>\n\t\t<defmtx matrix="1.333333,0.000000,0.000000,-1.333333,0.000000,1056.000000" />\n\t</pages>\n\t<pdf-info version="2" xmlns="http://www.pdftron.com/pdfinfo" />\n</xfdf>';
this._viewer.importAnnotations(xfdf);

Extracts XFDF from the current document.

Parameters:

Returns a Promise.

Promise Parameters:

Without options:

this._viewer.exportAnnotations().then((xfdf) => {
  console.log('XFDF for all annotations:', xfdf);
});

With options:

// annotList is an array of annotation data in the format {id: string, pageNumber: int}
const annotations = [{id: 'annot1', pageNumber: 1}, {id: 'annot2', pageNumber: 3}];
this._viewer.exportAnnotations({annotList: annotations}).then((xfdf) => {
  console.log('XFDF for 2 specified annotations', xfdf);
});

Flattens the forms and (optionally) annotations in the current document.

Parameters:

Returns a Promise.

// flatten forms and annotations in the current document.
this._viewer.flattenAnnotations(false);

Deletes the specified annotations in the current document.

Parameters:

Returns a Promise.

// delete annotations in the current document.
this._viewer.deleteAnnotations([
    {
        id: 'annotId1',
        pageNumber: 1,
    },
    {
        id: 'annotId2',
        pageNumber: 2,
    }
]);

Selects the specified annotation in the current document.

Parameters:

Returns a Promise.

// select annotation in the current document.
this._viewer.selectAnnotation('annotId1', 1);

Sets flags for specified annotations in the current document. The flagValue controls whether a flag will be set to or removed from the annotation.

Note: the old function setFlagForAnnotations is deprecated. Please use this one.

Parameters:

Returns a Promise.

//  Set flag for annotations in the current document.
this._viewer.setFlagsForAnnotations([
    {
        id: 'annotId1',
        pageNumber: 1,
        flag: Config.AnnotationFlags.noView,
        flagValue: true
    },
    {
        id: 'annotId2',
        pageNumber: 5,
        flag: Config.AnnotationFlags.lockedContents,
        flagValue: false
    }
]);

Sets properties for specified annotation in the current document, if it is valid.

Note: the old function setPropertyForAnnotation is deprecated. Please use this one.

Parameters:

Properties in propertyMap:

Returns a promise.

// Set properties for annotation in the current document.
this._viewer.setPropertiesForAnnotation('Pdftron', 1, {
  rect: {
    x1: 1.1,    // left
    y1: 3,      // bottom
    x2: 100.9,  // right
    y2: 99.8    // top
  },
  contents: 'Hello World',
  subject: 'Sample',
  title: 'set-prop-for-annot',
  customData: {
    key1: 'value1',
    key2: 'value2',
    key3: 'value3'
  },
  strokeColor: {
    "red": 255,
    "green": 0,
    "blue": 0
  }
});

Gets properties for specified annotation in the current document, if it is valid.

Parameters:

Available Properties:

Returns a promise.

Promise Parameters:

// Get properties for annotation in the current document.
this._viewer.getPropertiesForAnnotation('Pdftron', 1).then((properties) => {
  if (properties) {
    console.log('Properties for annotation: ', properties);
  }
})

Sets whether all annotations and forms should be rendered in the viewer.

Parameters:

Returns a promise.

this._viewer.setDrawAnnotations(false);

Sets visibility for specified annotation in the current document, if it is valid. Note that if drawAnnotations is set to false in the viewer, this function would not render the annotation even if visibility is true.

Parameters:

Returns a promise.

this._viewer.setVisibilityForAnnotation('Pdftron', 1, true);

Enables or disables highlighting form fields. It is disabled by default.

Parameters:

this._viewer.setHighlightFields(true);

Gets an annotation at the (x, y) position in screen coordinates, if any.

Parameters:

Returns a Promise.

Promise Parameters:

this._viewer.getAnnotationAt(167, 287, 100, 10).then((annotation) => {
  if (annotation) {
    console.log('Annotation found at point (167, 287) has id:', annotation.id);
  }
})

Gets the list of annotations at a given line in screen coordinates. Note that this is not an area selection. It should be used similar to getAnnotationAt, except that this should be used when you want to get multiple annotations which are overlaying with each other.

Parameters:

Returns a Promise.

Promise Parameters:

this._viewer.getAnnotationListAt(0, 0, 200, 200).then((annotations) => {
  for (const annotation of annotations) {
    console.log('Annotation found at line has id:', annotation.id);
  }
})

Gets the list of annotations on a given page.

Parameters:

Returns a Promise.

Promise Parameters:

this._viewer.getAnnotationListOnPage(2).then((annotations) => {
  for (const annotation of annotations) {
    console.log('Annotation found on page 2 has id:', annotation.id);
  }
})

Gets an annotation's customData property.

Parameters:

Returns a Promise.

Promise Parameters:

this._viewer.setPropertiesForAnnotation("annotation1", 2, {
  customData: {
    data: "Nice annotation"
  }
}).then(() => {
  this._viewer.getCustomDataForAnnotation("annotation1", 2, "data").then((value) => {
    console.log(value === "Nice annotation");
  })
})

Sets a field flag value on one or more form fields.

Parameters:

Returns a Promise.

this._viewer.setFlagForFields(['First Name', 'Last Name'], Config.FieldFlags.ReadOnly, true);

Sets field values on one or more form fields.

Note: the old function setValueForFields is deprecated. Please use this one instead.

Parameters:

Returns a Promise.

this._viewer.setValuesForFields({
  'textField1': 'Test',
  'textField2': 1234,
  'checkboxField1': true,
  'checkboxField2': false,
  'radioButton1': 'Yes',
  'radioButton2': 'No'
});

Get type and value information of a field using its name.

Parameters:

Returns a Promise.

Promise Parameters:

this._viewer.getField('someFieldName').then((field) => {
  if (field !== undefined) {
    console.log('field name:', field.fieldName);
    console.log('field value:', field.fieldValue);
    console.log('field type:', field.fieldType);
  }
});

Handles the back button in search mode. Android only.

Returns a Promise.

Promise Parameters:

this._viewer.handleBackButton().then((handled) => {
  if (!handled) {
    BackHandler.exitApp();
  }
});

Imports user bookmarks into the document. The input needs to be a valid bookmark JSON format.

Parameters:

Returns a Promise.

this._viewer.importBookmarkJson("{\"0\": \"Page 1\", \"3\": \"Page 4\"}");

Closes all tabs in multi-tab environment.

Returns a Promise.

// Do this only when DocumentView has multiTabEnabled = true
this._viewer.closeAllTabs();

Returns the current zoom scale of current document viewer.

Returns a Promise.

Promise Parameters:

this._viewer.getZoom().then((zoom) => {
  console.log('Zoom scale of the current document is:', zoom);
});

Sets the minimum and maximum zoom bounds of current viewer.

Parameters:

Returns a Promise.

this._viewer.setZoomLimits(Config.ZoomLimitMode.Absolute, 1.0, 3.5);

Sets the zoom scale in the current document viewer with a zoom center.

Parameters:

Returns a Promise.

this._viewer.zoomWithCenter(3.0, 100, 300);

Zoom the viewer to a specific rectangular area in a page.

Parameters:

Returns a Promise.

this._viewer.zoomToRect(3, {'x1': 1.0, 'y1': 2.0, 'x2': 3.0, 'y2': 4.0});

Zoom to a paragraph that contains the specified coordinate. If no paragraph contains the coordinate, the zooming would not happen.

Parameters:

Returns a Promise.

this._viewer.smartZoom(100, 200, true);

Returns the horizontal and vertical scroll position of current document viewer.

Returns a Promise.

Promise Parameters:

this._viewer.getScrollPos().then(({horizontal, vertical}) => {
  console.log('Current horizontal scroll position is:', horizontal);
  console.log('Current vertical scroll position is:', vertical);
});

Returns the canvas size of current document viewer.

Returns a Promise.

Promise Parameters:

this._viewer.getCanvasSize().then(({width, height}) => {
  console.log('Current canvas width is:', width);
  console.log('Current canvas height is:', height);
});

Converts points from page coordinates to screen coordinates in the viewer.

Parameters:

Returns a Promise.

Promise Parameters:

// convert (50, 50) on current page and (100, 100) on page 1 from page system to screen system
this._viewer.convertPagePointsToScreenPoints([{x: 50, y: 50}, {x: 100, y:100, pageNumber: 1}]).then((convertedPoints) => {
  convertedPoints.forEach(point => {
    console.log(point);
  })
});

Converts points from screen coordinates to page coordinates in the viewer.

Parameters:

Returns a Promise.

Promise Parameters:

// convert (50, 50) and (100, 100) from screen system to page system, on current page and page 1 respectively
this._viewer.convertScreenPointsToPagePoints([{x: 50, y: 50}, {x: 100, y:100, pageNumber: 1}]).then((convertedPoints) => {
  convertedPoints.forEach(point => {
    console.log(point);
  })
});

Returns the page number that contains the point on screen.

Parameters:

Returns a Promise.

Promise Parameters:

this._viewer.getPageNumberFromScreenPoint(10.0,50.5).then((pageNumber) => {
  console.log('The page number of the screen point is', pageNumber);
});

Sets whether the control will render progressively or will just draw once the entire view has been rendered.

Parameters:

Returns a Promise.

// delay for 10s before start, and refresh every 1s
this._viewer.setProgressiveRendering(true, 10000, 1000);

Enables or disables image smoothing. The rasterizer allows a trade-off between rendering quality and rendering speed. This function can be used to indicate the preference between rendering speed and quality.

Parameters:

Returns a Promise.

this._viewer.setImageSmoothing(false);

Enables or disables support for overprint and overprint simulation. Overprint is a device dependent feature and the results will vary depending on the output color space and supported colorants (i.e. CMYK, CMYK+spot, RGB, etc).

Parameters:

Returns a Promise.

this._viewer.setOverprint(Config.OverprintMode.Off);

Sets whether to extract urls from the current document, which is disabled by default. It is recommended to set this value before document is opened.

Parameters:

this._viewer.setUrlExtraction(true);

Sets whether borders of each page are visible in the viewer, which is disabled by default.

Parameters:

this._viewer.setPageBorderVisibility(true);

Enables or disables transparency grid (check board pattern) to reflect page transparency, which is disabled by default.

Parameters:

this._viewer.setPageTransparencyGrid(true);

Sets the background color of the viewer.

Parameters:

this._viewer.setBackgroundColor({red: 0, green: 0, blue: 255}); // blue color

Sets the default page color of the viewer.

Parameters:

this._viewer.setDefaultPageColor({red: 0, green: 255, blue: 0}); // green color

Searches asynchronously, starting from the current page, for the given text. PDFViewCtrl automatically scrolls to the position so that the found text is visible.

Returns a Promise.

Promise Parameters:

this._viewer.findText('Apryse', false, false, true, false);

Cancels the current text search thread, if exists.

Returns a Promise.

this._viewer.cancelFindText();

Returns the text selection on a given page, if any.

Returns a Promise.

Promise Parameters:

quads indicate the quad boundary boxes for the selection, which could have a size larger than 1 if selection spans across different lines. Each quad have 4 points with x, y coordinates specified in number, representing a boundary box. The 4 points are in counter-clockwise order, though the first point is not guaranteed to be on lower-left relatively to the box.

this._viewer.getSelection(2).then((selection) => {
  if (selection) {
    console.log('Found selection on page', selection.pageNumber);
    for (let i = 0; i < selection.quads.length; i ++) {
      const quad = selection.quads[i];
      console.log('selection boundary quad', i);
      for (const quadPoint of quad) {
        console.log('A quad point has coordinates', quadPoint.x, quadPoint.y);
      }
    }
  }
});

Returns whether there is a text selection in the current document.

Returns a Promise.

Promise Parameters:

this._viewer.hasSelection().then((hasSelection) => {
  console.log('There is a selection in the document.');
});

Clears any text selection in the current document.

Returns a Promise.

this._viewer.clearSelection();

Returns the page range (beginning and end) that has text selection on it.

Returns a Promise.

Promise Parameters:

this._viewer.getPageSelectionRange().then(({begin, end}) => {
  if (begin === -1) {
    console.log('There is no selection');
  } else {
    console.log('The selection range is from', begin, 'to', end);
  }
});

Returns whether there is a text selection on the specified page in the current document.

Parameters:

Returns a Promise.

Promise Parameters:

this._viewer.hasSelectionOnPage(5).then((hasSelection) => {
  if (hasSelection) {
    console.log('There is a selection on page 5 in the document.');
  }
});

Selects the text within the given rectangle region.

Parameters:

Returns a Promise.

Promise Parameters:

this._viewer.selectInRect({x1: 0, y1: 0, x2: 200.5, y2: 200.5}).then((selected) => {
        console.log(selected);
});

Returns whether there is text in given rectangle region.

Parameters:

Returns a Promise.

Promise Parameters:

this._viewer.isThereTextInRect({x1: 0, y1: 0, x2: 200, y2: 200}).then((hasText) => {
        console.log(hasText);
});

Selects all text on the page.

Returns a Promise.

this._viewer.selectAll();
});

Export a PDF page to image format defined in Config.ExportFormat.

Parameters:

Returns a Promise.

this._viewer.exportToImage(1, 92, Config.ExportFormat.BMP).then((path) => {
  console.log('export', path);
});

Undo the last modification.

Returns a Promise.

this._viewer.undo();

Redo the last modification.

Returns a Promise.

this._viewer.redo();

Displays the page crop option. Android only.

Returns a Promise.

this._viewer.showCrop();