Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ViewerOptions

GcDocs PDF Viewer options class.

Hierarchy

  • ViewerOptions

Index

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" } );

coordinatesPrecision

coordinatesPrecision: number

Annotation coordinates round precision. Used by the Annotation and Form editor.

default

1

example
// Change the default rounding precision to 0.001:
var viewer = new GcPdfViewer("#root", { coordinatesPrecision: 0.001 } );

Optional customIcons

customIcons: undefined | {}

Use this option to change the default SVG icons to custom ones. Available icon keys: 'undo2', 'font-bold', 'font-italic', 'checkbox-checked', 'checkbox-unchecked', 'close', 'aspect-ratio', 'search', 'chevron', 'chevron-accent', 'animated-spinner', 'drag-handle', 'download', 'keyboard', 'brush', 'image', 'image-list', 'save', 'theme-change', 'single-page', 'continuous-view', 'view-mode', 'show-view-tools', 'show-edit-tools', 'show-form-editor', 'toggle-annotation-properties', 'toggle-form-properties', 'edit-converted-to-content', 'edit-free-text', 'edit-ink', 'edit-text', 'edit-square', 'edit-line', 'edit-link', 'edit-circle', 'edit-stamp', 'add-stamp-accent', 'edit-sign-tool', 'edit-file-attachment', 'edit-sound', 'edit-polyline', 'edit-polygon', 'edit-popup', 'edit-redact', 'edit-redact-apply', 'edit-redact-applied', 'edit-unknown-type', 'edit-widget-signature', 'edit-widget-tx-field', 'edit-widget-tx-text-area', 'edit-widget-tx-comb', 'edit-widget-tx-password', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio', 'edit-widget-btn-push', 'edit-widget-btn-submit', 'edit-widget-btn-reset', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-unknown-type', 'edit-undo', 'edit-redo', 'remove-attachment', 'edit-select', 'edit-erase', 'form-filler', 'field-invalid', 'new-document', 'new-page', 'delete-page', 'print', 'rotate', 'confirm-ok', 'confirm-cancel', 'open', 'open-pdf', 'text-selection', 'hide-annotations', 'pan', 'bookmarks', 'structure-tree', 'layers', 'thumbnails', 'articles', 'attachments', 'documents-list', 'share', 'shared-documents-list', 'view-mode-on', 'view-mode-off', 'edit-mode-on', 'edit-mode-off', 'remove-user', 'doc-properties', 'about', 'pdf-doc-title', 'close-icon-sm', 'menu-dots', 'comments-status-accepted', 'comments-status-cancelled', 'comments-status-completed', 'comments-status-rejected', 'context-copy', 'context-paste', 'context-cut', 'context-delete', 'move-to-top-page', 'move-to-bottom-page', 'arrow-expand-horizontal', 'arrow-expand-all', 'magnify-minus-outline', 'magnify-plus-outline', 'magnify', 'text-tools', 'draw-tools', 'attachment-tools', 'form-tools', 'page-tools', 'resize-handle-h'.

example
var viewer = new GcPdfViewer(selector, {
  customIcons: {
    'open': '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M9.516 14.016q1.875 0 3.188-1.313t1.313-3.188-1.313-3.188-3.188-1.313-3.188 1.313-1.313 3.188 1.313 3.188 3.188 1.313zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281q-1.781 1.547-4.219 1.547-2.719 0-4.617-1.875t-1.898-4.594 1.898-4.617 4.617-1.898 4.594 1.898 1.875 4.617q0 0.984-0.469 2.227t-1.078 1.992l0.281 0.281h0.797z"></path></svg>',
    'search': '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M9.516 14.016q1.875 0 3.188-1.313t1.313-3.188-1.313-3.188-3.188-1.313-3.188 1.313-1.313 3.188 1.313 3.188 3.188 1.313zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281q-1.781 1.547-4.219 1.547-2.719 0-4.617-1.875t-1.898-4.594 1.898-4.617 4.617-1.898 4.594 1.898 1.875 4.617q0 0.984-0.469 2.227t-1.078 1.992l0.281 0.281h0.797z"></path></svg>'
  }
});

