GcPdfViewer component is a fast JavaScript based client-side PDF Viewer that runs in all major browsers.

Note that DsPdfViewer is the new name for GcPdfViewer, with the same API.

During this transition period we are publishing both versions, but it is recommended that you switch to using DsPdfViewer when possible.

Hierarchy

Properties

Methods

findControl addAnnotation addAnnotationEditorPanel addArticlesPanel addAttachmentsPanel addDefaultPanels addDocumentListPanel addFormEditorPanel addLayersPanel addOutlinePanel addReplyTool addSearchPanel addSharedDocumentsPanel addStamp addStickyNote addThumbnailsPanel addViewAreaStyle applyOptions applyToolbarLayout beginUpdate bringPanelToFront changeBoundsOrigin changeOrigin changeOriginToBottom changeOriginToTop cloneAnnotation close closePanel confirm deletePage dispose download endUpdate execCopyAction execCutAction execDeleteAction execPasteAction executeTask findAnnotations getDocumentInformation getDocumentSecurity getEvent getPageLocation getPageRotation getPageSize getPageTabs getPanelState getSelectedText getSharedDocuments getSignatureInfo getViewPort goBack goForward goToFirstPage goToLastPage goToNextPage goToPage goToPageNumber goToPrevPage hideSecondToolbar highlight invalidate layoutPanels load loadAndScrollPageIntoView loadDocumentList loadSharedDocuments lockAnnotation newDocument newPage open openLocalFile openPanel openSharedDocument openSharedDocumentByIndex openSharedDocumentByName pdfStringToDate print redoChanges removeAnnotation removeViewAreaStyle repaint resetDocument resetForm resolvePageIndex save saveAsImages saveChanges scrollAnnotationIntoView scrollPageIntoView search selectAnnotation setActiveBottomPanel setActiveTopPanel setAnnotationBounds setPageRotation setPageSize setPageTabs setTheme showFormFiller showMessage showPanel showPdfOrganizer showSecondToolbar showSignTool submitForm triggerEvent undoChanges unlockAnnotation unselectAnnotation updateAnnotation updateAnnotations updateGroupFieldValue updatePanel validateForm

Accessors

Constructors

Properties

LicenseKey: string

Product license key.

Example

<script>
// Add your license
DsPdfViewer.LicenseKey = 'XXX';
// Add your code
const viewer = new DsPdfViewer("#viewer");
viewer.addDefaultPanels();
</script>
toggleSidebar: ((show?: boolean) => void)

Type declaration

    • (show?: boolean): void
    • Sets of toggles sidebar's panels visibility

      Parameters

      • Optional show: boolean

      Returns void

