Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ViewerOptions

GcDocs PDF Viewer options class.

Hierarchy

  • ViewerOptions

Index

Constructors

constructor

  • ViewerOptions constructor

    example
    // Create options object:
    var options = { snapAlignment: false, supportApi: 'api/pdf-viewer'};
    // Pass options object to the GcPdfViewer constructor:
    var viewer = new GcPdfViewer("#root", options);
    

    Parameters

    • Optional options: Partial<ViewerOptions>

      viewer options object.

    Returns ViewerOptions

Properties

Optional baseUrl

baseUrl: undefined | string = ""

Used by form submission and for theme urls.

example
var viewer = new GcPdfViewer("#root", { baseUrl: "http://localhost/mysite/" });

Optional cMapPacked

cMapPacked: undefined | false | true

Indicates if the viewer should look for a compressed version of the CMap file with the extension '.bin'.

default

true

example
var viewer = new GcPdfViewer("#root", { cMapPacked: false } );

Optional cMapUrl

cMapUrl: undefined | string

The URI to a folder where the external font CMap tables are stored.

default

'resources/bcmaps/'

example
var viewer = new GcPdfViewer("#root", { cMapUrl: "../data/cmaps/" } );

Optional coordinatesOrigin

coordinatesOrigin: "TopLeft" | "BottomLeft" = "TopLeft"

Origin coordinates for the PDF page. The option is used for a properties panel of the Annotation and Form editor.

default

TopLeft

example
// Change the coordinates origin to bottom/left point:
var viewer = new GcPdfViewer("#root", { coordinatesOrigin: "BottomLeft" } );

Optional disablePageLabels

disablePageLabels: undefined | false | true = false

Set this options to true if you wish to disable page labels.

example
var viewer = new GcPdfViewer("#root", { disablePageLabels: true } );

documentListUrl

documentListUrl: string = "/documents"

URL to document list service used by DocumentListPanel (see addDocumentListPanel method). The service should return JSON string with available documents array, e.g.: ["pdf1.pdf", "pdf2.pdf"]

example

var viewer = new GcPdfViewer("#root", { documentListUrl: "documents.json" } );

Optional externalLinkTarget

externalLinkTarget: "blank" | "self" | "parent" | "top" | "none"

The externalLinkTarget option sets the value of the target attribute of a link annotation. The externalLinkTarget option specifies where to open the linked document. Possible values are: 'blank', 'self', 'parent', 'top', 'none'.

default

'none'

example
var viewer = new GcPdfViewer("#root", { externalLinkTarget: "self" } );

Optional file

file: string | any = ""

Specifies the PDF file name, URL, or binary data to be loaded in the Viewer.

example
var viewer = new GcPdfViewer("#root", { file: 'GcPdf.pdf' } );

Optional friendlyFileName

friendlyFileName: undefined | string = ""

Used when file name not available.

example
viewer.options.friendlyFileName = "myFileName.pdf";
viewer.applyOptions();

Optional hideAnnotationTypes

hideAnnotationTypes: ("Text" | "Link" | "FreeText" | "Line" | "Square" | "Circle" | "Polygon" | "Ink" | "Popup" | "FileAttachment" | "Sound" | "Redact" | "Signature" | "ThreadBead" | "RadioButton" | "Checkbox" | "PushButton" | "Choice" | "TextWidget" | "Polyline")[] | "All" | "None" = ['Text', 'FreeText', 'Line', 'Square', 'Circle', 'Polygon', 'Polyline', 'Ink', 'Popup','Sound', 'Polygon', 'RadioButton', 'Checkbox', 'PushButton', 'Choice', 'TextWidget', 'Redact', 'FileAttachment', 'Signature' ]

Specifies annotation types which will be hidden when 'hide-annotations' button is checked. Possible values are: ['Text', 'Link', 'FreeText', 'Line', 'Square', 'Circle', 'Polygon', 'Polyline', 'Ink', 'Popup', 'FileAttachment', 'Sound', 'ThreadBead', 'RadioButton', 'Checkbox', 'PushButton', 'Choice', 'TextWidget', 'Redact'] or 'All' or 'None'

default

['Text', 'FreeText', 'Line', 'Square', 'Circle', 'Polygon', 'Polyline', 'Ink', 'Popup', 'Sound', 'Polygon', 'RadioButton', 'Checkbox', 'PushButton', 'Choice', 'TextWidget', 'Redact'];

example
// Hide all possible annotations.
let options = { hideAnnotationTypes: 'All' };
example
// Hide Push button and Redact annotations only.
let options = { hideAnnotationTypes: ['PushButton', 'Redact'] };