Optional disableFeatures

disableFeatures: ViewerFeatureName[]

Use the disableFeatures option to disable certain features of the GcPdfViewer depending on your company security policy. Note, you can specify the disableFeatures option only during the GcPdfViewer initialization.

example
// Disable DragAndDrop operations, JavaScript actions, File and Sound attachments:
var viewer = new GcPdfViewer("#root", { disableFeatures: ['DragAndDrop', 'JavaScript', 'AllAttachments'] } );
example
// Disable DragAndDrop for the GcPdfViewer:
var viewer = new GcPdfViewer(selector, {
  disableFeatures: ['DragAndDrop']
});

Optional disablePageLabels

disablePageLabels: undefined | false | true = false

Set this option 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"]

default

"/documents"

example
// Load document list from external service:
var viewer = new GcPdfViewer("#root", { documentListUrl: "documents.json" } );
example
// Load document list using DATA URI:
var viewer = new GcPdfViewer("#root", { documentListUrl: 'data:,[{"path": "doc1.pdf"}, {"path": "doc2.pdf", "name": "Hello doc 2", "title": "title 2"}]' } );

Optional enableXfa

enableXfa: undefined | false | true = true

Render dynamic Xfa forms if any.

default

The default value is true.

example
// Turn off XFA forms rendering.
var viewer = new GcPdfViewer(selector, { enableXfa: false });

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: "blank" } );

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 formFiller

formFiller: FormFillerSettings

Form filler dialog settings.

example
var formFiller = {
   mapping: {
       'UserNameField1': {
           title: 'User Name',
           displayname: 'username',
           placeholder: 'Enter here...',
           validateoninput: true,
           validator: function(fieldValue, field) {
               if(fieldValue.length >= 3)
                   return true;
               else
                   return 'username must be at least 3 characters';
           }
       },
       'fld2': { hidden: true },
       'Country Combo Box': {
           displayname: 'Country',
           required: true
        },
       'fld3': { displayName: 'First name!',
           title: 'Please enter your first name.',
           rowCustomCSS: 'given-name-row'
        }
   }
};
var viewer = new GcPdfViewer('#root', { formFiller: formFiller });
viewer.addDefaultPanels();
example
var viewer = new GcPdfViewer(selector, {
     renderInteractiveForms: true,
     formFiller: {
         validator: function(val) {return (val ? null : 'The field cannot be empty'); }
     }
});

Optional friendlyFileName

friendlyFileName: undefined | string = ""

Used when file name not available.

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

Optional hideAnnotationPopups

hideAnnotationPopups: AnnotationTypeName | "All" | "None" | boolean

Use this option if you want to hide annotation popups. Possible values are: ['Text', 'Link', 'Line', 'Square', 'Circle', 'Polygon', 'PolyLine', 'Ink', 'Popup', 'FileAttachment', 'Sound', 'Redact', 'Stamp'] or true or 'All' (true and 'All' have the same behavior).

default

undefined

example
// Example: hide popups for all annotations:
var viewer = new GcPdfViewer("#root", { hideAnnotationPopups: true });
// Example: hide popups for Redact, Circle and Square annotations:
var viewer = new GcPdfViewer("#root", { hideAnnotationPopups: ["Redact", "Circle", "Square"] });

Optional hideAnnotationTypes

hideAnnotationTypes: AnnotationTypeName[] | "All" | "None" | boolean = ['Text', 'FreeText', 'Line', 'Square', 'Circle', 'Polygon', 'PolyLine', 'Ink', 'Popup','Sound', 'Polygon', 'RadioButton', 'Checkbox', 'PushButton', 'Choice', 'TextWidget', 'Redact', 'FileAttachment', 'Signature', 'Stamp', 'Highlight', 'Underline', 'Squiggly', 'StrikeOut']

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', 'Stamp', 'Highlight', 'Underline', 'Squiggly', 'StrikeOut'] or true or 'All' (true and 'All' have the same behavior).

