Options
All
  • Public
  • Public/Protected
  • All
Menu

Class GcPdfViewer

GcDocs PDF Viewer control.

Hierarchy

  • ReportViewer
    • GcPdfViewer

Implements

  • IViewerHost

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

  • GcDocs PDF Viewer constructor.

    Parameters

    • element: HTMLElement | string

      root container element or selector pattern used to select the root container element.

    • Default value options: Partial<ViewerOptions> = {}

      Viewer options. @see ViewerOptions for further information.

    Returns GcPdfViewer

Properties

Static LicenseKey

LicenseKey: string

Product license key.

example
<script>
 // Add your license
 GcPdfViewer.LicenseKey = 'XXX';
 // Add your code
 const viewer = new GcPdfViewer("#viewer");
 viewer.addDefaultPanels();
</script>

Accessors

annotations

  • get annotations(): Promise<{ annotations: AnnotationBase[]; pageIndex: number }[]>
  • Gets all document annotations.

    example
    var viewer = new GcPdfViewer('#root');
    viewer.addDefaultPanels();
    viewer.onAfterOpen.register(function() {
      viewer.annotations.then(function(data) {
        for(var i = 0; i < data.length; i++){
          var pageAnnotationsData = data[i];
          var pageIndex = pageAnnotationsData.pageIndex;
          var annotations = pageAnnotationsData.annotations;
          console.log("Page with index " + pageIndex + " contains " + annotations.length + " annotation(s)");
        }
      });
    });
    viewer.open('Test.pdf');

    Returns Promise<{ annotations: AnnotationBase[]; pageIndex: number }[]>

beforeUnloadConfirmation

  • get beforeUnloadConfirmation(): boolean
  • set beforeUnloadConfirmation(enable: boolean): void
  • Ask the user if he want to leave the page when document is modified. Requires SupportApi.

    example
     var viewer = new GcPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
     viewer.addDefaultPanels();
     viewer.addAnnotationEditorPanel();
     viewer.addFormEditorPanel();
     viewer.beforeUnloadConfirmation = true;

    Returns boolean

  • Ask the user if he want to leave the page when document is modified. Requires SupportApi.

    example
     var viewer = new GcPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
     viewer.addDefaultPanels();
     viewer.addAnnotationEditorPanel();
     viewer.addFormEditorPanel();
     viewer.beforeUnloadConfirmation = true;

    Parameters

    • enable: boolean

    Returns void

canEditDocument

  • get canEditDocument(): boolean
  • Indicates whether the open document can be edited using SupportApi. Requires SupportApi.

    example
    if(viewer.canEditDocument) {
      alert("Document editing features enabled.");
    } else {
      alert("Document editing features disabled.");
    }

    Returns boolean

currentUserName

  • get currentUserName(): string
  • set currentUserName(userName: string): void
  • Specifies the current user name. The property is used by Annotation Editor as default value for 'author' field.

    example
    viewer.currentUserName = "John";
    example
    alert("The current user name is " + viewer.currentUserName);

    Returns string

  • Specifies the current user name. The property is used by Annotation Editor as default value for 'author' field. Note, current user name is saved in the browser's local storage and it will be used on the next page reload if userName option is not set.

    example
    viewer.currentUserName = "John";
    example
    alert("The current user name is " + viewer.currentUserName);

    Parameters

    • userName: string

    Returns void

editMode

  • Indicates the selected editing tool for the Annotation editor or Form editor. Requires SupportApi.

    example
     // Set the layout mode to "Annotation editor"
     viewer.layoutMode = 1;
     // Set the edit mode to "Square".
     viewer.editMode = 4;

    Returns EditMode

  • Indicates the selected editing tool for the Annotation editor or Form editor. Requires SupportApi.

    example
     // Set the layout mode to "Annotation editor"
     viewer.layoutMode = 1;
     // Set the edit mode to "Square".
     viewer.editMode = 4;

    Parameters

    Returns void

fileData

  • get fileData(): Uint8Array | null
  • Gets the file data. Available when keepFileData option is set to true.

    example
    var viewer = new GcPdfViewer('#root', { keepFileData: true });
    viewer.open('Test.pdf');
    viewer.onAfterOpen.register(function() {
      var pdfFileData = viewer.fileData;
    });

    Returns Uint8Array | null

fileName

  • get fileName(): string
  • Gets the file name that was used to open the document. The file name is determined as follows:

    • if a local file was opened using the "Open File" dialog, returns the local file name;
    • else, if a new file was created using the "newDocument" method, returns the argument passed to that method;
    • else, if options.friendlyFileName is not empty, returns its value;
    • else, returns the name generated from the URL passed to the "open" method.
    example
    var viewer = new GcPdfViewer('#root');
    viewer.onAfterOpen.register(function() {
      alert("The document is opened, the fileName is " + viewer.fileName);
    });
    viewer.open('MyDocuments/Test.pdf');

    Returns string

fileUrl

  • get fileUrl(): string
  • Gets the URL that was used to open the document. Returns an empty string when the document was opened from binary data.

    example
    var viewer = new GcPdfViewer('#root');
    viewer.onAfterOpen.register(function() {
      alert("The document is opened, the fileUrl is " + viewer.fileUrl);
    });
    viewer.open('MyDocuments/Test.pdf');

    Returns string

fingerprint

  • get fingerprint(): string
  • An unique document identifier.

    example
    var viewer = new GcPdfViewer('#root');
    viewer.onAfterOpen.register(function() {
      alert("The document opened, an unique document identifier is "+ viewer.fingerprint);
    });
    viewer.open('Test.pdf');

    Returns string

hasChanges

  • get hasChanges(): boolean
  • Indicates whether the document has been modified by the user.

    example
    if(viewer.hasChanges) {
      alert("The document has been changed.");
    }

    Returns boolean

hasCopyData

  • get hasCopyData(): boolean
  • Indicates whether the copy buffer contains any data.

    example
    if(viewer.hasCopyData) {
      viewer.execPasteAction();
    }

    Returns boolean

hasDocument

  • get hasDocument(): boolean
  • Indicates whether the document is loaded into view.

    example
    if(!viewer.hasDocument) {
      viewer.open("sample.pdf");
    }

    Returns boolean

hasForm

  • get hasForm(): boolean
  • Gets a value indicating whether the active document has any form fields.

    example
    if(viewer.hasForm) {
      viewer.showFormFiller();
    }

    Returns boolean