keepFileData

keepFileData: boolean = false

Set this option to true if you want to use the fileData property even if the document cannot be parsed as a valid PDF document.

example
// Below is an example of how to display invalid file data when an error occurs:
var viewer = new GcPdfViewer('#root', { keepFileData: true });
viewer.onError.register(function(eventArgs) {
  var message = eventArgs.message;
  if (message.indexOf("Invalid PDF structure") !== -1) {
    console.log('Unable to load pdf document, pdf document is broken.');
    console.log("File data:");
    // Output file data to console:
    console.log(viewer.fileData);
  } else {
    console.log('Unexpected error: ' + message);
  }
});
viewer.open('sample.pdf');

Optional language

language: "en" | string

User interface language.

default

'en'

example
function loadPdfViewer(selector) {
  // You can load translations from any source (see en-pdf-viewer.json for an example):
  var myTranslations = {
        "toolbar": {
            "open-document": "Open MY document",
            "pan": "My Pan tool",
        }
   };
   // Initialize translations:
   GcPdfViewer.i18n.init({
     resources: { myLang: { translation: myTranslations } }
   }).then(function(t) {
     // New translations initialized and ready to go!
     // Now create PDF viewer:
     var viewer = new GcPdfViewer(selector, { language: 'myLang' });
     viewer.addDefaultPanels();
     //viewer.open("sample.pdf");
   });
}
loadPdfViewer('#root');

Optional onBeforeCloseContextMenu

onBeforeCloseContextMenu: Function

This function will be called when context menu is about to be hidden. Return false if you want to prevent close context menu action.

default

undefined

example
viewer.options.onBeforeCloseContextMenu = function(e) {
  console.log("The context menu will be closed soon.");
  return true;
};
default

undefined

example
viewer.options.onBeforeCloseContextMenu = function(e) {
  if(!confirm("Do you want to close context menu?")) {
      console.log("The context menu will not be closed.");
      return false;
  }
  console.log("The context menu will be closed.");
  return true;
};

Optional onBeforeOpenContextMenu

onBeforeOpenContextMenu: Function

This function will be called when context menu is about to be shown. You can use this function to customize context menu. Return false if you want to prevent open context menu action.

default

undefined

example
 // This code shows how to modify the context menu and
 // add search using Google and Bing search engines:
 viewer.options.onBeforeOpenContextMenu = function (items, mousePosition, viewer) {
  var selectedText = viewer.getSelectedText();
  if (selectedText) {
    // Remove existent items:
    items.splice(0, items.length);
    // Add own menu items:
    items.push({
       type: 'button',
       text: 'Search using Google',
       onClick: function () {
             window.open('http://www.google.com/search?q=' + encodeURI(selectedText), '_blank');
       }
    });
    items.push({
       type: 'button',
       text: 'Search using Bing',
       onClick: function () {
           window.open('https://www.bing.com/search?q=' + encodeURI(selectedText), '_blank');
      }
    });
   }
   return true;
 };

password

password: string = ""

A predefined password for protected pdf documents.

example
viewer.options.password = "abc123";
viewer.open("protected.pdf");

renderInteractiveForms

renderInteractiveForms: boolean = true

Render interactive form elements.

example
// Do not render interactive form:
var viewer = new GcPdfViewer("#root", { renderInteractiveForms: false } );

renderer

renderer: "canvas" | "svg" = "canvas"

PDF document renderer type - canvas or svg.

example
var viewer = new GcPdfViewer("#root", { renderer: "svg" } );

snapAlignment

snapAlignment: true | false | { center: false | true | { horizontal: boolean; vertical: boolean }; margin: false | true | number | { horizontal: number | boolean; vertical: number | boolean }; tolerance: number | { horizontal: number | false; vertical: number | false } }

The Snap Alignment feature customization settings. The tolerance setting is the distance between the edges of two objects within which the object that is being moved or resized snaps to the other object. Margin is the extra space before or after the edge of a field or page. The margin setting is the distance from the target object to which the edge of the object being moved or resized snaps. The center setting allows to snap objects to centers of other objects (in addition to edges).

default
{ snapAlignment: true }
By default, snap tolerance is 5pt,
snap margin between objects and page edges is 10pt,
snap to center is true.
example
// Enable vertical snap margin:
var viewer = new GcPdfViewer("#root", { snapAlignment: { margin: { vertical: 10, horizontal: false} }, supportApi: 'api/pdf-viewer'});

Optional supportApi

supportApi: string | { apiUrl: string; docBaseUrl: string; suppressErrorMessages?: undefined | false | true; suppressInfoMessages?: undefined | false | true }