default

['Text', 'FreeText', 'Line', 'Square', 'Circle', 'Polygon', 'PolyLine', 'Ink', 'Popup', 'Sound', 'Polygon', 'RadioButton', 'Checkbox', 'PushButton', 'Choice', 'TextWidget', 'Redact', 'Stamp', 'Highlight', 'Underline', 'Squiggly', 'StrikeOut'];

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

Optional ignoreInitialView

ignoreInitialView: undefined | false | true = false

Set this option to true if you wish to disable initial view settings specified in a PDF document.

default

false

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

Optional jsExecutionConfig

jsExecutionConfig: JsExecutionConfig

Optional JS actions execution configuration.

example

Execute long operation before JS execution and repaint visible pages after JS execution.

viewer.options.jsExecutionConfig = {
  before: function() {
      // Returned promise will be awaited before further JS execution.
      return new Promise(function(resolve) {
             setTimeout(resolve, 1000);
      });
  },
  after: function() {
      viewer.repaint();
  }
}
example

Adjust jsCode before execution

viewer.options.jsExecutionConfig = {
  before: function(args) {
      args.jsCode = args.jsCode.replace("app.alert", "app.showMessage");
  },
}
example

Cancel JS execution

viewer.options.jsExecutionConfig = {
  before: function(args) {
      args.cancel = true;
  },
}

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. Note, in order to use the language option, you must specify the language option value during the viewer initialization phase.