Methods

  • Gets the viewer instance using the host element or host element selector

    Example

    var viewer = DsPdfViewer.findControl("#root");
    

    Parameters

    • selector: string | HTMLElement

    Returns undefined | GcPdfViewer

  • 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

    • pageIndex: number
    • annotation: AnnotationBase
    • Optional args: { skipPageRefresh?: boolean }
      • Optional skipPageRefresh?: boolean

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

  • Add annotation editor panel. Requires SupportApi.

    Example

    viewer.addAnnotationEditorPanel();
    

    Returns PanelHandle

  • Add articles panel.

    Example

    viewer.addArticlesPanel();
    

    Returns PanelHandle

  • Add attachments panel.

    Example

    viewer.addAttachmentsPanel();
    

    Returns PanelHandle

  • Add default set of sidebar panels with default order: 'Thumbnails', 'Search', 'Outline', 'Layers', 'StructureTree', 'Attachments'

    Example

    viewer.addDefaultPanels();
    

    Returns 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 DsPdfViewer("#root", { documentListUrl: "/documentslist.json" });
    viewer.addDocumentListPanel();

    Example

    var viewer = new DsPdfViewer("#root");
    // Add document list panel and specify documentListUrl option:
    viewer.addDocumentListPanel('/documentslist.json');

    Example

    var viewer = new DsPdfViewer("#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: string | DocumentListItem[]

      Optional. Document list service URL or predefined list of document list items.

    Returns PanelHandle

  • Add form editor panel. Requires SupportApi.

    Example

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

    Returns PanelHandle

  • Add optional content layers panel.

    Example

    viewer.addLayersPanel();
    

    Returns PanelHandle

  • Add outline panel.

    Example

    viewer.addOutlinePanel();
    

    Returns PanelHandle

  • 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

    • sidebarState: GcRightSidebarState = 'collapsed'

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

    Returns void

  • Add Search panel.

    Example

    viewer.addSearchPanel();
    

    Returns PanelHandle

  • Add a panel with a list of shared documents.

    Example

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

    Returns PanelHandle

  • Add stamp annotation.

    Example

    // Add Graphical signature to the PDF using external image
    function addStampFromUrl(imageUrl, viewer) {
    * fetch(imageUrl)
    .then(response => response.blob())
    .then(blob => blob.arrayBuffer())
    .then(arrayBuffer => {
    const fileId = new Date().getTime() + ".png";
    const fileName = fileId;
    const pageIndex = 0;
    const imageData = new Uint8Array(arrayBuffer);
    const rect = [0, 0, 200, 200];

    viewer.storage.setItem(fileId, imageData);
    viewer.addStamp(
    imageData,
    {
    fileId,
    fileName,
    pageIndex,
    rect,
    select: false,
    subject: "",
    rotate: 0,
    convertToContent: false
    });
    });
    }
    // Usage:
    addStampFromUrl("http://localhost/image.png", viewer);

    Parameters

    • imageData: null | Uint8Array

      Uint8Array, binary image data.

    • args: { convertToContent?: boolean; fileId: string; fileName?: string; pageIndex: number; rect: number[]; rotate?: number; select?: boolean; subject?: string }
      • Optional convertToContent?: boolean
      • fileId: string
      • Optional fileName?: string
      • pageIndex: number
      • rect: number[]
      • Optional rotate?: number
      • Optional select?: boolean
      • Optional subject?: string

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

  • 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

  • Add Thumbnails panel

    Example

    viewer.addThumbnailsPanel();
    

    Returns PanelHandle

  • Adds a css style to the view area.

    Returns

    style element identifier.

    Example

    // Enable RTL text direction:
    viewer.addViewAreaStyle(".gc-text-content, p, h1 { direction: rtl !important }");

    Parameters

    • cssText: string

    Returns string

  • Call this method in order to apply changed options.

    Example

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

    Returns 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 DsPdfViewer(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

  • Suspends notifications until the next call to @see:endUpdate.

    Example

    viewer.beginUpdate();
    

    Deprecated

    Returns void

  • Deprecated

    use expandPanel() instead

    Parameters

    • panelKey: PanelHandle

    Returns void

  • 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'.

    • normalize: boolean = true

      Optional. Default is true. Normalize rectangle [x1, y1, x2, y2] so that (x1,y1) < (x2,y2).

    Returns 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

  • 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

  • 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

  • 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

  • Closes the currently open document.

    Example

    await viewer.close();
    

    Returns Promise<void>

  • Closes the side panel.

    Example

    viewer.closePanel();
    

    Parameters

    • Optional panelHandleOrId: string | PanelHandle

      Optional. Panel handle or panel id to close.

    Returns void

  • Display confirmation dialog.

    Example

    const confirmResult = await viewer.confirm("Apply changes?", "info", "Confirm action", ["Yes", "No", "Cancel"]);
    if (confirmResult === "Yes") {
    // put your code here
    } else if (confirmResult === "No") {
    // put your code here
    } else {
    // put your code here
    }

    Parameters

    • Optional confirmationText: string | Element
    • Optional level: "error" | "info" | "warning"
    • Optional title: string
    • Optional buttons: ConfirmButton[]

    Returns Promise<boolean | ConfirmButton>

  • Delete page. Requires SupportApi.

    Example

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

    Parameters

    • Optional pageIndex: number

      page index to delete.

    Returns Promise<void>

  • Use this method to close and release resources occupied by the DsPdfViewer.

    Returns void

  • Downloads the PDF document loaded in the Viewer to the local disk.

    Example

    viewer.download();
    

    Parameters

    • Optional fileName: string

      the destination file name.

    Returns void

  • Resumes notifications suspended by calls to @see:beginUpdate.

    Example

    viewer.endUpdate();
    

    Deprecated

    Returns void

  • Execute Copy action (Ctrl + C shortcut). Requires SupportApi.

    Example

    viewer.execCopyAction();
    

    Parameters

    • Optional buffer: CopyBufferData

      data to copy.

    Returns Promise<boolean>

  • Execute Cut action (Ctrl + X shortcut). Requires SupportApi.

    Example

    viewer.execCutAction();
    

    Parameters

    • Optional buffer: CopyBufferData

      data to cut.

    Returns Promise<boolean>

  • Execute Delete action (DEL shortcut). Requires SupportApi.

    Example

    viewer.execDeleteAction();
    

    Parameters

    • Optional buffer: CopyBufferData

      data to delete.

    Returns Promise<boolean>

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

    Example

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

    Parameters

    • Optional point: GcSelectionPoint

      insert position.

    Returns Promise<boolean>

  • Starts long-running operation and displays progress window while operation is running.

    Parameters

    • task: ((callbacks: TaskCallbacks) => Promise<void>)
        • (callbacks: TaskCallbacks): Promise<void>
        • Parameters

          • callbacks: TaskCallbacks

          Returns Promise<void>

    • Optional settings: TaskSettings

    Returns Promise<void>

  • Find annotation(s) within opened document. Returns promise which will be resolved with search results.

    Example

    // Find annotation with id '2R':
    viewer.findAnnotations("2R").then(function(dataArray) {
    if(dataArray[0])
    alert(`Annotation ${dataArray[0].annotation.id} found on page with index ${dataArray[0].pageIndex}.`);
    else
    alert('Annotation not found.');
    });

    Example

    // find all fields with name field1:
    viewer.findAnnotations("field1", {findField: 'fieldName', findAll: true}).then(function(dataArray) {

    });

    Parameters

    • findString: string | number

      Find query.

    • Optional findParams: { findAll?: boolean; findField?: string; pageIndexConstraint?: number }

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

      • Optional findAll?: boolean
      • Optional findField?: string
      • Optional pageIndexConstraint?: number

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

  • Gets meta data information for the current document.

    Example

    const docMetaInfo = await viewer.getDocumentInformation();
    

    Returns Promise<DocumentInformation>

  • Gets security information for the current document.

    Example

    const docSecurityInfo = await viewer.getDocumentSecurity();
    

    Returns Promise<DocumentSecuritySummary>

  • Get event object.

    Example

    viewer.getEvent("BeforeAddAnnotation").register(function(args) {
    console.log(args);
    });
    viewer.getEvent("AfterAddAnnotation").register(function(args) {
    console.log(args);
    });

    Parameters

    • eventName: EventName

    Returns EventFan<any>

  • Returns position of the page view relative to the browser window.

    Example

    var pageLocation = viewer.getPageLocation(0);
    console.log('The first page location is ' + location.x + ', ' + location.y);

    Example

    // Draws a red rectangle over the annotation with id "10R".
    (async function(viewer, annotationId) {
    const pageLocation = viewer.getPageLocation(0), viewPort = viewer.getViewPort(0),
    scale = viewPort.scale, viewBox = viewPort.viewBox;
    const rect = (await viewer.findAnnotation(annotationId))[0].annotation.rect;
    const x1 = rect[0] * scale + pageLocation.x, x2 = rect[2] * scale + pageLocation.x,
    y1 = (viewBox[3] - rect[3]) * scale + pageLocation.y, y2 = (viewBox[3] - rect[1]) * scale + pageLocation.y;
    const div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.left = `${x1}px`; div.style.top = `${y1}px`;
    div.style.width = `${x2 - x1}px`; div.style.height = `${y2 - y1}px`;
    div.style.border = '1px solid red';
    document.body.appendChild(div);
    })(viewer, "10R");

    Example

    // Add text annotation on mouse click
    document.addEventListener("click", (e) => {
    const target = (e["path"] || (e["composedPath"] && e["composedPath"]()) || [])[0] || e.target, page = target.closest(".page");
    if(target.closest(".gc-annotation"))
    return;
    if(page) {
    const pageIndex = page.getAttribute("data-index") * 1, pageLoc = viewer.getPageLocation(pageIndex), scale = viewer.getViewPort(pageIndex).scale;
    const x = (e.clientX - pageLoc.x) / scale, y = (e.clientY - pageLoc.y) / scale;
    const rect = viewer.changeBoundsOrigin(pageIndex, [x, y, x + 20, y + 20], "TopLeft", "BottomLeft");
    viewer.addAnnotation(pageIndex, { annotationType: 1 , contents: "Text annotation content", rect });
    }
    });

    Parameters

    • pageIndex: number

    Returns { x: number; y: number }

    • x: number
    • y: number
  • Get the page rotation value.

    Example

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

    Parameters

    • pageIndex: number
    • includeViewRotation: boolean = true

      Include view rotation, default is true.

    Returns 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: boolean

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

    Returns { height: number; width: number }

    • height: number
    • width: number
  • Get page annotations tabs order. A name specifying the tab order that shall be used for annotations on the page. Possible values are: R - Row order. C - Column order. S - Structure order (not supported by DsPdfViewer). A - Annotations order. This order refers to the order of annotation in the annotations collection. W - Widgets order . This order uses the same ordering as "Annotations" order, but two passes are made, the first only picking the widget annotations and the second picking all other annotations.

    Parameters

    • pageIndex: number

    Returns undefined | "R" | "S" | "C" | "A" | "W"

  • Gets the current panel state.

    Parameters

    • panelKey: PanelHandle

    Returns null | PanelSettings

  • Returns the contents of the text selection.

    Example

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

    Returns string

  • Returns a list of shared documents available to the current user.

    Example

    var sharedDocuments = await viewer.getSharedDocuments();
    

    Returns Promise<null | SharedDocumentInfo[]>

  • Get information about signature used in document.

    Example

    // Example: check if the current document is signed and show information about signature:
    var viewer = DsPdfViewer.findControl("#root");
    const signatureInfo = await viewer.getSignatureInfo();
    if(signatureInfo.signed) {
    const signatureValue = signatureInfo.signedByFields[0].signatureValue;
    const signerName = signatureValue.name;
    const location = signatureValue.location;
    const signDate = viewer.pdfStringToDate(signatureValue.modificationDate);
    alert("The document was signed using digital signature. Signed by: " + signerName + ", location: " + location + ", sign date: " + signDate.toString());
    } else {
    alert("The document is not signed.");
    }

    Returns Promise<SignatureInformation>

  • Returns PDF page view port information.

    Returns

    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 }

    Example

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

    Parameters

    • pageIndex: number

      Page index (Zero based).

    Returns PageViewport

  • Move back in the document history.

    Returns void

  • Move forward in the document history.

    Returns void

  • Go to the first page.

    Example

    viewer.goToFirstPage();
    

    Returns void

  • Go to the last page.

    Example

    viewer.goToLastPage();
    

    Returns void

  • Go to the next page.

    Example

    viewer.goToNextPage();
    

    Returns void

  • Go to the page with the specific page index.

    Since

    2.3.1

    Example

    // Go to the first page:
    viewer.goToPage(0);

    Parameters

    • pageIndex: number

    Returns void

  • Go to the page with the specific page number (numbering starts at 1).

    Deprecated

    Method goToPageNumber deprecated since version 2.3.1, use goToPage method or pageIndex property instead.

    Example

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

    Parameters

    • pageNumber: number

    Returns void

  • Go to the previous page.

    Example

    viewer.goToPrevPage();
    

    Returns void

  • Hide second toolbar.

    Example

    viewer.hideSecondToolbar();
    

    Returns void

  • Navigates to a page containing the result and highlights found text.

    Parameters

    • result: SearchResult

    Returns Promise<void>

  • Ensures that all visual child elements of the viewer are properly updated for layout. Call this method to update the size of the inner content when the viewer is dynamically resized.

    Example

    viewer.eventBus.on("viewersizechanged", function() {
    // Make viewer height equal to content height of inner pages, including the margins:
    document.querySelector("#root").style.height = viewer.pageCount * 50 + viewer.pageCount * viewer.getPageSize(0, true).height + "px";
    // Invalidate layout:
    viewer.invalidate();
    });

    Returns void

  • Orders and filters panel items. '*' indicates "the rest of panels". 'sep'/'separator' indicated menu separator.

    Parameters

    • layout: string[]

    Returns void

  • Loads the report (no UI), so caller has to process load result and report error if any.

    Parameters

    • moniker: DocumentMoniker
    • Optional token: CancellationToken

    Returns Promise<LoadResult>

  • The method loads the page at the index specified by the pageIndex parameter, and scrolls the page into the view.

    Returns

    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.

    Example

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

    Parameters

    • pageIndex: number

      Destination page index.

    • Optional destArray: any[]

      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 scrollIntoViewOptions: boolean | ScrollPageIntoViewOptions

      Optional scroll options. Used when the destArray parameter is not specified. If true, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "start", inline: "nearest"}. This is the default value. If false, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "end", inline: "nearest"}.

    Returns Promise<boolean>

  • 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": "doc 2", "title": "title 2"}]');

    Parameters

    • Optional documentListUrl: string | DocumentListItem[]

      Optional. Document list service URL or array with the document list items.

    Returns void

  • Loads the updated list of shared documents into the shared documents panel.

    Example

    viewer.loadSharedDocuments();
    

    Returns void

  • 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: string | { confirm?: boolean; fileName?: 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<null | LoadResult>

  • 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: { height?: number; pageIndex?: number; width?: number }

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

      • Optional height?: number
      • Optional pageIndex?: number
      • Optional width?: number

    Returns Promise<void>

  • Open PDF document.

    Example

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

    Example

    // Specify Basic Access authentication headers:
    viewer.open("http://localhost:5005/api/pdf-viewer/GetPdf?file=HelloWorld.pdf", {
    headers: {
    "Authorization": "Basic " + btoa(unescape(encodeURIComponent("USERNAME:PASSWORD"))),
    "CustomHeader": "Custom header value"
    }
    });

    Parameters

    • Optional file: any

      URL to PDF document(string) or binary data(Typed array - Uint8Array).

    • Optional openParameters: OpenParameters

      Loading parameters object.

    Returns Promise<LoadResult>

  • Show the file open dialog where the user can select the PDF file.

    Example

    viewer.openLocalFile();
    

    Returns any

  • Opens the side panel.

    Example

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

    Parameters

    • panelHandleOrId: string | PanelHandle

      Panel handle or panel id to open.

    Returns void

  • Open shared document by it's id.

    Example

    Open shared document using document index:

    async function openSharedDocByIndex(viewer, sharedDocIndex) { 
    const sharedDocuments = await viewer.getSharedDocuments();
    viewer.openSharedDocument(sharedDocuments[sharedDocIndex].documentId);
    }
    // Open first shared document:
    openSharedDocByIndex(DsPdfViewer.findControl("#viewer"), 0);

    Example

    Open shared document using document’s file name. Note, a document with the same name can be shared multiple times. In the example below, we open the first found document with the given fileName.

    async function openSharedDocByName(viewer, fileName) { 
    const sharedDocuments = await viewer.getSharedDocuments();
    const index = sharedDocuments.findIndex(d=>d.fileName === fileName);
    if(index !== -1)
    viewer.openSharedDocument(sharedDocuments[index].documentId);
    }
    // Open the first available shared document named "financial-report.pdf":
    openSharedDocByName(DsPdfViewer.findControl("#viewer"), "financial-report.pdf");

    Parameters

    • sharedDocumentId: string

      unique shared document identifier.

    Returns Promise<null | OpenDocumentInfo>

  • Open shared document using document index.

    Example

    Open second shared document:

    viewer.openSharedDocumentByIndex(1);
    

    Parameters

    • sharedDocIndex: number

    Returns Promise<null | OpenDocumentInfo>

  • Open shared document using document’s file name. Note, a document with the same name can be shared multiple times. The openSharedDocumentByName opens the first found document with the given fileName.

    Example

    // Open the first available shared document named "sample.pdf":
    viewer.openSharedDocumentByName("sample.pdf");

    Parameters

    • fileName: string

    Returns Promise<null | OpenDocumentInfo>

  • Convert a PDF date string to a JavaScript 'Date' object. The PDF date string format is described in section 7.9.4 of the official PDF 32000-1:2008 specification.

    Returns

    Parameters

    • Optional input: string | Date

    Returns null | Date

  • Opens the browser's print document dialog box.

    Example

    viewer.print();
    

    Returns void

  • Redo document changes. Requires SupportApi.

    Example

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

    Returns void

  • 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
    • Optional args: { skipPageRefresh?: boolean }
      • Optional skipPageRefresh?: boolean

    Returns Promise<boolean>

  • Removes a css style from the view area by its id.

    Example

    const id = viewer.addViewAreaStyle(".gc-text-content { font-size: 20px !important; }");
    viewer.removeViewAreaStyle(id);

    Parameters

    • id: string

      style element identifier.

    Returns boolean

  • 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

  • Resets report and cancel current session if any.

    Returns Promise<void>

  • Reset form values.

    Returns void

  • Resolve page index using PDF page reference.

    Example

    const openAction = (await viewer.viewerPreferences).openAction;
    if(openAction && openAction.dest) {
    const pageRef = openAction.dest[0];
    const targetPageIndex = await viewer.resolvePageIndex(pageRef);
    }

    Parameters

    • pageRef: any

    Returns Promise<null | number>

  • Save the modified PDF document to the local disk. Requires SupportApi.

    Example

    Specify destination file name

    viewer.save('Test.pdf');
    

    Parameters

    • Optional fileName: string

      Destination file name.

    • Optional settings: SaveSettings

      Additional save settings.

    Returns Promise<boolean>

  • Saves the pages of the current PDF document as PNG images, zips the result images, and downloads the result zip archive. Requires SupportApi.

    Example

    // Save the pages of the current PDF document as PNG images and specify destination zip file name:
    viewer.saveAsImages('Test.zip');

    Example

    // Save the pages of the current PDF document as PNG images,
    // and specify destination view zoom factor:
    viewer.saveAsImages("sample.pdf", { zoomFactor: 1.5 });

    Parameters

    • Optional fileName: string

      optional, destination zip archive file name.

    • Optional settings: SaveSettings

      Additional save settings.

    Returns 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>

  • Scroll annotation into view.

    Example

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

    Example

    // Scroll annotation into view by id.
    viewer.scrollAnnotationIntoView("2R");

    Example

    // Scroll annotation into view by id using smooth scroll behavior.
    viewer.scrollAnnotationIntoView("2R", { behavior: "smooth" });

    Parameters

    Returns Promise<void>

  • Scroll page into view.

    Deprecated

    Method scrollPageIntoView deprecated since v2.3.1 use methods goToPage, scrollAnnotationIntoView instead.

    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?: boolean; 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?: boolean
      • Optional destArray?: any[]
      • pageNumber: number

    Returns void

  • Searches currently opened document for the text.

    Parameters

    • __namedParameters: SearchOptions
    • resultFn: ((result: SearchResult) => void)
        • (result: SearchResult): void
        • Parameters

          • result: SearchResult

          Returns void

    • Optional progressFn: ((progress: { pageCount: null | number; pageIndex: number }) => void)
        • (progress: { pageCount: null | number; pageIndex: number }): void
        • Parameters

          • progress: { pageCount: null | number; pageIndex: number }
            • pageCount: null | number
            • pageIndex: number

          Returns void

    • Optional cancel: CancellationToken

    Returns Promise<SearchStatus>

  • 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: string | number

      Page index (zero based) or annotation id.

    • Optional annotation: string | AnnotationBase

      Annotation id or annotation object itself.

    Returns Promise<boolean>

  • Updates activeBottomPanelId for to show/hide panel with setting.location = 'bottom' (id = null to hide panel)

    Parameters

    • id: null | string

    Returns void

  • Updates activeTopPanelId for to show/hide panel with setting.location = 'top' (id = null to hide panel)

    Parameters

    • id: null | string

    Returns 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: undefined | number; w: undefined | number; x: undefined | number; y: undefined | number }

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

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

      Source coordinate system origin. Default is TopLeft

    • select: boolean = false

      Select annotation after editing. Default is false.

    Returns Promise<void>

  • 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
    • viewRotationIncluded: boolean = true

    Returns 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>

  • Set page annotations tabs order. A name specifying the tab order that shall be used for annotations on the page. Possible values are: R - Row order. C - Column order. S - Structure order (not supported by DsPdfViewer). A - Annotations order. This order refers to the order of annotation in the annotations collection. W - Widgets order . This order uses the same ordering as "Annotations" order, but two passes are made, the first only picking the widget annotations and the second picking all other annotations.

    Parameters

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

    Returns void

  • Set active viewer theme.

    Example

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

    Parameters

    • Optional theme: string

      theme name, specified in themes option.

    Returns void

  • Displays 'Form filler' dialog.

    Example

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

    Returns void

  • Shows the message for the user.

    Example

     // Show warning message
    viewer.showMessage("Warning message text", "", "warn");

    Parameters

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

    Returns void

  • Updates the panel visibility.

    Parameters

    • panelKey: PanelHandle
    • Optional visible: boolean

    Returns void

  • Show PDF Organizer dialog.

    Example

    viewer.showPdfOrganizer();
    

    Returns PdfOrganizerDialog

  • Show a second toolbar with a key specified by the toolbarKey argument.

    Example

    viewer.showSecondToolbar("draw-tools");
    

    Parameters

    • toolbarKey: string

    Returns Promise<void>

  • 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

  • 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

      Destination URI.

    • Optional options: SubmitFormOptions

      Optional, submit form options.

    Returns Promise<void>

  • Trigger event.

    Example

    // Listen CustomEvent:
    viewer.getEvent("CustomEvent").register(function(args) {
    console.log(args);
    });
    // Trigger CustomEvent:
    viewer.triggerEvent("CustomEvent", { arg1: 1, arg2: 2});

    Parameters

    • eventName: EventName
    • Optional args: EventArgs | BeforeOpenEventArgs | ThemeChangedEventArgs

    Returns void

  • Undo document changes. Requires SupportApi.

    Example

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

    Returns void

  • Reset annotation selection. Requires SupportApi.

    Example

    viewer.unselectAnnotation();
    

    Returns any

  • Update annotation. Requires SupportApi.

    Returns

    Promise, resolved by updated annotation object.

    Example

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

    Parameters

    • pageIndex: number
    • annotation: AnnotationBase
    • args: { changedPageIndex?: number; prevPageIndex?: number; skipPageRefresh?: boolean } = {}
      • Optional changedPageIndex?: number
      • Optional prevPageIndex?: number
      • Optional skipPageRefresh?: boolean

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

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

    Returns

    Promise, resolved by updated annotation objects.

    Example

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

    Parameters

    • pageIndex: number
    • annotations: AnnotationBase | AnnotationBase[]
    • Optional args: { skipPageRefresh?: boolean }
      • Optional skipPageRefresh?: boolean

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

  • Update radio buttons group given by parameter fieldName with new field value.

    Returns

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

    Example

    viewer.updateGroupFieldValue("radiogroup1", "3", { skipPageRefresh: true } );
    

    Example

    viewer.updateGroupFieldValue("radiogroup1", "3", { propertyName: "alternativeText", skipPageRefresh: true } );
    

    Parameters

    • fieldName: string

      Grouped radio buttons field name

    • newValue: string

      New fieldValue

    • Optional args: { propertyName?: string; skipPageRefresh?: boolean }

      skipPageRefresh boolean - set to true if you don't need to update page display. Default is false. propertyName string - property name to update. Default is "fieldValue".

      • Optional propertyName?: string
      • Optional skipPageRefresh?: boolean

    Returns Promise<boolean>

  • Updates panel settings such as visibility, label or "enabled" status.

    Parameters

    • panelKey: PanelHandle
    • settings: Partial<PanelSettings>

    Returns void

  • Use this method to validate an active form and get the validation result.

    Returns

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

    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: ((fieldValue: string | string[], field: WidgetAnnotation) => string | boolean)

      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.

        • (fieldValue: string | string[], field: WidgetAnnotation): string | boolean
        • Parameters

          Returns string | boolean

    • Optional silent: boolean

      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: boolean

      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