hasPersistentConnection

  • get hasPersistentConnection(): boolean
  • Gets a value indicating whether the viewer has a persistent connection to the server.

    ```javascript if(viewer.hasPersistentConnection) { viewer.listSharedDocuments().then(function(result) {

    }); }

    Returns boolean

hasRedoChanges

  • get hasRedoChanges(): boolean
  • Gets a value indicating whether the pdf viewer can redo document changes. Requires SupportApi.

    example
    if(viewer.hasRedoChanges) {
      viewer.redoChanges();
    }

    Returns boolean

hasReplyTool

  • get hasReplyTool(): boolean
  • Indicates whether the Reply Tool has been added.

    example
    var viewer = new GcPdfViewer('#root');
    if(viewer.hasReplyTool) {
      alert("The Reply Tool has not been added to the viewer.");
    } else {
      alert("The Reply Tool has been added to the viewer.");
    }
    viewer.open('Test.pdf');

    Returns boolean

hasUndoChanges

  • get hasUndoChanges(): boolean
  • Gets a value indicating whether the pdf viewer can undo document changes. Requires SupportApi.

    example
    if(viewer.hasUndoChanges) {
      viewer.undoChanges();
    }

    Returns boolean

hideAnnotations

  • get hideAnnotations(): boolean
  • set hideAnnotations(hide: boolean): void
  • Determines whether the annotation layer is hidden.

    example
    // Hide annotations:
    viewer.hideAnnotations = true;

    Returns boolean

  • Determines whether the annotation layer is hidden.

    example
    // Hide annotations:
    viewer.hideAnnotations = true;

    Parameters

    • hide: boolean

    Returns void

isDocumentShared

  • get isDocumentShared(): boolean
  • Gets a value indicating whether the active document is open in shared mode. Requires SupportApi.

    example
    if(viewer.isDocumentShared) {
      alert("The document is open in shared mode.");
    }

    Returns boolean

isUpdating

  • get isUpdating(): boolean
  • Returns true if notifications suspended by calls to @see:beginUpdate.

    example

    var isUpdatingFlag = viewer.isUpdating;

    Returns boolean

layoutMode

  • Gets or sets the layout mode (0 - Viewer, 1 - AnnotationEditor or 2 - FormEditor).

    default

    0

    example
     // Set the layout mode to "Form editor"
     viewer.layoutMode = 2;

    Returns LayoutMode

  • Gets or sets the layout mode (0 - Viewer, 1 - AnnotationEditor or 2 - FormEditor).

    default

    0

    example
     // Set the layout mode to "Form editor"
     viewer.layoutMode = 2;

    Parameters

    Returns void

logLevel

  • Gets current log level. Available log levels are: 'None', 'Critical', 'Error', 'Warning', 'Information', 'Debug', 'Trace'. Default level is 'None'.

    Returns LogLevel

  • Sets current log level. Available log levels are: 'None', 'Critical', 'Error', 'Warning', 'Information', 'Debug', 'Trace'. Default level is 'None'.

    Parameters

    Returns void

modificationsState

  • Gets modifications state for active document. Requires SupportApi.

    example
     var modificationsState = viewer.modificationsState;
     console.log(modificationsState);

    Returns ModificationsState

onAfterOpen

  • get onAfterOpen(): EventFan<AfterOpenEventArgs>
  • Occurs when a document is opened.

    example
    var viewer = new GcPdfViewer('#root');
    viewer.onAfterOpen.register(function() {
      alert("The document opened.");
    });
    viewer.open('Test.pdf');

    Returns EventFan<AfterOpenEventArgs>

onBeforeOpen

  • get onBeforeOpen(): EventFan<BeforeOpenEventArgs>
  • Occurs immediately before the document opens.

    example
    var viewer = new GcPdfViewer('#root');
    viewer.onBeforeOpen.register(function(args) {
      alert("A new document will be opened,\n payload type(binary or URL): " + args.type +",\n payload(bytes or string): " + args.payload);
    });
    viewer.open('Test.pdf');

    Returns EventFan<BeforeOpenEventArgs>

onError

  • get onError(): EventFan<ErrorEventArgs>
  • The event indicating error.

    example
    var viewer = new GcPdfViewer('#root');
    viewer.addDefaultPanels();
    viewer.onError.register(handleError);
    viewer.open('Test.pdf');
    
    function handleError(eventArgs) {
        var message = eventArgs.message;
        if (message.indexOf("Invalid PDF structure") !== -1) {
            alert('Unable to load pdf document, pdf document is broken.');
        } else {
            alert('Unexpected error: ' + message);
        }
    }

    Returns EventFan<ErrorEventArgs>

optionalContentConfig

  • Default optional content config. An optional content is a collection of graphics that can be made visible or invisible dynamically.

    example
    // Use the optionalContentConfig property to print information about all available layers
    const config = await viewer.optionalContentConfig;
    console.table(config.getGroups());
    example
    const config = await viewer.optionalContentConfig;
    // Turn off optional content group with id "13R":
    config.setVisibility("13R", false);
    // Repaint visible pages:
    viewer.repaint();

    Returns Promise<OptionalContentConfig>

options

  • The viewer options.

    example
    viewer.options.zoomByMouseWheel = { always: true };
    viewer.applyOptions();

    Returns Partial<ViewerOptions>

  • PDF viewer options.

    example
    viewer.options.zoomByMouseWheel = { always: true };
    viewer.applyOptions();

    Parameters

    Returns void

pageCount

  • get pageCount(): number
  • Gets pages count.

    example
    var viewer = new GcPdfViewer('#root');
    viewer.onAfterOpen.register(function() {
      alert("The document opened. Total number of pages: " + viewer.pageCount);
    });
    viewer.open('Test.pdf');

    Returns number

pageIndex

  • get pageIndex(): number
  • set pageIndex(val: number): void
  • Gets/sets the active page index.

    example
    var viewer = new GcPdfViewer('#root');
    viewer.onAfterOpen.register(function() {
      // Navigate page with index 9:
      viewer.pageIndex = 9;
    });
    viewer.open('Test.pdf');

    Returns number

  • Gets/sets the active page index.

    example
    var viewer = new GcPdfViewer('#root');
    viewer.onAfterOpen.register(function() {
      // Navigate page with index 9:
      viewer.pageIndex = 9;
    });
    viewer.open('Test.pdf');

    Parameters

    • val: number

    Returns void

rightSidebar

  • Gets right sidebar object. Use this object if you want to manipulate the right sidebar.

    example
    viewer.rightSidebar.show('expanded', 'reply-tool');
    viewer.rightSidebar.toggle();
    viewer.rightSidebar.hide();
    viewer.rightSidebar.expand();
    viewer.rightSidebar.collapse();

    Returns GcRightSidebar

rotation

  • get rotation(): number
  • set rotation(degrees: number): void
  • Specifies the rotation in degrees.

    example
    var viewer = new GcPdfViewer('#root');
    // Register an onAfterOpen event handler:
    viewer.onAfterOpen.register(function() {
      // Apply 90 degree clockwise rotation:
      viewer.rotation = 90;
    });
    // Open document:
    viewer.open('Test.pdf');

    Returns number

  • Specifies the rotation in degrees.

    example
    var viewer = new GcPdfViewer('#root');
    // Register an onAfterOpen event handler:
    viewer.onAfterOpen.register(function() {
      // Apply 90 degree clockwise rotation:
      viewer.rotation = 90;
    });
    // Open document:
    viewer.open('Test.pdf');

    Parameters

    • degrees: number

    Returns void

searcher

  • Document search worker instance. Searches currently opened document for a text.

    example
    // Open the document, find the text 'wildlife' and highlight the first result:
    async function loadPdfViewer(selector) {
         var viewer = new GcPdfViewer(selector, { restoreViewStateOnLoad: false });
         viewer.addDefaultPanels();
         var afterOpenPromise = new Promise((resolve)=>{ viewer.onAfterOpen.register(()=>{ resolve(); }); });
         await viewer.open('wetlands.pdf');
         await afterOpenPromise;
         var findOptions = { Text: 'wildlife' };
         var searchIterator = await viewer.searcher.search(findOptions);
         var searchResult = await searchIterator.next();
      viewer.searcher.cancel();
      viewer.searcher.highlight(searchResult.value);
    }
    loadPdfViewer('#root');
    example

    // Open the document, find the text 'wildlife' and print search results to the console:

     async function loadPdfViewer(selector) {
         var viewer = new GcPdfViewer(selector);
          viewer.addDefaultPanels();
          await viewer.open('wetlands.pdf');
          await (new Promise((resolve)=>{
              viewer.onAfterOpen.register(()=>{
                  resolve();
              });
          }));
          var findOptions = {
              Text: 'wildlife',
              MatchCase: true,
              WholeWord: true,
              StartsWith: false,
              EndsWith: false,
              Wildcards: false,
              Proximity: false,
              SearchBackward: false,
              HighlightAll: true
          };
          var searcher = viewer.searcher;
          var searchIterator = await searcher.search(findOptions);
          var resultsCount = 0;
          var searchResult;
          do {
              searchResult = await searchIterator.next();
              if (searchResult.value) {
                  // this could be either result or progress message (ItemIndex < 0)
                  if(searchResult.value.ItemIndex >= 0) {
                      console.log('next search result:');
                      console.log(searchResult.value);
                      resultsCount++;
                  } else {
                      const pageCount = _doc.pageCount.totalPageCount || _doc.pageCount.renderedSoFar;
                      console.log('search progress, page index is ' + searchResult.value.PageIndex);
                  }
              }
              else {
                  console.log("Search completed");
                  break;
              }
          }
          while(!searchResult.done);
          console.log('Total results count is ' + resultsCount);
     }

    Returns GcPdfSearcher

signToolStorage

  • Returns data storage which can be used to store and retrieve current signature tool settings and images. Please, note, the storage data depends on current user name, @see:currentUserName property

    Returns SignToolStorage

storage

  • Data storage for the active document.

    example
    const fileData = viewer.storage.getItem(annotation.fileId);
    example
    viewer.storage.setItem(fileId, bytes);

    Returns DataStorage

supportApi

  • get supportApi(): ISupportApi | null
  • Gets the SupportApi client. Requires SupportApi.

    example
     var viewer = new GcPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
     // Contact server and get Support API version.
     viewer.serverVersion.then(function(ver) {
         alert("The SupportApi version is " + ver);
     });

    Returns ISupportApi | null

toolbarLayout

  • Defines the layout of the toolbar for different viewer modes: viewer, annotationEditor, formEditor.

    description

    The full list of the viewer specific toolbar items:

    'text-selection', 'pan', 'open', 'save', 'share', 'download', 'print', 'rotate', 'theme-change', 'doc-title', 'view-mode', 'single-page', 'continuous-view',
    '$navigation' '$refresh', '$history', '$mousemode', '$zoom', '$fullscreen', '$split', 'show-edit-tools', 'show-form-editor'

    The full list of the annotationEditor specific toolbar items:

      'edit-select', 'save', 'share',  'edit-text', 'edit-free-text', 'edit-ink', 'edit-square',
      'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-stamp', 'edit-file-attachment', 'edit-sound', 'edit-link'.
      'edit-redact', 'edit-redact-apply', 'edit-erase',  'edit-undo', 'edit-redo', 'new-document', 'new-page', 'delete-page'

    The full list of the formEditor specific toolbar items:

      'edit-select-field', 'save', 'share',
      'edit-widget-tx-field', 'edit-widget-tx-password', 'edit-widget-tx-text-area', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio',
      'edit-widget-btn-push', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-tx-comb', 'edit-widget-btn-submit', 'edit-widget-btn-reset',
      'edit-erase-field', 'edit-undo', 'edit-redo', 'new-document', 'new-page', 'delete-page'
    example
    // Customize the toolbar layout:
    viewer.toolbarLayout.viewer.default = ["open", "save", "share"];
    viewer.toolbarLayout.annotationEditor.default = ["open", "save", "share", "$split", "new-document", "edit-ink", "edit-text"];
    viewer.toolbarLayout.formEditor.default = ["open", "save", "share", "$split", "edit-widget-tx-field", "edit-widget-tx-password"];
    viewer.applyToolbarLayout();
    example
    // Show only Open and Redact buttons:
    var viewer = new GcPdfViewer('#root', { supportApi: 'api/pdf-viewer' });
    // Add annotation editor panel:
    viewer.addAnnotationEditorPanel();
    // Change toolbar layout:
    viewer.toolbarLayout = { viewer: { default: ["open", 'show-edit-tools']},
                  annotationEditor: { default: ["open", 'edit-redact', 'edit-redact-apply']} };
    // Activate 'Annotation Editor' layout mode:
    viewer.layoutMode = 1;

    Returns PdfToolbarLayout

  • Defines the layout of the toolbar for different viewer modes: viewer, annotationEditor, formEditor.

    description

    The full list of the viewer specific toolbar items:

    'text-selection', 'pan', 'open', 'save', 'share', 'download', 'print', 'rotate', 'theme-change', 'doc-title', 'view-mode', 'single-page', 'continuous-view',
    '$navigation' '$refresh', '$history', '$mousemode', '$zoom', '$fullscreen', '$split', 'show-edit-tools', 'show-form-editor'

    The full list of the annotationEditor specific toolbar items:

      'edit-select', 'save', 'share',  'edit-text', 'edit-free-text', 'edit-ink', 'edit-square',
      'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-stamp', 'edit-file-attachment', 'edit-sound', 'edit-link'.
      'edit-redact', 'edit-redact-apply', 'edit-erase',  'edit-undo', 'edit-redo', 'new-document', 'new-page', 'delete-page'

    The full list of the formEditor specific toolbar items:

      'edit-select-field', 'save', 'share',
      'edit-widget-tx-field', 'edit-widget-tx-password', 'edit-widget-tx-text-area', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio',
      'edit-widget-btn-push', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-tx-comb', 'edit-widget-btn-submit', 'edit-widget-btn-reset',
      'edit-erase-field', 'edit-undo', 'edit-redo', 'new-document', 'new-page', 'delete-page'
    example
    // Customize the toolbar layout:
    viewer.toolbarLayout.viewer.default = ["open", "save", "share"];
    viewer.toolbarLayout.annotationEditor.default = ["open", "save", "share", "$split", "new-document", "edit-ink", "edit-text"];
    viewer.toolbarLayout.formEditor.default = ["open", "save", "share", "$split", "edit-widget-tx-field", "edit-widget-tx-password"];
    viewer.applyToolbarLayout();
    example
    // Show only Open and Redact buttons:
    var viewer = new GcPdfViewer('#root', { supportApi: 'api/pdf-viewer' });
    // Add annotation editor panel:
    viewer.addAnnotationEditorPanel();
    // Change toolbar layout:
    viewer.toolbarLayout = { viewer: { default: ["open", 'show-edit-tools']},
                  annotationEditor: { default: ["open", 'edit-redact', 'edit-redact-apply']} };
    // Activate 'Annotation Editor' layout mode:
    viewer.layoutMode = 1;

    Parameters

    Returns void

undoCount

  • get undoCount(): number
  • Gets total undo levels count. Requires SupportApi.

    example
    alert("Undo levels count is " + viewer.undoCount);

    Returns number

undoIndex

  • get undoIndex(): number
  • Gets current undo level index. Requires SupportApi.

    example
    alert("The current Undo level index is " + viewer.undoIndex);

    Returns number

version

  • get version(): string
  • Returns the current version of the GcDocs PDF viewer.

    example
    alert("The GcPdfViewer version is " + viewer.version);

    Returns string

zoomMode

  • get zoomMode(): ZoomMode
  • set zoomMode(val: ZoomMode): void
  • Gets/sets the current zoom node. Accepted values are: 0 - Value, 1 - PageWidth, 2 - WholePage.

    // Set zoom mode to 'WholePage'
    viewer.zoomMode = 2;
    example
    // Set zoom mode to 'WholePage'
    viewer.zoomMode = 2;

    Returns ZoomMode

  • Gets/sets the current zoom node. Accepted values are: 0 - Value, 1 - PageWidth, 2 - WholePage.

    example
    // Set zoom mode to 'WholePage'
    viewer.zoomMode = 2;

    Parameters

    • val: ZoomMode

    Returns void

zoomValue

  • get zoomValue(): number
  • set zoomValue(val: number): void
  • Gets/sets the current zoom percentage level.

    example
    // Set zoom value to 150%
    viewer.zoomValue = 150;

    Returns number

  • Gets/sets the current zoom percentage level.

    example
    // Set zoom value to 150%
    viewer.zoomValue = 150;

    Parameters

    • val: number

    Returns void

Static i18n

  • get i18n(): i18n
  • Gets i18next instance which can be used to add viewer translations. See https://www.i18next.com for details about i18next framework.

    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: { viewer: myTranslations } },
         defaultNS: 'viewer'
       }).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');

    Returns i18n

Methods

addAnnotation

  • Add annotation to document. Requires SupportApi.

    example
    // Add the Square annotation to the first page when you open the document:
    viewer.onAfterOpen.register(function() {
       viewer.addAnnotation(0, {
           annotationType: 5, // AnnotationTypeCode.SQUARE
           subtype: "Square",
           borderStyle: { width: 5, style: 1 },
           color: [0, 0, 0],
           interiorColor: [255, 0, 0],
           rect: [0, 0, 200, 200]
        });
    });
    example
    // Below is the sample how to copy field with name "field1" and put it to the second page programmatically:
    // Find field widget with name field1:
    var resultData = await viewer.findAnnotation("field1", {findField: 'fieldName'});
    // Clone field:
    var clonedField = viewer.cloneAnnotation(resultData[0].annotation);
    // Change field name property:
    clonedField.fieldName = "field1Copy";
    // Add cloned field to the second page.
    viewer.addAnnotation(1, clonedField);
    example
    // Add the FileAttachment annotation to the first page when you open the document:
    viewer.onAfterOpen.register(function() {
       viewer.addAnnotation(0, {
           annotationType: 17, // AnnotationTypeCode.FILEATTACHMENT
           subtype: "FileAttachment",
           file: {
             filename: 'attachment.png',
             content: new Uint8Array([137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,45,0,0,0,32,8,6,0,0,0,134,132,241,68,0,0,0,4,103,65,77,65,0,0,177,143,11,252,97,5,0,0,7,56,73,68,65,84,88,9,205,88,11,112,92,85,25,254,255,115,179,129,148,36,155,190,147,187,91,228,49,64,25,99,181,105,169,117,176,149,34,99,113,80,65,165,162,118,168,15,44,3,42,99,55,125,8,29,59,221,90,29,132,38,187,43,56,162,22,5,161,206,240,24,64,40,130,15,156,138,226,3,147,14,118,74,219,41,157,102,138,238,166,155,180,105,246,238,210,144,108,238,158,223,239,44,189,233,110,186,217,172,54,64,239,204,206,61,143,255,241,157,255,156,255,251,207,93,166,183,243,185,185,211,55,125,246,69,239,177,136,166,176,150,92,86,185,201,190,244,238,30,10,47,113,79,199,45,159,142,114,41,221,192,93,125,65,62,203,183,92,136,174,99,226,185,144,57,171,80,14,227,57,22,249,155,102,218,46,110,238,177,195,107,38,191,94,56,95,73,123,194,64,207,220,146,156,81,229,171,217,196,164,110,130,99,31,145,116,144,208,14,210,178,155,20,245,137,102,75,20,53,50,211,249,36,124,53,49,205,133,115,87,72,111,29,146,236,247,142,134,166,31,174,4,176,145,153,16,208,118,52,213,194,108,61,13,144,141,48,248,184,43,58,150,108,245,255,179,28,8,187,189,111,150,178,170,215,65,231,102,44])
           },
           rect: [0, 0, 20, 20]
        });
    });

    Parameters

    Returns Promise<{ annotation: AnnotationBase; pageIndex: number }>

addAnnotationEditorPanel

  • addAnnotationEditorPanel(): PanelHandle
  • Add annotation editor panel. Requires SupportApi.

    example
    viewer.addAnnotationEditorPanel();

    Returns PanelHandle

addArticlesPanel

  • addArticlesPanel(): PanelHandle
  • Add articles panel.

    example
    viewer.addArticlesPanel();

    Returns PanelHandle

addAttachmentsPanel

  • addAttachmentsPanel(): PanelHandle
  • Add attachments panel.

    example
    viewer.addAttachmentsPanel();

    Returns PanelHandle

addDefaultPanels

  • addDefaultPanels(): PanelHandle[]
  • Add default set of sidebar panels with default order: 'Thumbnails', 'Search', 'Outline', 'Attachments', 'Articles'

    example
    viewer.addDefaultPanels();

    Returns PanelHandle[]

addDocumentListPanel

  • addDocumentListPanel(documentListUrl?: undefined | string): PanelHandle
  • Adds document list panel to the Viewer with available document array specified in documentslist.json file (URL specified by documentListUrl option), located in the root directory of your application. You can specify service at the end point for documentListUrl option. The service should return JSON string with available documents array, e.g.: ["pdf1.pdf", "pdf2.pdf"]

    example

    Example content for the documentslist.json file:

    ["file1.pdf", "file2.pdf"].
    example
    var viewer = new GcPdfViewer("#root", { documentListUrl: "/documentslist.json" });
    viewer.addDocumentListPanel();
    example
    var viewer = new GcPdfViewer("#root");
    // Add document list panel and specify documentListUrl option:
    viewer.addDocumentListPanel('/documentslist.json');
    example
    var viewer = new GcPdfViewer("#root");
    // Add document list panel and specify documentListUrl option using DATA URI:
    viewer.addDocumentListPanel('data:,[{"path": "doc1.pdf"}, {"path": "doc2.pdf", "name": "Hello doc 2", "title": "title 2"}]');

    Parameters

    • Optional documentListUrl: undefined | string

      Optional. Document list service URL.

    Returns PanelHandle

addFormEditorPanel

  • addFormEditorPanel(): PanelHandle
  • Add form editor panel. Requires SupportApi.

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

    Returns PanelHandle

addLayersPanel

  • addLayersPanel(): PanelHandle
  • Add optional content layers panel.

    example
    viewer.addLayersPanel();

    Returns PanelHandle

addOutlinePanel

  • addOutlinePanel(): PanelHandle
  • Add outline panel.

    example
    viewer.addOutlinePanel();

    Returns PanelHandle

addReplyTool

  • Enable the Text Annotation Reply Tool. Note, in order to enable ability to edit/remove or add existing replies you need to configure SupportApi, otherwise the Reply Tool will be in read-only mode.

    example
    viewer.addReplyTool('expanded');

    Parameters

    • Default value sidebarState: GcRightSidebarState = "collapsed"

      pass 'expanded' value if you wish the Reply tool to be expanded initially. Default value is collapsed.

    Returns void

addSearchPanel

  • addSearchPanel(): PanelHandle
  • Add Search panel.

    example
    viewer.addSearchPanel();

    Returns PanelHandle

addSharedDocumentsPanel

  • addSharedDocumentsPanel(): PanelHandle
  • Add a panel with a list of shared documents.

    example
    var viewer = new GcPdfViewer("#root");
    viewer.addSharedDocumentsPanel();

    Returns PanelHandle

addStickyNote

  • Add sticky note to the document. Requires SupportApi.

    example

    viewer.addStickyNote(viewer.toViewPortPoint({x: 50, y: 50, pageIndex: 0}));

    Parameters

    • position: GcSelectionPoint

      page relative point. Origin is top/left. Note, pageIndex must be specified.

    Returns void

addThumbnailsPanel

  • addThumbnailsPanel(): PanelHandle
  • Add Thumbnails panel

    example
    viewer.addThumbnailsPanel();

    Returns PanelHandle

applyOptions

  • applyOptions(): void
  • Call this method in order to apply changed options.

    example
    viewer.options.zoomByMouseWheel = { always: false, ctrlKey: true, metaKey: true };
    viewer.applyOptions();

    Returns void

applyToolbarLayout

  • applyToolbarLayout(): void
  • Call this method in order to apply changes in @see:toolbarLayout.

    example
    viewer.toolbarLayout.viewer.default = ["open", "save", "share"];
    viewer.applyToolbarLayout();
    example
       var viewer = new GcPdfViewer(document.querySelector("#viewer"));
       viewer.addDefaultPanels();
       var toolbar = viewer.toolbar;
       var toolbarLayout = viewer.toolbarLayout;
       toolbar.addItem({
           key: 'custom-add-stamp',
           icon: { type: "svg", content: '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path style="fill: #205F78;" d="M20.25 12l-2.25 2.25 2.25 2.25-3.75 3.75-2.25-2.25-2.25 2.25-2.25-2.25-2.25 2.25-3.75-3.75 2.25-2.25-2.25-2.25 2.25-2.25-2.25-2.25 3.75-3.75 2.25 2.25 2.25-2.25 2.25 2.25 2.25-2.25 3.75 3.75-2.25 2.25 2.25 2.25z"></path></svg>' },
           title: 'Open your document to add a stamp',
           checked: false, enabled: false,
           action: function () {
             alert("Implement your action here.");
           },
           onUpdate: function (args) {
               var hasDoc = viewer.hasDocument && args.state.session.pageCount > 0;
               return {
                   enabled: hasDoc,
                   checked: false,
                   title: hasDoc ? 'Add stamp' : 'Open your document to add a stamp'
               }
           }
       });
       toolbarLayout.viewer.default.splice(0, 0, "custom-add-stamp");
       viewer.applyToolbarLayout();

    Returns void

beginUpdate

  • beginUpdate(): void
  • Suspends notifications until the next call to @see:endUpdate.

    example

    viewer.beginUpdate();

    deprecated

    Returns void

changeBoundsOrigin

  • changeBoundsOrigin(pageIndex: number, bounds: number[], srcOrigin: "TopLeft" | "BottomLeft", destOrigin: "TopLeft" | "BottomLeft"): number[]
  • This method changes coordinate system origin for rectangle given by parameter bounds and returns converted rectangle value;

    example
    var pageIndex = 0;
    var topLeftBounds = [0, 0, 200, 40];
    // Convert the topLeftBounds from TopLeft origin to BottomLeft origin
    // taking into account the viewport from the first page and store
    // the result in the bottomLeftBounds variable:
    var bottomLeftBounds = viewer.changeBoundsOrigin(pageIndex, topLeftBounds, 'TopLeft', 'BottomLeft');
    example
    // Gets the bounds of the annotation relative to the viewport:
    const pageIndex = 0;
    const viewPort = viewer.getViewPort(pageIndex);
    const annotationRect = (await viewer.findAnnotation('10R'))[0].annotation.rect;
    const invertedRect = viewer.changeBoundsOrigin(pageIndex, annotationRect, 'BottomLeft', 'TopLeft');
    const annotationX1 = invertedRect[0] * viewPort.scale;
    const annotationY1 = invertedRect[1] * viewPort.scale;
    const annotationX2 = invertedRect[2] * viewPort.scale;
    const annotationY2 = invertedRect[3] * viewPort.scale;

    Parameters

    • pageIndex: number

      Page index (Zero based).

    • bounds: number[]

      bounds array: [x1, y1, x2, y2]

    • srcOrigin: "TopLeft" | "BottomLeft"

      Source coordinate system origin. Possible values are: 'TopLeft' or 'BottomLeft'.

    • destOrigin: "TopLeft" | "BottomLeft"

      Destination coordinate system origin. Possible values are: 'TopLeft' or 'BottomLeft'.

    Returns number[]

changeOrigin

  • changeOrigin(pageIndex: number, y: number, srcOrigin: "TopLeft" | "BottomLeft", destOrigin: "TopLeft" | "BottomLeft"): number
  • This method changes coordinate system origin for y coordinate given by parameter y and returns converted value.

    example
    var pageIndex = 0;
    var y = 0;
    // Convert from TopLeft origin to BottomLeft origin
    // taking into account the viewport from the first page:
    var yBottom = viewer.changeOrigin(pageIndex, y, 'TopLeft', 'BottomLeft');

    Parameters

    • pageIndex: number
    • y: number
    • srcOrigin: "TopLeft" | "BottomLeft"
    • destOrigin: "TopLeft" | "BottomLeft"

    Returns number

changeOriginToBottom

  • changeOriginToBottom(pageIndex: any, y: any): number
  • Converts the origin of the Y coordinate to the bottom.

    example
    var pageIndex = 0;
    var y = 0;
    // Convert y value from TopLeft origin to BottomLeft origin
    // taking into account the viewport from the first page:
    var yBottom = viewer.changeOriginToBottom(pageIndex, y);

    Parameters

    • pageIndex: any
    • y: any

    Returns number

changeOriginToTop

  • changeOriginToTop(pageIndex: any, y: any): number
  • Converts the origin of the Y coordinate to the top.

    example
    var pageIndex = 0;
    var y = 0;
    // Convert y value from BottomLeft origin to TopLeft origin
    // taking into account the viewport from the first page:
    var yTop = viewer.changeOriginToTop(pageIndex, y);

    Parameters

    • pageIndex: any
    • y: any

    Returns number

cloneAnnotation

  • Clone annotation or field given by parameter annotation. Requires SupportApi.

    example
    // Below is the sample how to copy field with name "field1" and put it to the second page programmatically:
    // Find field widget with name field1:
    var resultData = await viewer.findAnnotation("field1", {findField: 'fieldName'});
    // Clone field:
    var clonedField = viewer.cloneAnnotation(resultData[0].annotation);
    // Change field name property:
    clonedField.fieldName = "field1Copy";
    // Add cloned field to the second page.
    viewer.addAnnotation(1, clonedField);

    Parameters

    Returns AnnotationBase

closePanel

  • closePanel(panelHandleOrId?: PanelHandle | string): void
  • Closes the side panel.

    example
    viewer.closePanel();

    Parameters

    • Optional panelHandleOrId: PanelHandle | string

      Optional. Panel handle or panel id to close.

    Returns void

deletePage

  • deletePage(pageIndex?: undefined | number): Promise<void>
  • Delete page. Requires SupportApi.

    example
    // Delete page with index 3.
    viewer.deletePage(3);

    Parameters

    • Optional pageIndex: undefined | number

      page index to delete.

    Returns Promise<void>

dispose

  • dispose(): void
  • Use this method to close and release resources occupied by the GcPdfViewer.

    Returns void

download

  • download(fileName?: undefined | string): void
  • Downloads the PDF document loaded in the Viewer to the local disk.

    example
    viewer.download();

    Parameters

    • Optional fileName: undefined | string

      the destination file name.

    Returns void

endUpdate

  • endUpdate(): void
  • Resumes notifications suspended by calls to @see:beginUpdate.

    example

    viewer.endUpdate();

    deprecated

    Returns void

execCopyAction

  • execCopyAction(buffer?: CopyBufferData): Promise<boolean>
  • Execute Copy action (Ctrl + C shortcut). Requires SupportApi.

    example
    viewer.execCopyAction();

    Parameters

    • Optional buffer: CopyBufferData

      data to copy.

    Returns Promise<boolean>

execCutAction

  • execCutAction(buffer?: CopyBufferData): Promise<boolean>
  • Execute Cut action (Ctrl + X shortcut). Requires SupportApi.

    example
    viewer.execCutAction();

    Parameters

    • Optional buffer: CopyBufferData

      data to cut.

    Returns Promise<boolean>

execDeleteAction

  • execDeleteAction(buffer?: CopyBufferData): Promise<boolean>
  • Execute Delete action (DEL shortcut). Requires SupportApi.

    example
    viewer.execDeleteAction();

    Parameters

    • Optional buffer: CopyBufferData

      data to delete.

    Returns Promise<boolean>

execPasteAction

  • Execute Paste action (Ctrl + V shortcut). Requires SupportApi.

    example
    if(viewer.hasCopyData) {
      viewer.execPasteAction({x: 10, y: 10, pageIndex: 0});
    }

    Parameters

    Returns Promise<boolean>

findAnnotation

  • findAnnotation(findString: string | number, findParams?: undefined | { findAll?: undefined | false | true; findField?: "id" | "title" | "contents" | "fieldName" | string; pageNumberConstraint?: undefined | number }): Promise<{ annotation: AnnotationBase; pageNumber: number }[]>
  • Find annotation(s) within opened document. Returns promise which will be resolved with search results.

    example
    // Find annotation with id '2R':
    viewer.findAnnotation("2R").then(function(dataArray) {
      if(dataArray[0])
        alert(`Annotation ${dataArray[0].annotation.id} found on page with index ${dataArray[0].pageNumber - 1}.`);
      else
        alert('Annotation not found.');
    });
    example
    // find all fields with name field1:
    viewer.findAnnotation("field1", {findField: 'fieldName', findAll: true}).then(function(dataArray) {
    
    });
    example
    // find all text annotations on page 1:
    const resultArr = await viewer.findAnnotation(1, // 1 - AnnotationTypeCode.TEXT
                          { findField: 'annotationType',
                              pageNumberConstraint: 1, findAll: true });

    Parameters

    • findString: string | number

      Find query.

    • Optional findParams: undefined | { findAll?: undefined | false | true; findField?: "id" | "title" | "contents" | "fieldName" | string; pageNumberConstraint?: undefined | number }

      find parameters. By default annotation will be searched by id without page constraint.

    Returns Promise<{ annotation: AnnotationBase; pageNumber: number }[]>

getDocumentInformation

  • Gets meta data information for the current document.

    example
    const docMetaInfo = await viewer.getDocumentInformation();

    Returns Promise<DocumentInformation>

getDocumentSecurity

  • getDocumentSecurity(): Promise<DocumentSecuritySummary>
  • Gets security information for the current document.

    example
    const docSecurityInfo = await viewer.getDocumentSecurity();

    Returns Promise<DocumentSecuritySummary>

getPageRotation

  • getPageRotation(pageIndex: number): number
  • Get the page rotation value.

    example
    // Get the first page rotation value:
    var rotation = viewer.getPageRotation(0);

    Parameters

    • pageIndex: number

    Returns number

getPageSize

  • getPageSize(pageIndex: number, includeScale?: undefined | false | true): { height: number; width: number }
  • Returns the page size. By default, return size without scale, pass true for the includeScale argument if you want to get the scaled value.

    example
    // Get first page size:
    var pageSize = viewer.getPageSize(0);

    Parameters

    • pageIndex: number

      Page index (Zero based).

    • Optional includeScale: undefined | false | true

      Optional. If true, the method will return scaled value.

    Returns { height: number; width: number }

    • height: number
    • width: number

getPageTabs

  • getPageTabs(pageIndex: number): "S" | "R" | "C" | undefined
  • Get page fields tabs order.

    Parameters

    • pageIndex: number

    Returns "S" | "R" | "C" | undefined

getSelectedText

  • getSelectedText(): string
  • Returns the contents of the text selection.

    example
    alert("Text selected by the user: " + viewer.getSelectedText());

    Returns string

getViewPort

  • getViewPort(pageIndex: number): { height: number; rotation: number; scale: number; viewBox: number[]; width: number }
  • Returns PDF page view port information.

    example
    // Get the viewport object for the first page:
    var viewPort = viewer.getViewPort(0);

    Parameters

    • pageIndex: number

      Page index (Zero based).

    Returns { height: number; rotation: number; scale: number; viewBox: number[]; width: number }

    Object containing following fields: { viewBox: // Original page bounds: [x1, y1, x2, y2]. // If you want to know original page's width/height, you can get it using viewBox values: // var pageWidth = viewBox[2] - viewBox[0]; // var pageHeight = viewBox[3] - viewBox[1]; width: // Current width of the page in user space (scale and rotation values are applied), height: // Current height of the page in user space (scale and rotation values are applied) scale: // Active scale value rotation: // Active rotation value }

    • height: number
    • rotation: number
    • scale: number
    • viewBox: number[]
    • width: number

goToFirstPage

  • goToFirstPage(): void
  • Go to the first page.

    example
    viewer.goToFirstPage();

    Returns void

goToLastPage

  • goToLastPage(): void
  • Go to the last page.

    example
    viewer.goToLastPage();

    Returns void

goToNextPage

  • goToNextPage(): void
  • Go to the next page.

    example
    viewer.goToNextPage();

    Returns void

goToPageNumber

  • goToPageNumber(pageNumber: number): void
  • Go to the page with the specific page number (numbering starts at 1).

    example
    // Go to the second page:
    viewer.goToPageNumber(2);

    Parameters

    • pageNumber: number

    Returns void

goToPrevPage

  • goToPrevPage(): void
  • Go to the previous page.

    example
    viewer.goToPrevPage();

    Returns void

loadAndScrollPageIntoView

  • loadAndScrollPageIntoView(pageIndex: number, destArray?: any[]): Promise<boolean>
  • The method loads the page at the index specified by the pageIndex parameter, and scrolls the page into the view.

    example
    // Load and display the first page:
    viewer.loadAndScrollPageIntoView(0);

    Parameters

    • pageIndex: number

      Destination page index.

    • Optional destArray: any[]

      The parameter is used for the @see:scrollPageIntoView method after the page is fully loaded.

    Returns Promise<boolean>

    Returns the boolean promise that resolves when the page is fully loaded (including text and annotation layers) and scrolled. A promise is resolved with false value when the page does not exist or an error occurs, otherwise the promise is resolved with true value.

loadDocumentList

  • loadDocumentList(documentListUrl?: undefined | string): void
  • Load an updated document list into document list panel.

    example
    viewer.loadDocumentList();
    example
    // Load document list using DATA URI:
    viewer.loadDocumentList('data:,[{"path": "doc1.pdf"}, {"path": "doc2.pdf", "name": "Hello doc 2", "title": "title 2"}]');

    Parameters

    • Optional documentListUrl: undefined | string

      Optional. Document list service URL.

    Returns void

loadSharedDocuments

  • loadSharedDocuments(): void
  • Loads the updated list of shared documents into the shared documents panel.

    example
    viewer.loadSharedDocuments();

    Returns void

lockAnnotation

newDocument

  • newDocument(params?: { confirm?: undefined | false | true; fileName?: undefined | string } | string): Promise<LoadResult | null>
  • Creates and opens a new blank document. Requires SupportApi.

    example
    // Create a new blank document, name the file "test.pdf",
    // display a confirmation dialog if the active document has been modified.
    viewer.newDocument({ fileName: "test.pdf", confirm: true});

    Parameters

    • Optional params: { confirm?: undefined | false | true; fileName?: undefined | string } | string

      Parameters object: fileName - name of the file for a new document, confirm - show confirmation dialog if there are changes in the document.

    Returns Promise<LoadResult | null>

newPage

  • newPage(params?: undefined | { height?: undefined | number; pageIndex?: undefined | number; width?: undefined | number }): Promise<void>
  • Adds a blank page to the document. Requires SupportApi.

    example
    // Create a new blank page and insert it in the second position.
    viewer.newPage({pageIndex: 1});

    Parameters

    • Optional params: undefined | { height?: undefined | number; pageIndex?: undefined | number; width?: undefined | number }

      parameters object: width - page width in points, height - page height in points, pageIndex - target page index.

    Returns Promise<void>

open

  • open(file: any): Promise<LoadResult>
  • Open PDF document.

    example
    viewer.open("Documents/HelloWorld.pdf");

    Parameters

    • file: any

      URI to PDF document(string) or binary data(Uint8Array).

    Returns Promise<LoadResult>

openLocalFile

  • openLocalFile(): any
  • Show the file open dialog where the user can select the PDF file.

    example
    viewer.openLocalFile();

    Returns any

openPanel

  • openPanel(panelHandleOrId: PanelHandle | string): void
  • Opens the side panel.

    example
    const layersPanelHandle = viewer.addLayersPanel();
    viewer.open("house-plan.pdf").then(()=> {
      viewer.openPanel(layersPanelHandle);
    });

    Parameters

    • panelHandleOrId: PanelHandle | string

      Panel handle or panel id to open.

    Returns void

openSharedDocument

  • openSharedDocument(sharedDocumentId: string): Promise<OpenDocumentInfo | null>
  • Open shared document.

    example
    viewer.openSharedDocument("shared.pdf");

    Parameters

    • sharedDocumentId: string

    Returns Promise<OpenDocumentInfo | null>

print

  • print(): void
  • Opens the browser's print document dialog box.

    example
    viewer.print();

    Returns void

redoChanges

  • redoChanges(): void
  • Redo document changes. Requires SupportApi.

    example
    if(viewer.hasRedoChanges) {
      viewer.redoChanges();
    }

    Returns void

removeAnnotation

  • removeAnnotation(pageIndex: number, annotationId: string): Promise<boolean>
  • Remove annotation from document. Requires SupportApi.

    example
    // Remove annotation with id '2R' located on the first page:
    viewer.removeAnnotation(0, '2R');

    Parameters

    • pageIndex: number
    • annotationId: string

    Returns Promise<boolean>

repaint

  • repaint(indicesToRepaint?: number[]): void
  • Repaint pages. This method also redraws the page annotations.

    example
    // Redraw content and annotations for visible pages:
    viewer.repaint();
    example
    // Redraw content and annotations for pages with indexes 0 and 3:
    viewer.repaint([0, 3]);

    Parameters

    • Optional indicesToRepaint: number[]

      If specified, page indices to be redrawn, otherwise, this method redraws visible pages.

    Returns void

save

  • save(fileName?: undefined | string): Promise<boolean>
  • Downloads the modified PDF document to the local disk. Requires SupportApi.

    example
    viewer.save('Test.pdf');

    Parameters

    • Optional fileName: undefined | string

      destination file name.

    Returns Promise<boolean>

saveChanges

  • saveChanges(): Promise<boolean>
  • Upload local changes to server. Requires SupportApi.

    example
    viewer.saveChanges().then(function(result) {
      if(result) {
        alert("The document saved on the server.");
      } else {
        alert("Cannot save the document on the server.");
      }
    });

    Returns Promise<boolean>

scrollAnnotationIntoView

  • scrollAnnotationIntoView(pageIndex: number, annotation: AnnotationBase): any
  • Scroll annotation into view.

    example
    // Scroll the annotation located on the second page into view.
    viewer.scrollAnnotationIntoView(1, annotation);

    Parameters

    Returns any

scrollPageIntoView

  • scrollPageIntoView(params: { allowNegativeOffset?: undefined | false | true; destArray?: any[]; pageNumber: number }): void
  • Scroll page into view.

    example
    // Scroll to page 10.
    viewer.scrollPageIntoView( { pageNumber: 10 } )
    example
    // Scroll the annotation bounds rectangle into view:
    var rectangle = annotation.rect;
    var pagePosX = rectangle[0];
    var pagePosY = rectangle[1] + Math.abs(rectangle[3] - rectangle[1]);
    viewer.scrollPageIntoView({ pageNumber: pageIndex + 1, destArray: [null, { name: "XYZ" }, pagePosX, pagePosY, viewer.zoomValue / 100.0] });

    Parameters

    • params: { allowNegativeOffset?: undefined | false | true; destArray?: any[]; pageNumber: number }

      object. Scroll parameters: pageNumber - number. Page number. destArray - Array with destination information: destArray[0] // not used, can be null, pdf page reference (for internal use only). destArray[1] // contains destination view fit type name: { name: 'XYZ' } - Destination specified as top-left corner point and a zoom factor (the lower-left corner of the page is the origin of the coordinate system (0, 0)). { name: 'Fit' } - Fits the page into the window { name: 'FitH' } - Fits the widths of the page into the window { name: 'FitV' } - Fits the height of the page into a window. { name: 'FitR' } - Fits the rectangle specified by its top-left and bottom-right corner points into the window. { name: 'FitB' } - Fits the rectangle containing all visible elements on the page into the window. { name: 'FitBH' } - Fits the width of the bounding box into the window. { name: 'FitBV' } - Fits the height of the bounding box into the window. destArray[2] // x position offset destArray[3] // y position offset (note, the lower-left corner of the page is the origin of the coordinate system (0, 0)) destArray[4] // can be null, contains bounding box width when view name is FitR, contains scale when view name is XYZ, destArray[5] // can be null, contains bounding box height when view name is FitR

      • Optional allowNegativeOffset?: undefined | false | true
      • Optional destArray?: any[]
      • pageNumber: number

    Returns void

selectAnnotation

  • selectAnnotation(pageIndex: number | string, annotation?: AnnotationBase | string): Promise<boolean>
  • Select the annotation to edit. Requires SupportApi.

    example
    // Select an annotation with id 2R:
    viewer.selectAnnotation("2R");
    example
    // Select an annotation with id 9R located on the last page:
    viewer.selectAnnotation(viewer.pageCount - 1, "9R");

    Parameters

    • pageIndex: number | string

      Page index (zero based) or annotation id.

    • Optional annotation: AnnotationBase | string

      Annotation id or annotation object itself.

    Returns Promise<boolean>

setAnnotationBounds

  • setAnnotationBounds(annotationId: string, bounds: { h: number | undefined; w: number | undefined; x: number | undefined; y: number | undefined }, origin?: "TopLeft" | "BottomLeft", select?: boolean): Promise<void>
  • Use the setAnnotationBounds method to set the position and / or size of the annotation.

    example
    // Set the location of the annotation to the top / left corner:
    viewer.setAnnotationBounds('1R', {x: 0, y: 0});
    // Set the location of the annotation to the bottom / left corner:
    viewer.setAnnotationBounds('1R', {x: 0, y: 0}, 'BottomLeft');
    // Set the annotation size to 40 x 40 points:
    viewer.setAnnotationBounds('1R', {w: 40, h: 40});
    // Set the annotation position to x=50, y=50 (origin top / left) and size to 40 x 40 points:
    viewer.setAnnotationBounds('1R', {x: 50, y: 50, w: 40, h: 40});

    Parameters

    • annotationId: string

      annotation object or annotation id.

    • bounds: { h: number | undefined; w: number | undefined; x: number | undefined; y: number | undefined }

      Destination bounds - x, y, width and height are optional.

      • h: number | undefined
      • w: number | undefined
      • x: number | undefined
      • y: number | undefined
    • Default value origin: "TopLeft" | "BottomLeft" = "TopLeft"

      Source coordinate system origin. Default is TopLeft

    • Default value select: boolean = false

      Select annotation after editing. Default is false.

    Returns Promise<void>

setPageRotation

  • setPageRotation(pageIndex: number, rotation: number): Promise<boolean>
  • Set the absolute page rotation in degrees. Valid values are 0, 90, 180, and 270 degrees. Requires SupportApi.

    example
    // Set the first page rotation to 180 degrees:
    await viewer.setPageRotation(0, 180);

    Parameters

    • pageIndex: number
    • rotation: number

    Returns Promise<boolean>

setPageSize

  • setPageSize(pageIndex: number, size: { height: number; width: number }): Promise<boolean>
  • Set page size. Requires SupportApi.

    example
    // Set new page size for the first page:
    viewer.setPageSize(0, { width: 300, height: 500 } );

    Parameters

    • pageIndex: number
    • size: { height: number; width: number }
      • height: number
      • width: number

    Returns Promise<boolean>

setPageTabs

  • setPageTabs(pageIndex: number, tabs: "S" | "R" | "C" | undefined): void
  • Set page fields tabs order. Possible values are: R - Row order. C - Column order. S - Structure order (not supported by GcPdfViewer).

    Parameters

    • pageIndex: number
    • tabs: "S" | "R" | "C" | undefined

    Returns void

setTheme

  • setTheme(theme?: undefined | string): void
  • Set active viewer theme.

    example
    viewer.setTheme("themes/light-blue");

    Parameters

    • Optional theme: undefined | string

      theme name, specified in themes option.

    Returns void

showFormFiller

  • showFormFiller(): void
  • Displays 'Form filler' dialog.

    example
    if(viewer.hasForm) {
      viewer.showFormFiller();
    }

    Returns void

showMessage

  • showMessage(message: string, details?: string, severity?: "error" | "warn" | "info" | "debug"): void
  • Shows the message for the user.

    Parameters

    • message: string
    • Default value details: string = ""
    • Default value severity: "error" | "warn" | "info" | "debug" = "info"

    Returns void

showSignTool

  • Displays the 'Add Signature' dialog. Requires SupportApi.

    example
    viewer.showSignTool();

    Parameters

    • Optional preferredSettings: SignToolSettings

      Optional. These settings will take priority over signSettings option.

    Returns void

submitForm

  • submitForm(submitUrl: string): void
  • Executes "Submit A Form action" to send filled form data to a web server or email. Form data is submitted as HTML form using HTML submit method.

    example

    Submit form to a web server using absolute URL:

    viewer.submitForm("http://myhost.local/AcceptHtmlForm");
    example

    Submit form to a web server using relative URL:

    viewer.submitForm("/CustomFormHandler");
    example

    Submit form to an email address:

    viewer.submitForm("mailto:myform@example.com");

    Parameters

    • submitUrl: string

    Returns void

toViewPortPoint

  • Converts point to page's viewport taking into account page scale.

    example

    viewer.addStickyNote(viewer.toViewPortPoint({x: 50, y: 50, pageIndex: 0}));

    Parameters

    Returns GcSelectionPoint

undoChanges

  • undoChanges(): void
  • Undo document changes. Requires SupportApi.

    example
    if(viewer.hasUndoChanges) {
      viewer.undoChanges();
    }

    Returns void

unlockAnnotation

unselectAnnotation

  • unselectAnnotation(): any
  • Reset annotation selection. Requires SupportApi.

    example
    viewer.unselectAnnotation();

    Returns any

updateAnnotation

  • Update annotation. Requires SupportApi.

    example
    // Update annotation on the first page (page index is 0):
    viewer.updateAnnotation(0, annotation1);

    Parameters

    Returns Promise<{ annotation: AnnotationBase; pageIndex: number }>

    Promise, resolved by updated annotation object.

updateAnnotations

  • Update multiple annotations at the same time. Requires SupportApi.

    example
    // Update annotations on the second page (page index is 1):
    var annotationsToUpdate = [annotation1, annotation2];
    viewer.updateAnnotations(1, annotationsToUpdate);

    Parameters

    Returns Promise<{ annotations: AnnotationBase[]; pageIndex: number }>

    Promise, resolved by updated annotation objects.

updateRadioGroupValue

  • updateRadioGroupValue(fieldName: string, newValue: string, skipPageRefresh?: undefined | false | true): Promise<boolean>
  • Update radio buttons group given by parameter fieldName with new field value.

    example
    viewer.updateRadioGroupValue("radiogroup1", "3", true);

    Parameters

    • fieldName: string

      Grouped radio buttons field name

    • newValue: string

      New fieldValue

    • Optional skipPageRefresh: undefined | false | true

      boolean. Set to true if you don't need to update page display. Default is false.

    Returns Promise<boolean>

    Promise resolved by boolean value, true - radio buttons updated, false - an error occurred.

validateForm

  • validateForm(validator?: undefined | ((fieldValue: string | string[], field: WidgetAnnotation) => boolean | string), silent?: undefined | false | true, ignoreValidationAttrs?: undefined | false | true): string | boolean
  • Use this method to validate an active form and get the validation result.

    example
    // Validate all form fields, each field must have the value "YES" or "NO".
    viewer.validateForm((fieldValue, field) => { return (fieldValue === "YES" || fieldValue === "NO") ? true : "Possible value is YES or NO."; });

    Parameters

    • Optional validator: undefined | ((fieldValue: string | string[], field: WidgetAnnotation) => boolean | string)

      Optional. The validator function which will be called for each field in the form. You can return a string value with message about validation error, this message will be shown in UI. Return true or null for success result.

    • Optional silent: undefined | false | true

      Optional. Pass true if you don't want to display any messages to the user, but just want to get the final validation result.

    • Optional ignoreValidationAttrs: undefined | false | true

      Optional. Pass true to skip validation using field attributes such as required, min, max, minLength, maxLength, email and pattern, these attributes will be ignored.

    Returns string | boolean

    Returns true if validation was successful, false, or a string with a validation error message when validation is failed.