URL to an external Web API service which will be used to enable PDF editing features.

example
var viewer = new GcPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );

theme

theme: string = "themes/viewer"

Use this option to change default viewer theme.

example
var viewer = new GcPdfViewer("#root", { themes: ["themes/viewer", "themes/light-blue", "themes/dark-yellow"] } );
viewer.options.theme = "dark-yellow.css";
viewer.applyOptions();

themes

themes: string[] = ["themes/viewer", "themes/light-blue", "themes/dark-yellow"]

Available viewer themes.

example
var viewer = new GcPdfViewer("#root", { themes: ["themes/viewer", "themes/light-blue", "themes/dark-yellow"] } );

useNativeContextMenu

useNativeContextMenu: boolean = false

By default, the viewer uses its own context menu. Set this option to true if you want to use the browser context menu. Please, note, if you set this option to true, some functions of the context menu will not be available (for example, actions of the Editor and Reply tool).

default

false

example
// Enable native browser context menu:
var viewer = new GcPdfViewer("#root", { useNativeContextMenu: true } );

userData

userData: any

Arbitrary data associated with the viewer. This data is sent to the server when the document is saved.

example
var viewer = new GcPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
viewer.options.userData = { secretNumber: 5, innerData: { innerContent: 'content' } };
viewer.applyOptions();
viewer.open('sample.pdf');

Optional userName

userName: undefined | string = ""

Author's user name. The option is used by Annotation Editor as default value for 'author' field.

example
var viewer = new GcPdfViewer('#root', { userName: 'John', supportApi: 'api/pdf-viewer' });

workerSrc

workerSrc: string = "gcpdfviewer.worker.js"

URL to the Web Worker script. The Web Worker script runs in the background and is used to load and render PDF documents in a parallel background thread. Please, note, that rendering a PDF on the main thread (without a Web Worker script) can slow down the performance of the PDF viewer when loading large PDF files.

example
var viewer = new GcPdfViewer("#root", { workerSrc: "http://localhost:5000/gcpdfviewer.worker.js" } );

Object literals

Optional caret

caret: object

Text selection cursor settings.

description
Settings description:
caretBlinkTime - milliseconds, caret blink period
caretStopBlinkTime - milliseconds, stop caret blink time, 0 - don't stop
color - The caret color
width - The caret width
allowForPan - Allow to move caret using keys even when pan tool activated.
example
// Hide the caret:
var viewer = new GcPdfViewer("#root", { caret: false } );
example
// Change the caret color and width:
var viewer = new GcPdfViewer("#root", { caret: {"color": "#ff0000", "width": 2} } );

allowForPan

allowForPan: false = false

caretBlinkTime

caretBlinkTime: number = 300

caretStopBlinkTime

caretStopBlinkTime: number = 5000

color

color: string = "#000000"

width

width: number = 1

editorDefaults

editorDefaults: object

Contains default values for new annotations and fields.

example
// Change the default sticky note and text annotation color to Red:
var viewer = new GcPdfViewer("#root", { editorDefaults: { stickyNote: "#ff0000", textAnnotation: "#ff0000" }, supportApi: 'api/pdf-viewer'});

stickyNote

stickyNote: object

color

color: string = "#38e5ff"

contents

contents: string = ""

textAnnotation

textAnnotation: object

color

color: string = "#ffdc38"

contents

contents: string = ""

Optional restoreViewStateOnLoad

restoreViewStateOnLoad: object

Track view changes and restore previous state on next page load. Note for trackFile - we are tracking opened file only when you open document using URI, not binary data.

example
// disable tracking view changes:
var viewer = new GcPdfViewer("#root", { restoreViewStateOnLoad: false } );
example
// Track only scale (zoom):
var viewer = new GcPdfViewer("#root", { trackScale: true } );

trackFile

trackFile: false = false

trackMouseMode

trackMouseMode: true = true

trackSidebar

trackSidebar: true = true

trackSidebarWidth

trackSidebarWidth: true = true

trackTheme

trackTheme: true = true

trackViewMode

trackViewMode: true = true

shortcuts

shortcuts: object

Keyboard shortcuts

13

13: { ctrl: boolean; keyCode: number; tool: string }[] = [{ keyCode: 13, tool: "confirm-ok", ctrl: true, }]

27

27: { keyCode: number; tool: string }[] = [{ keyCode: 27, tool: "confirm-cancel" }]

33

33: { tool: string }[] = [{tool: "scrollUp"}]

34

34: { tool: string }[] = [{tool: "scrollDown"}]

35