Accessors

  • 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:
    DsPdfViewer.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 DsPdfViewer(selector, { language: 'myLang' });
    viewer.addDefaultPanels();
    //viewer.open("sample.pdf");
    });
    }
    loadPdfViewer('#root');

    Returns i18n

  • get activatedEditorMode(): undefined | "" | "SecondBar" | "FormEditor" | "AnnotationEdtor" | "Any"
  • Activated editor mode name.

    Returns undefined | "" | "SecondBar" | "FormEditor" | "AnnotationEdtor" | "Any"

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

    Example

    • 
      
    • var viewer = new DsPdfViewer('#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 }[]>

  • get backgroundColor(): string
  • Gets or sets viewer background color, default value = 'transparent'

    Returns string

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

    Example

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

    Returns 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 DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
    viewer.addDefaultPanels();
    viewer.addAnnotationEditorPanel();
    viewer.addFormEditorPanel();
    viewer.beforeUnloadConfirmation = true;

    Parameters

    • enable: boolean

    Returns void

  • 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

  • get currentUserName(): string
  • 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

  • set currentUserName(userName: string): void
  • 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

  • get dataLoader(): GcPdfViewerDataLoader
  • PDF document meta data loader. Used by some sidebar panels.

    Returns GcPdfViewerDataLoader

  • get document(): null | IDocumentView
  • Gets the current document

    Returns null | IDocumentView

  • get editMode(): 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

  • set editMode(mode: EditMode): void
  • 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

    • mode: EditMode

    Returns void

  • get errorHandler(): ErrorHandler
  • Gets or sets callback that is invoked when an error occurs in the process of displaying the report

    Returns ErrorHandler

  • get eventBus(): IGCEventBus
  • Internal event bus. Available event names are: outlineloaded, attachmentsloaded, namedaction, pagemode, fileattachmentannotation, pagerendered, pagecancelled, scalechange, pagesinit, pagesloaded, documentchanged, rotationchanging, updateviewarea, undostorechanged, show-custom-layout, hide-custom-layout, annotationeditstarted, unselectannotation, annotation-bounds-change, pagechange, mousemodechange, request-answer, textlayerready, viewersizechanged, articlebeadnavigate, error, open, pagelabels, documentload.

    Example

    // Example: listen annotation selected/unselected event.
    var viewer = DsPdfViewer.findControl("#root");
    viewer.eventBus.on("annotationeditstarted", (args)=> {
    console.log("Annotation selected, annotation id: " + args.annotationId);
    });
    viewer.eventBus.on("unselectannotation", (args)=> {
    console.log("Annotation unselected, annotation id: " + args.annotationId);
    });

    Returns IGCEventBus

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

    Example

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

    Returns null | Uint8Array

  • 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 DsPdfViewer('#root');
    viewer.onAfterOpen.register(function() {
    alert("The document is opened, the fileName is " + viewer.fileName);
    });
    viewer.open('MyDocuments/Test.pdf');

    Returns string

  • get fileSize(): Promise<number>
  • Gets the PDF document file size in bytes.

    Example

    const fileSizeBytes = await viewer.fileSize;
    

    Returns Promise<number>

  • 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 DsPdfViewer('#root');
    viewer.onAfterOpen.register(function() {
    alert("The document is opened, the fileUrl is " + viewer.fileUrl);
    });
    viewer.open('MyDocuments/Test.pdf');

    Returns string

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

    Example

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

    Returns string

  • get gcPdfVersion(): string
  • Gets the GcPdf library version used by the SupportApi, if available.

    Returns string

  • 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

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

    Example

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

    Returns boolean

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

    Example

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

    Returns boolean

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

    Example

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

    Returns boolean

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

    • 
      
    • if(viewer.hasPersistentConnection) {
    • viewer.getSharedDocuments().then(function(result) {
    • });
    • }
    • 
      

    Returns boolean

  • 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

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

    Example

    var viewer = new DsPdfViewer('#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

  • 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

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

    Example

    // Hide annotations:
    viewer.hideAnnotations = true;

    Returns boolean

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

    Example

    // Hide annotations:
    viewer.hideAnnotations = true;

    Parameters

    • hide: boolean

    Returns void

  • get hostElement(): Element
  • Gets the main window's host element

    Returns Element

  • 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

  • get isEditModeSticked(): boolean
  • Returns true if the active edit mode is sticked by the user. Indicates that the stickyBehavior for the active edit button is enabled and the button is checked. See the toolbarLayout.stickyBehavior property for details.

    Returns boolean

  • get isInEditorMode(): boolean
  • Gets a value indicating whether the editor mode is currently active.

    Example

    let isInEditorMode = viewer.isInEditorMode;
    

    Example

    // Detect the start/end of edit mode
    var isEdit = false;
    viewer.onViewerStateChange.register(function () {
    if (viewer.isInEditorMode !== isEdit) {
    isEdit = viewer.isInEditorMode;
    console.log(isEdit ? "Editor Mode activated." : "Editor Mode deactivated.");
    }
    });

    Returns boolean

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

    Example

    var isUpdatingFlag = viewer.isUpdating;
    

    Returns boolean

  • get language(): string
  • language - A property that retrieves the standardized language key based on the provided language option. The language key is determined by the options.language setting.

    Returns

    Standardized language key (e.g., 'en', 'ja').

    Returns string

  • get layoutMode(): 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

  • set layoutMode(mode: LayoutMode): void
  • 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

    • mode: LayoutMode

    Returns void

  • get leftSidebar(): LeftSidebar
  • Left sidebar API.

    Example

    viewer.leftSidebar.hide();
    

    Returns LeftSidebar

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

    Returns LogLevel

  • set logLevel(logLvel: LogLevel): void
  • Sets current log level. Available log levels are: 'None', 'Critical', 'Error', 'Warning', 'Information', 'Debug', 'Trace'. Default level is 'None'.

    Parameters

    Returns void

  • get modificationsState(): ModificationsState
  • Gets modifications state for active document. Requires SupportApi.

    Example

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

    Returns ModificationsState

  • get onAfterAddAnnotation(): EventFan<AfterAddAnnotationEventArgs>
  • After add annotation event.

    Example

    viewer.onAfterAddAnnotation.register(function(args) {
    console.log(args);
    });

    Returns EventFan<AfterAddAnnotationEventArgs>

  • get onAfterOpen(): EventFan<EventArgs>
  • The event raised when the user changes the viewer theme.

    Example

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

    Returns EventFan<EventArgs>

  • get onAfterRemoveAnnotation(): EventFan<AfterRemoveAnnotationEventArgs>
  • After remove annotation event.

    Example

    viewer.onAfterRemoveAnnotation.register(function(args) {
    console.log(args);
    });

    Returns EventFan<AfterRemoveAnnotationEventArgs>

  • get onAfterUpdateAnnotation(): EventFan<AfterUpdateAnnotationEventArgs>
  • After update annotation event.

    Example

    viewer.onAfterUpdateAnnotation.register(function(args) {
    console.log(args);
    });

    Returns EventFan<AfterUpdateAnnotationEventArgs>

  • get onBeforeAddAnnotation(): EventFan<BeforeAddAnnotationEventArgs>
  • Before add annotation event. The event is cancelable.

    Example

    viewer.onBeforeAddAnnotation.register(function(args) {
    console.log(args);
    args.cancel = true; // set the cancel flag to cancel event.
    });

    Returns EventFan<BeforeAddAnnotationEventArgs>

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

    Example

    var viewer = new DsPdfViewer('#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>

  • get onBeforeRemoveAnnotation(): EventFan<BeforeRemoveAnnotationEventArgs>
  • Before remove annotation event. The event is cancelable.

    viewer.onBeforeRemoveAnnotation.register(function(args) {
    console.log(args);
    args.cancel = true; // set the cancel flag to cancel event.
    });

    Returns EventFan<BeforeRemoveAnnotationEventArgs>

  • get onBeforeUpdateAnnotation(): EventFan<BeforeUpdateAnnotationEventArgs>
  • Before update annotation event. The event is cancelable.

    viewer.onBeforeUpdateAnnotation.register(function(args) {
    console.log(args);
    args.cancel = true; // set the cancel flag to cancel event.
    });

    Returns EventFan<BeforeUpdateAnnotationEventArgs>

  • get onDocumentOpen(): EventFan<DocumentOpenedEventArgs>
  • The event indicating document was changed (new document opened, drilled or "back to parent" is issued)

    Returns EventFan<DocumentOpenedEventArgs>

  • get onDocumentProgress(): EventFan<ProgressMessage>
  • The event indicating document load progress

    Returns EventFan<ProgressMessage>

  • get onDocumentViewOpen(): EventFan<DocumentViewOpenedEventArgs>
  • The event indicating document view was changed (new document opened, refreshed, toggled etc)

    Returns EventFan<DocumentViewOpenedEventArgs>

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

    Example

    var viewer = new DsPdfViewer('#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>

  • get onThemeChanged(): EventFan<EventArgs>
  • Occurs when the viewer theme changed by user.

    Example

    var viewer = new DsPdfViewer(selector, {
    requireTheme: localStorage.getItem('demo_theme') || 'viewer'
    });
    viewer.addDefaultPanels();
    viewer.onThemeChanged.register(function(args) {
    localStorage.setItem('demo_theme', args.theme);
    });

    Returns EventFan<EventArgs>

  • get onViewerStateChange(): EventFan<ChangedEventArgs>
  • Indicates the viewer state was changed.

    Returns EventFan<ChangedEventArgs>

  • get optionalContentConfig(): Promise<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>

  • get options(): Partial<ViewerOptions>
  • The viewer options.

    Example

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

    Returns Partial<ViewerOptions>

  • set options(options: Partial<ViewerOptions>): void
  • PDF viewer options.

    Parameters

    Returns void

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

    Example

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

    Returns number

  • get pageDecoration(): PageDecoration
  • Gets or sets page view decoration mode.

    Returns PageDecoration

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

    Example

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

    Returns number

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

    Example

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

    Parameters

    • val: number

    Returns void

  • get requiredSupportApiVersion(): string
  • Gets the required SupportApi version that is compatible with the current version of the DsPdfViewer.

    Returns string

  • get rightSidebar(): GcRightSidebar
  • 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

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

    Example

    var viewer = new DsPdfViewer('#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

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

    Example

    var viewer = new DsPdfViewer('#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

  • get scrollView(): HTMLElement
  • Gets the scroll view HTML element. Note, the left scroll position is calculated by the viewer automatically - so, usually, you don't need to change left scroll position.

    Example

    // Scroll to the top of the document:
    viewer.scrollView.scrollTop = 0;

    Returns HTMLElement

  • get searcher(): GcPdfSearcher
  • Document search worker instance. Searches currently opened document for a text.

     // Highlight all search results without opening SearchPanel.
    const searchIterator = viewer.searcher.search({ Text: "test", MatchCase: true, HighlightAll: true });
    searchIterator.next();
    searcher.applyHighlight();
     // Iterate all search results
    const searcher = viewer.searcher;
    var searchResults = [];
    const searchIterator = searcher.search({ Text: textToSearch, MatchCase: true });
    var searchResult = await searchIterator.next();
    if (searchResult.value)
    searcher.highlight(searchResult.value)
    while (searchResult.value && !searchResult.done) {
    const searchResultValue = searchResult.value;
    searchResults.push(`index: ${searchResultValue.ItemIndex}, text: ${searchResultValue.DisplayText}, pageIndex: ${searchResultValue.PageIndex}`);
    searchResult = await searchIterator.next();
    }
    console.log("Search results: " + (searchResults.length ? searchResults.join("; ") : "No search results"));

    Example

    // Open the document, find the text 'wildlife' and highlight the first result:
    async function loadPdfViewer(selector) {
    var viewer = new DsPdfViewer(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 DsPdfViewer(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

  • get secondToolbar(): SecondToolbar
  • Second toolbar API.

    Returns SecondToolbar

  • get secondToolbarLayout(): SecondToolbarLayout
  • Second toolbar layout. Use the secondToolbarLayout property to configure available tools.

    Default

    Returns SecondToolbarLayout

  • set secondToolbarLayout(layout: SecondToolbarLayout): void
  • Second toolbar layout. Use the secondToolbarLayout property to configure available tools.

    Default

    Parameters

    • layout: SecondToolbarLayout

    Returns void

  • get signToolStorage(): 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

  • get storage(): DataStorage
  • Data storage for the active document.

    Example

    const fileData = viewer.storage.getItem(annotation.fileId);
    

    Example

    viewer.storage.setItem(fileId, bytes);
    

    Example

    Add Stamp annotation programatically using storage API

        viewer.newDocument().then(function() {	
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://localhost/sample.jpg', true);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function(e) {
    var arrayBuffer = this.response;
    if (arrayBuffer) {
    // Add Stamp annotation programatically:
    viewer.storage.setItem("sample_file_id_1", new Uint8Array(arrayBuffer));
    var pageSize = viewer.getPageSize(0);
    viewer.addAnnotation(0, {annotationType: 13, fileId: "sample_file_id_1", rect: [0, pageSize.height - 144, 144, pageSize.height]});
    }
    };
    xhr.send();
    });

    Returns DataStorage

  • get structureTree(): Promise<null | StructTreeNode[]>
  • Structure tree data.

    Example

    const viewer = new DsPdfViewer(selector);
    await viewer.open("sample.pdf");
    const structureTree = await viewer.structureTree;
    if(structureTree) {
    console.log(structureTree);
    }

    Returns

    A promise that is resolved with a [] objects that represents the page's structure tree, or null when no structure tree is present for the page.

    Returns Promise<null | StructTreeNode[]>

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

    Example

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

    Returns null | ISupportApi

  • get supportApiVersion(): string
  • Gets the connected version of the SupportApi, if available.

    Returns string

  • get tempOnPanelChange(): EventFan<null | string>
  • Temporary expose event, which occurs on panel change

    Returns EventFan<null | string>

  • get toolbarLayout(): PdfToolbarLayout
  • Defines the layout of the toolbar for different viewer modes: viewer, annotationEditor, formEditor.

    Description

    The full list of the viewer specific toolbar items:

    'open', '$navigation', '$split', 'text-selection', 'pan', 'zoom', '$fullscreen', '$split', 'text-tools', 'draw-tools', 'attachment-tools', 
    'form-tools', 'page-tools', '$split', 'rotate', 'search', 'view-mode', 'theme-change', 'download', 'print', 'save', 'save-images', 'hide-annotations', 'form-filler',
    'doc-title', 'doc-properties', 'about', 'share', 'single-page', 'continuous-view', '$history', '$mousemode', '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-highlight', 'edit-underline', 'edit-squiggly', 'edit-strike-out'.
    'edit-redact', 'edit-redact-apply', 'edit-erase', 'edit-undo', 'edit-redo', 'new-document', 'new-page', 'delete-page', '$split', 'pdf-organizer'

    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', '$split', 'pdf-organizer'

    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 DsPdfViewer('#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;

    Example

    // Make square, circle and line buttons sticky:
    viewer.toolbarLayout.stickyBehavior = ["edit-square", "edit-circle", "edit-line"];
    viewer.applyToolbarLayout();

    Returns PdfToolbarLayout

  • set toolbarLayout(toolbarLayout: PdfToolbarLayout): void
  • 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-highlight', 'edit-underline', 'edit-squiggly', 'edit-strike-out'.
    'edit-redact', 'edit-redact-apply', 'edit-erase', 'edit-undo', 'edit-redo', 'new-document', 'new-page', 'delete-page', '$split', 'pdf-organizer'

    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', '$split', 'pdf-organizer'

    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 DsPdfViewer('#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

    • toolbarLayout: PdfToolbarLayout

    Returns void

  • get undoCount(): number
  • Gets the number of levels(commands) on the undo stack. Requires SupportApi.

    Example

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

    Returns number

  • get undoIndex(): number
  • Gets the index of the current Undo level (command). This is the Undo command that will be executed on the next call to redoChanges(). Requires SupportApi.

    Example

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

    Returns number

  • get undoState(): (0 | { changeName: UndoChangeName; data: any; selectedAnnotation: null | { annotation: AnnotationBase; pageIndex: number } })[]
  • The current state of the undo store. Note that this property is read-only, do not programmatically change the elements of the collection. Use the Undo API methods to change the viewer's editor state. Undo API properties: hasUndoChanges, hasRedoChanges, undoIndex, undoCount Undo API methods: undoChanges(), redoChanges()

    Returns (0 | { changeName: UndoChangeName; data: any; selectedAnnotation: null | { annotation: AnnotationBase; pageIndex: number } })[]

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

    Example

    alert("The DsPdfViewer version is " + viewer.version);
    

    Returns string

  • get viewMode(): ViewMode
  • Gets or sets view mode (single page or continuous).

    Returns ViewMode

  • get viewerState(): Model
  • Gets currently viewed document state

    Returns Model

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

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

    Returns ZoomMode

  • set zoomMode(val: ZoomMode): void
  • 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

  • get zoomTarget(): ZoomTarget
  • Gets/sets target element for zoom transformation. If 'page' is set, each page will be transformed individually (default behavior). If 'viewport' is set, entire viewport element will be transformed instead. This is added to prevent issues in some specific cases, see ARJ-4340. *

    Returns ZoomTarget

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

    Example

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

    Returns number

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

    Example

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

    Parameters

    • val: number

    Returns void

Constructors

  • GcDocs PDF Viewer constructor.

    See

    ViewerOptions for further information.

    Parameters

    • element: string | HTMLElement

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

    • options: Partial<ViewerOptions> = {}

      Viewer options.

    Returns GcPdfViewer