example
// Set UI language to Japanese:
var viewer = new GcPdfViewer(selector, { language: 'ja' });
viewer.addDefaultPanels();
example
function loadPdfViewer(selector) {
  // Define custom translations:
  var myTranslations = {
        "toolbar": {
            "open-document": "Open MY document",
            "pan": "My Pan tool",
        }
   };
   // Initialize translations:
   GcPdfViewer.i18n.init({
     resources: { myLang: { translation: myTranslations } }
   }).then(function(t) {
     // 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');

lockOpenTimeout

lockOpenTimeout: number

Lock open timeout period in milliseconds. The user will not be able to open another document using the "open" method during the period specified by the lockOpenTimeout option or until the previous document is loaded.

default

20000

example
// Change lock open timeout to 5 sec:
var viewer = new GcPdfViewer("#root", { lockOpenTimeout: 5000 );
viewer.open("doc1.pdf");
// The next time the open method is called, the viewer will
// wait a maximum of 5 seconds for the previous document to open.
viewer.open("doc2.pdf");

Optional logLevel

logLevel: LogLevel

The logging level used for persistent connections using signalr client. Note that the ASP .NET version of the signalr client supports only 'Trace' log level.

Optional maxCanvasPixels

maxCanvasPixels: undefined | number

The maximum supported canvas size in total pixels, i.e. width * height. When the canvas scaling exceeds the maxCanvasPixels option, the CSS scaling will be used instead of re-rendering page to the canvas.

default

The default value for PC/Mac is 4096 * 4096 = 16777216 (16 mega-pixels). The default value for iOS/Android is 2560 x 2048 = 5242880 (5 mega-pixels).

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;
 };

Optional onInitialized

onInitialized: undefined | ((viewer: any) => void)

The onInitialized handler will be called immediately after the viewer is instantiated.

example
var viewer = new GcPdfViewer("#root", {
  onInitialized: (viewer)=> {
     // put viewer initialization code here.
  }
});

Optional openParameters

openParameters: OpenParameters

Parameters object used by the "open" method.

example
// Include Basic Authentication headers:
var viewer = new GcPdfViewer('#root', {
  openParameters: {
    headers: {
       "Authorization": "Basic " + btoa(unescape(encodeURIComponent("USERNAME:PASSWORD"))),
       "CustomHeader": "Custom header value"
    }
  }
});

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" } );

Optional replyTool

The Reply Tool settings.

default

Default settings are:

  • readOnly: false,
  • allowAddNote: true,
  • allowChangeUserName: true,
  • allowAddReply: true,
  • allowDelete: true,
  • allowStatus: true,
  • allowChangeOtherUser: true,
  • allowDeleteOtherUser: true,
  • allowStatusOtherUser: true,
  • allowAddReplyOtherUser: true
    // Prevent changing or deleting another user's comments:
    var viewer = new GcPdfViewer('#root', { replyTool: {  allowChangeOtherUser: false,
                                                        allowDeleteOtherUser: false },
                                          userName: 'John', supportApi: 'api/pdf-viewer' });
    viewer.addReplyTool('expanded');
example
// Disallow change author name (allowChangeUserName is false)
// and disallow add changes to comments of other users (allowChangeOtherUser is false):
var viewer = new GcPdfViewer('#root', { replyTool: { allowChangeOtherUser: false,
                                        allowChangeUserName: false },
                                        userName: 'John', supportApi: 'api/pdf-viewer' });
viewer.addReplyTool('expanded');
example
// Add read-only reply tool:
var viewer = new GcPdfViewer('#root', {
   replyTool: { readOnly: true },
   userName: 'John',
   supportApi: 'api/pdf-viewer' });
viewer.addReplyTool('expanded');
example
// Hide "Add Sticky Note" item from context menu:
var viewer = new GcPdfViewer('#root', { replyTool: {  allowAddNote: false },
                                        userName: 'John', supportApi: 'api/pdf-viewer' });
viewer.addReplyTool();

Optional requireTheme

requireTheme: "light" | "dark" | "viewer" | "light-blue" | "themes/dark-yellow" | "gc-blue" | null

Use the requireTheme option to apply built-in CSS theme, the option will inject theme styles directly into the page head. Note, only known built-in theme can be specified, otherwise the viewer will fail. Available built-in themes: "viewer", "dark", "dark-yellow", "gc-blue", "light", "light-blue". This option takes precedence over the "theme" option which can be used to specify custom theme.

example
var viewer = new GcPdfViewer(selector, {
  requireTheme: "light"
});

Optional secondToolbar

secondToolbar: undefined | { render?: undefined | ((toolbarKey: string) => any[] | null) }

Second toolbar options.

example
// Create custom second toolbar with key "custom-toolbar-key":
var React = viewer.getType("React");
var toolbarControls =[React.createElement("label", null, "Custom toolbar"),
React.createElement("button", { onClick: () => { alert("Execute action."); }, title: "Action title" }, "Action")];
// Register custom second toolbar for key "custom-toolbar-key":
viewer.options.secondToolbar = {
  render: function(toolbarKey) {
    if(toolbarKey === "custom-toolbar-key")
      return toolbarControls;
    return null;
  }
};
// Show custom second toolbar:
viewer.showSecondToolbar("custom-toolbar-key");

Optional sharing

sharing: undefined | { disallowUnknownUsers?: undefined | false | true; knownUserNames?: string[]; presenceColors?: undefined | {}; presenceMode: "on" | "others" | "off" | true | false }

Document's sharing settings. The sharing is used only when the document is open in collaboration mode using the Share dialog box or from the Shared documents panel.

example
// Disallow user names unknown to the server:
var viewer = new GcPdfViewer("#root", { sharing: { disallowUnknownUsers: true }, supportApi: "api/pdf-viewer" } );
example
// Specify known user names, and disallow other user names:
var viewer = new GcPdfViewer("#root", {
     sharing: {
         knownUserNames: ["Jaime Smith", "Jane Smith"],
         disallowUnknownUsers: true,
     },
     supportApi: "api/pdf-viewer"
});

Optional signTool

Signature tool settings.

@example
```javascript
var viewer = new GcPdfViewer(selector, {
     signTool: {
         title: 'Sign document',
         penColor: '#ff0000',
         penWidth: 5
     }
});

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'});
example
// Change tolerance and snap margins:
viewer.options.snapAlignment = { tolerance: 5, margin: 20  };

stamp

stamp: { dpi?: undefined | number; selectedImageUrl?: undefined | string; stampCategories?: StampCategory[] | boolean }

Use the stamp option to configure Stamp button settings.

default

undefined

example
// Specify your own set of predefined stamps.
var viewer = new GcPdfViewer("#root", {
  stamp: {
    stampCategories: [
           { name: 'Nature', stampImageUrls: ['http://localhost:8080/150/160/nature.png', 'http://localhost:8080/250/140/nature.png', 'http://localhost:8080/250/150/nature.png'] },
           { name: 'Nature 2', stampImageUrls: ['http://localhost:8080/170/150/nature.png', 'http://localhost:8080/210/130/nature.png', 'http://localhost:8080/250/120/nature.png'] }
    ]
  }
});
example
// Disable predefined stamps drop-down.
var viewer = new GcPdfViewer("#root", {
  stamp: {
    stampCategories: false
  }
});

Type declaration

  • Optional dpi?: undefined | number

    Optional. Default image resolution(DPI) for stamp images without DPI.

  • Optional selectedImageUrl?: undefined | string

    Optional. Selected image url.

  • Optional stampCategories?: StampCategory[] | boolean

    Stamp categories.

Optional supportApi

supportApi: string | SupportApiSettings

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' } );
example

Turn on debug logging for persistent connections.

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

Optional textMarkupContextMenu

textMarkupContextMenu: TextMarkupContextMenuSettings | false

TextMarkup context menu settings.

example
// Disable text markup context menu:
var viewer = new GcPdfViewer(selector, {
  textMarkupContextMenu: false
});

theme

theme: string | false = "themes/viewer"

Use theme option to change default viewer theme. Set this option to false if you want to disable the loading of the built-in theme - this can be useful when you are already has theme css reference.

example
// Load dark-yellow theme:
var viewer = new GcPdfViewer("#root", { theme: "dark-yellow.css", themes: ["themes/viewer", "themes/light-blue", "themes/dark-yellow"] } );
example
// <link href="~/Content/light-blue.css" rel="stylesheet" />
// Don't load built-in theme:
var viewer = new GcPdfViewer("#root", { theme: false } );

themes

themes: string[] = ["themes/light", "themes/dark", "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. This option is used by the Annotation Editor and Reply Tool as the default for the 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" } );

Optional zoomOptions

zoomOptions: undefined | { dropdownZoomFactorValues?: number[]; maxZoom?: undefined | number; minZoom?: undefined | number }

Zoom control options.

example
var viewer = new GcPdfViewer("#root", {
  zoomOptions: {
    minZoom: 0.5,
    maxZoom: 1.5,
    dropdownZoomFactorValues: [0.5, 0.7, 1, 1.5]
  }
});

Object literals

allowedTools

allowedTools: object

Use this option to enable annotation tools from the form editor or field tools from the annotation editor.

default
{
 annotationEditor: 'annotations',
       formEditor: 'fields'
}
example
viewer.options.allowedTools = { formEditor: 'all' };

annotationEditor

annotationEditor: "annotations" = "annotations"

formEditor

formEditor: "fields" = "fields"

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 a new annotations and fields.

example
// Change the default sticky note and text annotation color to Red:
var viewer = new GcPdfViewer("#root", {
     editorDefaults: {
       stickyNote: { color: "#ff0000" },
       textAnnotation: {color: "#ff0000" }
     },
     supportApi: 'api/pdf-viewer'
});
example
// Change the default square annotation appearance:
var viewer = new GcPdfViewer("#root", {
     editorDefaults: {
       squareAnnotation:  {
          annotationType: 5, // AnnotationTypeCode.SQUARE
          subtype: "Square",
          borderStyle: { width: 5, style: 1, horizontalCornerRadius: 0, verticalCornerRadius: 0 },
          color: [0, 0, 0],
          interiorColor: [255, 0, 0],
        }
     },
     supportApi: 'api/pdf-viewer'
});

stickyNote

stickyNote: object

color

color: string = "#38e5ff"

contents

contents: string = ""

textAnnotation

textAnnotation: object

color

color: string = "#ffdc38"

contents

contents: string = ""

fieldsAppearance

fieldsAppearance: object

Form fields appearance rendering settings. Use this option to customize a specific rendering type for the appearance of form fields. Available appearance rendering types:

  • "Custom" - Default. The custom appearance has some improvements over the web appearance,
         for example you can specify background / border colors.
  • "Web" - Standard form field appearance using platform-native styling. See https://developer.mozilla.org/en-US/docs/Web/CSS/appearance for details.
  • "Predefined" - Predefined appearance stream from PDF when available, if appearance stream is not available, custom appearance will be used.
example
// Use standard form field appearance using platform-native styling for radio and checkbox buttons.
var viewer = new GcPdfViewer("#root", { fieldsAppearance: { radioButton: "Web", checkBoxButton: "Web" } });
example
// Use predefined appearance stream from PDF when available:
var viewer = new GcPdfViewer("#root", { fieldsAppearance: { radioButton: "Predefined", checkBoxButton: "Predefined" } });

checkBoxButton

checkBoxButton: "Custom" = "Custom"

pushButton

pushButton: "Custom" = "Custom"

radioButton

radioButton: "Custom" = "Custom"

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.

default
{
    trackViewMode: true, trackMouseMode: true, trackScale: true, trackSidebar: true, trackSidebarWidth: true,
    trackPageRotation: false, trackFullScreen: false, trackTheme: false, trackFile: false,
};
example
// disable tracking view changes:
var viewer = new GcPdfViewer("#root", { restoreViewStateOnLoad: false } );
example
// Track only scale (zoom):
var viewer = new GcPdfViewer("#root", { restoreViewStateOnLoad: { trackScale: true } });

trackFile

trackFile: false = false

trackFullScreen

trackFullScreen: false = false

trackMouseMode

trackMouseMode: true = true

trackPageRotation

trackPageRotation: false = false

trackScale

trackScale: true = true

trackSidebar

trackSidebar: true = true

trackSidebarWidth

trackSidebarWidth: true = true

trackTheme

trackTheme: false = false

trackViewMode

trackViewMode: true = true

shortcuts

shortcuts: object

Keyboard shortcut definitions. Available built-in action tools: "zoomin" | "zoomout" | "zoom_pagesize" | "zoom_clientsize" | "select_all" | "rotate" | "pan" | "holdToPan" | "selection" | "open" | "search" | "print" | "move_caret_left" | "move_caret_right" | "move_caret_up" | "move_caret_down" | "move_caret_document_start" | "move_caret_document_end" | "move_caret_sequence_start" | "move_caret_sequence_end" | "confirm-ok" | "confirm-cancel" | "scrollUp" | "scrollDown".

example

Override keyboard shortcut "Ctrl +"

var viewer = new GcPdfViewer("#root", {
  shortcuts: {
    107: {
      ctrl: true,
      tool: function(event) {
          GcPdfViewer.findControl("#root").zoomValue += 10;
          event.preventDefault();
      }
    }
  }
});
example

Remove all default shortcuts

var viewer = new GcPdfViewer("#root");
viewer.options.shortcuts = {};
example

Disable grab when space is pressed

viewer.options.shortcuts["32"] = () => { };
example

Redefine and disable Ctrl+Z. Ctrl+Y

var viewer = new GcPdfViewer("#viewer", {
  shortcuts: {
       "Z": {
         ctrl: true,
         tool: function(e) { }
       },
    "Y": {
         ctrl: true,
         tool: function(e) { }
       }
  }
});
example

Bind the "P" shortcut to the holdToPan action, leave the Ctrl+P shortcut for the "print" action

viewer.options.shortcuts["P"] = [{ ctrl: true, tool: "print" }, { tool: "holdToPan" }];
example

Create custom shortcut

viewer.options.shortcuts["E"] = {
  ctrl: true,
  alt: true,
  tool: function(e) { alert("Ctrl+Alt+E pressed."); }
};

13

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

Ctrl Enter. Confirm action.

27

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

Esc. Cancel action.

32

32: { keyCode: number; tool: "holdToPan" }[] = [{keyCode: 32,tool: "holdToPan"}]

Spacebar. Press and hold the spacebar to temporarily enable the pan tool.

33

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

Page up. Scroll up.

34

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

Page down. Scroll down.

35

35: ({ ctrl: true; keyCode: number; shift: true; tool: "move_caret_document_end" } | { ctrl: true; keyCode: number; tool: "move_caret_document_end" } | { keyCode: number; shift: true; tool: "move_caret_sequence_end" } | { keyCode: number; tool: "move_caret_sequence_end" })[] = [{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"}]

End key. Move caret to the end.

36

36: ({ ctrl: true; keyCode: number; shift: true; tool: "move_caret_document_start" } | { ctrl: true; keyCode: number; tool: "move_caret_document_start" } | { keyCode: number; shift: true; tool: "move_caret_sequence_start" } | { keyCode: number; tool: "move_caret_sequence_start" })[] = [{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"}]

Home key. Move caret to the start.

37

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

Left arrow. Move caret left.

38

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

Up arrow. Move caret up.

39

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

Right arrow. Move caret right.

40

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

Down arrow. Move caret down.

R

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

R - rotate clockwise, Shift+R - rotate counterclockwise.

0

0: object

Ctrl 0. Zoom to 100%.

ctrl

ctrl: true = true

tool

tool: "zoom_pagesize" = "zoom_pagesize"

107

107: object

Ctrl +(numpad). Zoom in.

ctrl

ctrl: true = true

tool

tool: "zoomin" = "zoomin"

109

109: object

Ctrl -(numpad). Zoom out

ctrl

ctrl: true = true

tool

tool: "zoomout" = "zoomout"

187

187: object

Ctrl +. Zoom in.

ctrl

ctrl: true = true

tool

tool: "zoomin" = "zoomin"

189

189: object

Ctrl -. Zoom out.

ctrl

ctrl: true = true

tool

tool: "zoomout" = "zoomout"

9

9: object

Ctrl 9. Fit to page width.

ctrl

ctrl: true = true

tool

tool: "zoom_clientsize" = "zoom_clientsize"

A

A: object

Ctrl A. Select all text.

ctrl

ctrl: true = true

tool

tool: "select_all" = "select_all"

F

F: object

Ctrl F. Search.

ctrl

ctrl: true = true

tool

tool: "search" = "search"

H

H: object

H key. Enable pan tool.

tool

tool: "pan" = "pan"

O

O: object

Ctrl O. Open file from local system.

ctrl

ctrl: true = true

tool

tool: "open" = "open"

P

P: object

Ctrl P. Print document.

ctrl

ctrl: true = true

tool

tool: "print" = "print"

S

S: object

S key. Enable text selection tool.

tool

tool: "selection" = "selection"

useCanvasForSelection

useCanvasForSelection: object

Color settings for text selection and for active / inactive search result highlight.

  • selectionColor: Changes the default color used to highlight the currently selected search result from the search results list, in the document.
  • inactiveHighlightColor: Changes the default color used to highlight all the search results in the document.
  • selectionColor: Changes the default color used to mark the selected text in the document.
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)"

Changes the default color used to highlight the currently selected search result from the search results list, in the document.

inactiveHighlightColor

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

Changes the default color used to highlight all the search results in the document.

selectionColor

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

Changes the default color used to mark the selected text in the document.

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