35: ({ ctrl: boolean; keyCode: number; shift: boolean; tool: string } | { ctrl: boolean; keyCode: number; tool: string } | { keyCode: number; shift: boolean; tool: string } | { keyCode: number; tool: string })[] = [{keyCode: 35,tool: "move_caret_document_end",shift: true,ctrl: true,}, {keyCode: 35,tool: "move_caret_document_end",ctrl: true,}, {keyCode: 35,tool: "move_caret_sequence_end",shift: true,}, {keyCode: 35,tool: "move_caret_sequence_end"}]

36

36: ({ ctrl: boolean; keyCode: number; shift: boolean; tool: string } | { ctrl: boolean; keyCode: number; tool: string } | { keyCode: number; shift: boolean; tool: string } | { keyCode: number; tool: string })[] = [{keyCode: 36,tool: "move_caret_document_start",shift: true,ctrl: true,}, {keyCode: 36,tool: "move_caret_document_start",ctrl: true,}, {keyCode: 36,tool: "move_caret_sequence_start",shift: true,}, {keyCode: 36,tool: "move_caret_sequence_start"}]

37

37: ({ keyCode: number; shift: boolean; tool: string } | { alt: boolean; keyCode: number; tool: string } | { keyCode: number; tool: string })[] = [{keyCode: 37,tool: "move_caret_left",shift: true,}, {keyCode: 37,tool: "history_back",alt: true,},{keyCode: 37,tool: "move_caret_left"}]

38

38: ({ keyCode: number; shift: boolean; tool: string } | { keyCode: number; tool: string })[] = [{keyCode: 38,tool: "move_caret_up",shift: true,},{keyCode: 38,tool: "move_caret_up"}]

39

39: ({ keyCode: number; shift: boolean; tool: string } | { alt: boolean; keyCode: number; tool: string } | { keyCode: number; tool: string })[] = [{keyCode: 39,shift: true,tool: "move_caret_right"},{keyCode: 39,alt: true,tool: "history_forward"}, {keyCode: 39,tool: "move_caret_right"}]

40

40: ({ keyCode: number; shift: boolean; tool: string } | { keyCode: number; tool: string })[] = [{keyCode: 40,tool: "move_caret_down",shift: true,},{keyCode: 40,tool: "move_caret_down"}]

R

R: ({ tool: string } | { shift: boolean; tool: string })[] = [{ tool: "rotate" }, { shift: true, tool: "rotate" }]

0

0: object

ctrl

ctrl: boolean = true

tool

tool: string = "zoom_pagesize"

107

107: object

ctrl

ctrl: boolean = true

tool

tool: string = "zoomin"

109

109: object

ctrl

ctrl: boolean = true

tool

tool: string = "zoomout"

187

187: object

ctrl

ctrl: boolean = true

tool

tool: string = "zoomin"

189

189: object

ctrl

ctrl: boolean = true

tool

tool: string = "zoomout"

9

9: object

ctrl

ctrl: boolean = true

tool

tool: string = "zoom_clientsize"

A

A: object

ctrl

ctrl: boolean = true

tool

tool: string = "select_all"

F

F: object

ctrl

ctrl: boolean = true

tool

tool: string = "search"

H

H: object

tool

tool: string = "pan"

O

O: object

ctrl

ctrl: boolean = true

tool

tool: string = "open"

P

P: object

ctrl

ctrl: boolean = true

tool

tool: string = "print"

S

S: object

tool

tool: string = "selection"

useCanvasForSelection

useCanvasForSelection: object

Color settings for highlighting text and for active / inactive highlighting.

example
var options = {
  useCanvasForSelection: {
    selectionColor: "rgba(0, 0, 0, 0.25)",
    highlightColor: "rgba(255, 94, 255, 0.35)",
    inactiveHighlightColor: "rgba(125, 30, 176, 0.35)"
  }
};
var viewer = new GcPdfViewer("#root", options );
viewer.addSearchPanel();
viewer.open("sample.pdf");

highlightColor

highlightColor: string = "rgba(255, 94, 0, 0.35)"

inactiveHighlightColor

inactiveHighlightColor: string = "rgba(180, 0, 170, 0.35)"

selectionColor

selectionColor: string = "rgba(0, 86, 195, 0.25)"

zoomByMouseWheel

zoomByMouseWheel: object

Zoom by mouse wheel settings.

example
// Enable zoom with the mouse wheel without pressing the Control or Meta keys:
var viewer = new GcPdfViewer("#root", { zoomByMouseWheel: { always: true } } );

always

always: false = false

ctrlKey

ctrlKey: true = true

metaKey

metaKey: true = true