Search results

PdfViewer

Represents the PDF viewer component.

<div id="pdfViewer"></div>
<script>
 var pdfViewerObj = new PdfViewer();
 pdfViewerObj.appendTo("#pdfViewer");
</script>

Properties

Get or set the dropdown field settings.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner, ItemModel, FontStyle} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.appendTo("#pdfViewer");
    // Add options to the field.
    let customOptions : ItemModel[] = [{itemName:'item1',itemValue:'item1'}, {itemName:'item2',itemValue:'item2'}]
    // Change the drop down field settings.
    viewer.DropdownFieldSettings = { 
        name: 'Drop down', 
        fontFamily: 'Helvetica', 
        fontSize: 10, 
        fontStyle: FontStyle.Italic, 
        color: 'black', 
        backgroundColor: 'white', 
        alignment: 'Left', 
        isReadOnly: false, 
        visibility: 'visible', 
        isRequired: false, 
        isPrint: true, 
        tooltip: 'Dropdown', 
        options: customOptions, 
        thickness: 1, 
        borderColor: 'black' 
    }

ajaxRequestSettings

AjaxRequestSettingsModel

Defines the ajax Request settings of the PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // HTTP header "X-Custom-Header": "Custom header value" // Custom HTTP header
    viewer.ajaxRequestSettings = { 
        ajaxHeaders: [
            {
                headerName : "Authorization", 
                headerValue : "Bearerabcdefghijklmnopqrstuvwxyz" 
            }
        ], 

        withCredentials: false 
    };
    viewer.appendTo("#pdfViewer");

annotationCollection

any[]

Get the Loaded document annotation Collections in the PdfViewer control.

<body style="margin:0px">
    <button id = 'logAnnot'>Show Annotation Collection</button>
    <div style="height: 100%;width: 100%">
        <div id="pdfViewer" style="height: 100%;width: 100%;"></div>
    </div>
</body>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
    viewer.appendTo('#pdfViewer');
    viewer.load('FormDesigner.pdf', null);

    document.getElementById('logAnnot').addEventListener('click', logAnnotationCollection);
    function logAnnotationCollection() {
        // Logs the annotation collection.
        console.log(viewer.annotationCollection);
    }

annotationSelectorSettings

AnnotationSelectorSettingsModel

Defines the settings of annotation selector.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner,AnnotationResizerLocation, CursorType} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the annotation selector settings.
    viewer.annotationSelectorSettings = {
         selectionBorderColor: 'blue', 
         resizerBorderColor: 'red', 
         resizerFillColor: '#4070ff', 
         resizerSize: 8, 
         selectionBorderThickness: 1, 
         resizerShape: 'Circle', 
         selectorLineDashArray: [5, 6], 
         resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges, 
         resizerCursorType: CursorType.grab 
        };
    viewer.appendTo("#pdfViewer");

annotationSettings

AnnotationSettingsModel

Defines the settings of the annotations.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the annotation settings.
    viewer.annotationSettings = {
         author: 'XYZ', 
         minHeight: 10, 
         minWidth: 10, 
         maxWidth: 100, 
         maxHeight: 100, 
         isLock: false, 
         skipPrint: false, 
         skipDownload: false, 
         allowedInteractions: ['Resize'] 
        };
    viewer.appendTo("#pdfViewer");

areaSettings

AreaSettingsModel

Defines the settings of area annotation.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, AnnotationResizerLocation, CursorType} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the area annotation settings.
    viewer.areaSettings = { 
        opacity: 1, 
        fillColor: '#ffffff00', 
        strokeColor: '#ff0000', 
        author: 'XYZ', 
        thickness: 1, 
        minHeight: 10, 
        minWidth: 10, 
        maxWidth: 100, 
        maxHeight: 100, 
        isLock: false, 
        annotationSelectorSettings: { 
            selectionBorderColor: 'blue', 
            resizerBorderColor: 'white', 
            resizerFillColor: '#4070ff', 
            resizerSize: 8, 
            selectionBorderThickness: 1, 
            resizerShape: 'Circle', 
            selectorLineDashArray: [5, 6], 
            resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges, 
            resizerCursorType: CursorType.grab 
        }, 
        allowedInteractions: ['Resize'], 
        isPrint: true 
    };
    viewer.appendTo("#pdfViewer");

arrowSettings

ArrowSettingsModel

Defines the settings of arrow annotation.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, AnnotationResizerLocation, CursorType} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the arrow annotation settings.
    viewer.arrowSettings = { 
        opacity: 1, 
        fillColor: '#9c2592', 
        strokeColor: '#ff0000', 
        author: 'XYZ', 
        thickness: 1, 
        borderDashArray: 1, 
        lineHeadStartStyle: 'Closed', 
        lineHeadEndStyle: 'Closed', 
        annotationSelectorSettings: {
             selectionBorderColor: 'blue', 
             resizerBorderColor: 'black', 
             resizerFillColor: '#FF4081', 
             resizerSize: 8, 
             selectionBorderThickness: 1, 
             resizerShape: 'Square', 
             selectorLineDashArray: [5, 6], 
             resizerLocation: 
             AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges, 
             resizerCursorType: CursorType.grab 
        }, 
        minHeight: 10, 
        minWidth: 10, 
        maxWidth:100, 
        maxHeight: 0, 
        isLock: false, 
        allowedInteractions: ['Resize'], 
        isPrint: true 
    };
    viewer.appendTo("#pdfViewer");

checkBoxFieldSettings

CheckBoxFieldSettingsModel

Get or set the check box field settings.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.appendTo("#pdfViewer");
    // Change the check box field settings.
    viewer.checkBoxFieldSettings = { 
        name: 'Check 1', 
        isChecked: true, 
        backgroundColor: 'white', 
        isReadOnly: false, 
        visibility: 'visible', 
        isPrint: true, 
        tooltip: 'Check 1', 
        isRequired: false, 
        thickness: 5, 
        borderColor: 'black' 
    };

circleSettings

CircleSettingsModel

Defines the settings of circle annotation.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, AnnotationResizerLocation, CursorType} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the circle annotation settings.
    viewer.circleSettings = { 
        opacity: 1, 
        fillColor: '#9c2592', 
        strokeColor: '#ff0000', 
        author: 'XYZ', 
        thickness: 1, 
        annotationSelectorSettings: { 
            selectionBorderColor: 'blue',
            resizerBorderColor: 'black', 
            resizerFillColor: '#FF4081', 
            resizerSize: 8, 
            selectionBorderThickness: 1, 
            resizerShape: 'Square', 
            selectorLineDashArray: [5, 6], 
            resizerLocation: 
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges, 
            resizerCursorType: CursorType.grab 
        }, 
        minHeight: 10, 
        minWidth: 10, 
        maxWidth: 100, 
        maxHeight: 100, 
        isLock: false, 
        allowedInteractions: ['Resize'], 
        isPrint: true 
    };
    viewer.appendTo("#pdfViewer");

commandManager

CommandManagerModel

Defines a set of custom commands and binds them with a set of desired key gestures.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner,PdfKeys, ModifierKeys} from "../src/index";

PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

let viewer: PdfViewer = new PdfViewer();
viewer.commandManager = {
    keyboardCommand: [{
        name: 'customCopy',
        gesture: {
            pdfKeys: PdfKeys.G,
            modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt
        }
    },
    {
        name: 'customPaste',
        gesture: {
            pdfKeys: PdfKeys.H,
            modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt
        }
    }]
};
viewer.appendTo("#pdfViewer");
viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null);
	
viewer.keyboardCustomCommands= function (args) {
	  }

Defaults to {}

contextMenuOption

ContextMenuAction

Specifies the state of the ContextMenu in the PDF document.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the settings of the context menu option.
    viewer.contextMenuOption = "None";
    viewer.appendTo("#pdfViewer");

Defaults to RightClick

contextMenuSettings

ContextMenuSettingsModel

Defines the context menu settings.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner, ContextMenuItem} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the context menu settings.
    viewer.contextMenuSettings = { 
        contextMenuAction: 'RightClick', 
        contextMenuItems: [
            ContextMenuItem.Comment, 
            ContextMenuItem.Copy, 
            ContextMenuItem.Cut, 
            ContextMenuItem.Delete, 
            ContextMenuItem.Highlight, 
            ContextMenuItem.Paste, 
            ContextMenuItem.Properties, 
            ContextMenuItem.ScaleRatio, 
            ContextMenuItem.Strikethrough, 
            ContextMenuItem.Underline
            ] 
    };
    viewer.appendTo("#pdfViewer");

currentPageNumber

number

Returns the current page number of the document displayed in the PdfViewer control.

<body style="margin:0px">
    <button id = 'currentPageNumber'>Show Page Count</button>
    <div style="height: 100%;width: 100%">
        <div id="pdfViewer" style="height: 100%;width: 100%;"></div>
    </div>
</body>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
    viewer.appendTo('#pdfViewer');
    viewer.load('FormDesigner.pdf', null);

    document.getElementById('currentPageNumber').addEventListener('click', logPageNumber);
    function logPageNumber() {
        // Logs the current page number.
        console.log("Current page number is - " + viewer.currentPageNumber);
    }

Defaults to 0

customStamp

CustomStampModel[]

Defines the stamp items of the PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Add your custom stamp image source as base64 image.
    viewer.customStamp = [
        { 
            customStampName: 'Sample', 
            customStampImageSource: "data:image/png;base64, Syncfusionpdfviewer"
        }
    ]; 
    viewer.appendTo("#pdfViewer");

customStampSettings

CustomStampSettingsModel

Defines the settings of customStamp annotation.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the custom stamp settings.
    viewer.customStampSettings = { 
        opacity: 1, 
        author: 'XYZ', 
        width: 100, 
        height: 100, 
        left: 200, 
        top: 200, 
        minHeight: 10, 
        minWidth: 10, 
        maxWidth: 100, 
        maxHeight: 100, 
        isLock: false, 
        enableCustomStamp: true, 
        allowedInteractions: ['None'],
        isPrint: true 
    };
    viewer.appendTo("#pdfViewer");

dateTimeFormat

string

Customize desired date and time format

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the date time format.
    viewer.dateTimeFormat = "yyyy-MM-dd HH:mm:ss";
    viewer.appendTo("#pdfViewer");

designerMode

boolean

Enable or disable the interaction of form fields in the PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.designerMode = true;
    viewer.appendTo("#pdfViewer");

Defaults to false

disableContextMenuItems

ContextMenuItem[]

Disables the menu items in the context menu.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner,ContextMenuItem} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Show or hide the context menu items.
    viewer.disableContextMenuItems = [
        ContextMenuItem.Copy,
        ContextMenuItem.Paste
    ];
    viewer.appendTo("#pdfViewer");

Defaults to []

distanceSettings

DistanceSettingsModel

Defines the settings of distance annotation.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, CursorType, AnnotationResizerLocation} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the distance annotation settings.
    viewer.distanceSettings = { 
        opacity: 1, 
        fillColor: '#ffffff00', 
        strokeColor: '#ff0000', 
        author: 'Guest', 
        thickness: 1, 
        borderDashArray: 1, 
        lineHeadStartStyle: 'Closed', 
        lineHeadEndStyle: 'Closed', 
        annotationSelectorSettings: { 
            selectionBorderColor: 'blue', 
            resizerBorderColor: 'black', 
            resizerFillColor: '#FF4081', 
            resizerSize: 8, 
            selectionBorderThickness: 1, 
            resizerShape: 'Square', 
            selectorLineDashArray: [5, 6], 
            resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges, 
            resizerCursorType: CursorType.grab 
        }, 
        minHeight: 10, 
        minWidth: 10, 
        maxWidth: 100, 
        maxHeight: 100, 
        isLock: false, 
        leaderLength: 40, 
        resizeCursorType: CursorType.move, 
        allowedInteractions: ['Resize'], 
        isPrint: true 
    };
    viewer.appendTo("#pdfViewer");

documentPath

string

Sets the PDF document path for initial loading.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.appendTo("#pdfViewer");

downloadFileName

string

Gets or sets the download file name in the PdfViewer control.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.downloadFileName = 'Document_Downloaded';
    viewer.appendTo("#pdfViewer");

enableAccessibilityTags

boolean

Determines whether accessibility tags are enabled or disabled. Accessibility tags can help make web content more accessible to users with disabilities.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner,AccessibilityTags} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner,AccessibilityTags);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.enableAccessibilityTags = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableAnnotation

boolean

Enable or disable the annotation in the PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable the Add or Edit Annotations tool in the toolbar.
    viewer.enableAnnotation = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableAnnotationToolbar

boolean

Opens the annotation toolbar when the PDF document is loaded in the PDF Viewer control initially.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Show or hide the annotation toolbar.
    viewer.enableAnnotationToolbar = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableAutoComplete

boolean

Enable or disables the auto complete option in form documents.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.enableAutoComplete = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableBookmark

boolean

Enables or disables the bookmark view in the PDF viewer

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Show or hide the bookmark tool.
    viewer.enableBookmark = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableBookmarkStyles

boolean

Enables or disables the bookmark styles in the PDF viewer

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable bookmark styles.
    viewer.enableBookmarkStyles = false;
    viewer.appendTo("#pdfViewer");

Defaults to false

enableCommentPanel

boolean

Enable or disables the Comment Panel of PdfViewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable comment panel.
    viewer.enableCommentPanel = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableDesktopMode

boolean

Gets or sets a boolean value to show or hide desktop toolbar in mobile devices.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable desktop mode.
    viewer.enableDesktopMode = true;
    viewer.appendTo("#pdfViewer");

Defaults to false

enableDownload

boolean

Enable or disables the download option of PdfViewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable download.
    viewer.enableDownload = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableFormDesigner

boolean

Show or hide the form designer tool in the main toolbar of the PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable form designer.
    viewer.enableFormDesigner = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableFormDesignerToolbar

boolean

Opens the form designer toolbar when the PDF document is loaded in the PDF Viewer control initially.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable form designer tool bar.
    viewer.enableFormDesignerToolbar = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableFormFields

boolean

Enable or disable the form fields in the PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable form fields.
    viewer.enableFormFields = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableFormFieldsValidation

boolean

Enable or disable the form fields validation.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable form fields validation.
    viewer.enableFormFieldsValidation = true;
    viewer.appendTo("#pdfViewer");

Defaults to false

enableFreeText

boolean

Enable or disable the free text annotation in the PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable free text.
    viewer.enableFreeText = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableHandwrittenSignature

boolean

Enables or disables the handwritten signature in PDF document.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable hand written signature.
    viewer.enableHandwrittenSignature = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

Enables or disables the hyperlinks in PDF document.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable hyper link.
    viewer.enableHyperlink = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableImportAnnotationMeasurement

boolean

Enable or disable the customization of measure values in PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable import annotation measurement.
    viewer.enableImportAnnotationMeasurement = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableInkAnnotation

boolean

If it is set as false, then the ink annotation support in the PDF Viewer will be disabled. By default it is true.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable ink annotation.
    viewer.enableInkAnnotation = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableMagnification

boolean

Enable or disable the Magnification module of PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable magnification.
    viewer.enableMagnification = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableMeasureAnnotation

boolean

Enable or disable the calibrate annotation in the PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable measure annotation.
    viewer.enableMeasureAnnotation = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableMultiLineOverlap

boolean

Enable or disable the multi line text markup annotations in overlapping collections.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"; 
    // Enable or disable multi line text markup annotations in overlapping collections.
    viewer.enableMultiLineOverlap = true;
    viewer.appendTo("#pdfViewer");
    viewer.load('FormDesigner.pdf', null);

Defaults to false

enableMultiPageAnnotation

boolean

Enables or disables the multi-page text markup annotation selection in UI.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"; 
    // Enable or disable multi-page text markup annotation selection.
    viewer.enableMultiPageAnnotation = true;
    viewer.appendTo("#pdfViewer");
    viewer.load('FormDesigner.pdf', null);

Defaults to false

enableNavigation

boolean

Enable or disable the Navigation module of PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable navigation.
    viewer.enableNavigation = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableNavigationToolbar

boolean

Enable or disables the Navigation toolbar of PdfViewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable navigation tool bar.
    viewer.enableNavigationToolbar = true;
    viewer.appendTo("#pdfViewer");

Defaults to true

enablePageOrganizer

boolean

Enable or disable the page organizer in the PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, PageOrganizer} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, PageOrganizer);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.enablePageOrganizer = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enablePinchZoom

boolean

Enable or disable the pinch zoom option in the PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable pinch zoom.
    viewer.enablePinchZoom = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enablePrint

boolean

Enable or disables the print option of PdfViewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable print.
    viewer.enablePrint = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enablePrintRotation

boolean

If it is set as FALSE, will suppress the page rotation of Landscape document on print action. By default it is TRUE.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.enablePrintRotation = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enableShapeAnnotation

boolean

Enable or disable the shape annotation in the PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable sahpe annotation.
    viewer.enableShapeAnnotation = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableShapeLabel

boolean

Enable or disable the Label for shapeAnnotations of PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable shape label for shape annotations.
    viewer.enableShapeLabel = true;
    viewer.appendTo("#pdfViewer");

Defaults to false

enableStampAnnotations

boolean

Enables and disable the stamp annotations when the PDF viewer control is loaded initially.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable stamp annotations.
    viewer.enableStampAnnotations = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableStickyNotesAnnotation

boolean

Enables and disable the stickyNotes annotations when the PDF viewer control is loaded initially.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable sticky notes annotation.
    viewer.enableStickyNotesAnnotation = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableTextMarkupAnnotation

boolean

Enable or disable the text markup annotation in the PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable text markup annotation.
    viewer.enableTextMarkupAnnotation = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableTextMarkupResizer

boolean

Enable or disable the text markup resizer to modify the bounds in UI.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"; 
    // Enable or disable text mark up resizer.
    viewer.enableTextMarkupResizer = true;
    viewer.appendTo("#pdfViewer");
    viewer.load('FormDesigner.pdf', null);

Defaults to false

enableTextSearch

boolean

Enable or disable the text search in the PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable text search.
    viewer.enableTextSearch = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableTextSelection

boolean

Enable or disable the text selection in the PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable text selection.
    viewer.enableTextSelection = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableThumbnail

boolean

Enables or disables the thumbnail view in the PDF viewer

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable thumb nail.
    viewer.enableThumbnail = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableToolbar

boolean

Enable or disables the toolbar of PdfViewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable tool bar.
    viewer.enableToolbar = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

enableZoomOptimization

boolean

Enable or disable the zoom optimization mode in PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable zoom optimization.
    viewer.enableZoomOptimization = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

exportAnnotationFileName

string

Gets or sets the export annotations JSON file name in the PdfViewer control.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the export annotation file name.
    viewer.exportAnnotationFileName = 'Annotation export file_1';
    viewer.appendTo("#pdfViewer");

fileName

string

Gets or sets the document name loaded in the PdfViewer control.

<body style="margin:0px">
    <button id = 'fileName'>Print file name</button>
    <div style="height: 100%;width: 100%">
        <div id="pdfViewer" style="height: 100%;width: 100%;"></div>
    </div>
</body>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
    viewer.appendTo('#pdfViewer');
    viewer.load('FormDesigner.pdf', null);

    document.getElementById('fileName').addEventListener('click', logFileName);
    function logFileName() {
        // Logs the loaded PDF file name.
        console.log("File name - " + viewer.fileName);
    }

formFieldCollections

FormFieldModel[]

Gets the form fields present in the loaded PDF document. It used to get the form fields id, name, type and it’s values.

<body style="margin:0px">
    <button id = 'logForms'>Show Form Field Collection</button>
    <div style="height: 100%;width: 100%">
        <div id="pdfViewer" style="height: 100%;width: 100%;"></div>
    </div>
</body>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
    viewer.appendTo('#pdfViewer');
    viewer.load('FormDesigner.pdf', null);

    document.getElementById('logForms').addEventListener('click', logFormFieldCollections);
    function logFormFieldCollections() {
        // Logs the form field collections.
        console.log(viewer.formFieldCollections);
    }

freeTextSettings

FreeTextSettingsModel

Defines the settings of free text annotation.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, FontStyle, AnnotationResizerLocation} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Changes the free text annotation settings.
    viewer.freeTextSettings = {
        opacity: 1,
        fillColor: "#ffffff00",
        borderColor: "#4070ff",
        author: "XYZ",
        borderWidth: 1,
        width: 151,
        fontSize: 16,
        height: 24.6,
        fontColor: "#000",
        fontFamily: "Helvetica",
        defaultText: "Type Here",
        textAlignment: "Right",
        fontStyle: FontStyle.Italic,
        allowTextOnly: false,
        annotationSelectorSettings: {
            selectionBorderColor: "blue",
            resizerBorderColor: "black",
            resizerFillColor: "#FF4081",
            resizerSize: 8,
            selectionBorderThickness: 1,
            resizerShape: "Circle",
            selectorLineDashArray: [],
            resizerLocation:
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
            resizerCursorType: null
        },
        minHeight: 10,
        minWidth: 10,
        maxWidth: 100,
        maxHeight: 100,
        isLock: false,
        allowedInteractions: ["None"],
        isPrint: true,
        isReadonly: false,
        enableAutoFit: false
    };
    viewer.appendTo("#pdfViewer");

handWrittenSignatureSettings

HandWrittenSignatureSettingsModel

Defines the settings of handWrittenSignature.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, DisplayMode, AnnotationResizerLocation, CursorType} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Changes the hand written signature settings.
    viewer.handWrittenSignatureSettings = {
            signatureItem: ["Signature", "Initial"],
            saveSignatureLimit: 1,
            saveInitialLimit: 1,
            opacity: 1,
            strokeColor: "#000000",
            width: 150,
            height: 100,
            thickness: 1,
            annotationSelectorSettings: {
                selectionBorderColor: "blue",
                resizerBorderColor: "black",
                resizerFillColor: "#FF4081",
                resizerSize: 8,
                selectionBorderThickness: 1,
                resizerShape: "Circle",
                selectorLineDashArray: [5, 6],
                resizerLocation:
                AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
                resizerCursorType: CursorType.grab
            },
            allowedInteractions: ["Resize"],
            signatureDialogSettings: {
                displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
                hideSaveSignature: false
            },
            initialDialogSettings: {
                displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
                hideSaveSignature: false
            }
        };
    viewer.appendTo("#pdfViewer");

height

string | number

Defines the scrollable height of the PdfViewer control.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the height of the PDF viewer.
    viewer.height = 500;
    viewer.appendTo("#pdfViewer");

Defaults to ‘auto’

hideSaveSignature

boolean

Gets or sets a boolean value to show or hide the save signature check box option in the signature dialog. FALSE by default

Defaults to false

highlightSettings

HighlightSettingsModel

Defines the settings of highlight annotation.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, AnnotationResizerLocation} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Changes the highlight annotation settings.
    viewer.highlightSettings = {
        opacity: 1,
        color: "#DAFF56",
        author: "XYZ",
        annotationSelectorSettings: {
            selectionBorderColor: "blue",
            resizerBorderColor: "black",
            resizerFillColor: "#FF4081",
            resizerSize: 8,
            selectionBorderThickness: 1,
            resizerShape: "Square",
            selectorLineDashArray: [5, 6],
            resizerLocation:
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges
        },
        isLock: false,
        enableMultiPageAnnotation: false,
        enableTextMarkupResizer: false,
        allowedInteractions: ["Resize"],
        isPrint: true
        };
    viewer.appendTo("#pdfViewer");

hyperlinkOpenState

LinkTarget

Specifies the open state of the hyperlink in the PDF document.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.hyperlinkOpenState = 'NewTab';
    viewer.appendTo("#pdfViewer");

Defaults to CurrentTab

initialDialogSettings

SignatureDialogSettingsModel

Get or set the signature dialog settings for initial field.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, DisplayMode} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Changes the initial dialog settings.
    viewer.initialDialogSettings = { 
        displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
        hideSaveSignature: true
    };
    viewer.appendTo("#pdfViewer");

initialFieldSettings

InitialFieldSettingsModel

Get or set the initial field settings.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, DisplayMode} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.appendTo("#pdfViewer");
    // Changes the initial field settings.
    viewer.initialFieldSettings = {
        name: "Initial",
        isReadOnly: true,
        visibility: "visible",
        isRequired: true,
        isPrint: true,
        tooltip: "Intial",
        thickness: 1,
        initialIndicatorSettings: {
            opacity: 1,
            backgroundColor: "orange",
            width: 19,
            height: 10,
            fontSize: 10,
            text: null,
            color: "black"
        },
        initialDialogSettings: {
            displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
            hideSaveSignature: false
        }
    };

initialRenderPages

number

Initially renders the first N pages of the PDF document when the document is loaded.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner,AccessibilityTags} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner,AccessibilityTags);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Specifies the maximum number of pages that should be rendered on the document loading.
    viewer.initialRenderPages = 4;
    viewer.appendTo("#pdfViewer");

Defaults to 2

inkAnnotationSettings

InkAnnotationSettingsModel

Defines the ink annotation settings for PDF Viewer.It used to customize the strokeColor, thickness, opacity of the ink annotation.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner, AnnotationResizerLocation, CursorType} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Changes the ink annotation settings.
    viewer.inkAnnotationSettings = {
        author: "XYZ",
        opacity: 1,
        strokeColor: "#ff0000",
        thickness: 1,
        annotationSelectorSettings: {
            selectionBorderColor: "blue",
            resizerBorderColor: "black",
            resizerFillColor: "#FF4081",
            resizerSize: 8,
            selectionBorderThickness: 1,
            resizerShape: "Circle",
            selectorLineDashArray: [5, 6],
            resizerLocation:
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
            resizerCursorType: CursorType.grab
        },
        isLock: false,
        allowedInteractions: ["Resize"],
        isPrint: true
    };
    viewer.appendTo("#pdfViewer");

interactionMode

InteractionMode

Sets the interaction mode of the PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the interaction mode.
    viewer.interactionMode = "Pan";
    viewer.appendTo("#pdfViewer");

Defaults to TextSelection

isAnnotationToolbarOpen

boolean

Opens the annotation toolbar when the PDF document is loaded in the PDF Viewer control initially.

Defaults to false

isAnnotationToolbarVisible

boolean

Opens the annotation toolbar when the PDF document is loaded in the PDF Viewer control initially and get the annotation Toolbar Visible status.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"; 
    // Show or hide the annotation tool bar.
    viewer.isAnnotationToolbarVisible = true;
    viewer.appendTo("#pdfViewer");
    viewer.load('FormDesigner.pdf', null);

Defaults to false

isBookmarkPanelOpen

boolean

Gets or sets a boolean value to show or hide the bookmark panel while loading a document.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Show or hide the bookmark panel.
    viewer.isBookmarkPanelOpen = true;
    viewer.appendTo("#pdfViewer");

Defaults to false

isCommandPanelOpen

boolean

If it set as true, then the command panel show at initial document loading in the PDF viewer

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Show or hide the command panel.
    viewer.isCommandPanelOpen = true;
    viewer.appendTo("#pdfViewer");

Defaults to false

isDocumentEdited

boolean

Checks whether the PDF document is edited.

<body style="margin:0px">
    <button id = 'isDocumentEdited'>Show Document edit status</button>
    <div style="height: 100%;width: 100%">
        <div id="pdfViewer" style="height: 100%;width: 100%;"></div>
    </div>
</body>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
    viewer.appendTo('#pdfViewer');
    viewer.load('FormDesigner.pdf', null);

    document.getElementById('isDocumentEdited').addEventListener('click', logDocumentEdit);
    function logDocumentEdit() {
        // Logs whether the PDF document is edited.
        console.log("Is the document edited - " + viewer.isDocumentEdited );
    }

isExtractText

boolean

Enable or disable the text extract from the PDF viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.isExtractText = true;
    viewer.appendTo("#pdfViewer");

Defaults to false

isFormDesignerToolbarVisible

boolean

Opens the annotation toolbar when the PDF document is loaded in the PDF Viewer control initially and get the annotation Toolbar Visible status.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"; 
    // Show or hide form designer toolbar.
    viewer.isFormDesignerToolbarVisible = true;
    viewer.appendTo("#pdfViewer");
    viewer.load('FormDesigner.pdf', null);

Defaults to false

isFormFieldDocument

boolean

Enable if the PDF document contains form fields.

<body style="margin:0px">
    <button id = 'isFormFieldDocument'>Show whether form fields present in the document</button>
    <div style="height: 100%;width: 100%">
        <div id="pdfViewer" style="height: 100%;width: 100%;"></div>
    </div>
</body>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
    viewer.appendTo('#pdfViewer');
    viewer.load('FormDesigner.pdf', null);

    document.getElementById('isFormFieldDocument').addEventListener('click', logisFormFieldDocument);
    function logisFormFieldDocument() {
        // Logs the presence of form fields in a document.
        console.log("Is form fields exist in the document - " + viewer.isFormFieldDocument);
    }

Defaults to false

isMaintainSelection

boolean

Maintain the selection of text markup annotation.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.isMaintainSelection = true;
    viewer.appendTo("#pdfViewer");

Defaults to false

isPageOrganizerOpen

boolean

Specifies whether the page organizer dialog will be displayed upon the initial document loading in the PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, PageOrganizer} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, PageOrganizer);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable navigation.
    viewer.isPageOrganizerOpen = true;
    viewer.appendTo("#pdfViewer");

Defaults to false

isSignatureEditable

boolean

Enables or disable saving Hand Written signature as editable in the PDF.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Enable or disable saving the hand written signature.
    viewer.isSignatureEditable = true;
    viewer.appendTo("#pdfViewer");

Defaults to false

isThumbnailViewOpen

boolean

If it set as true, then the thumbnail view show at initial document loading in the PDF Viewer

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Show or hide the thumbnail view.
    viewer.isThumbnailViewOpen = true;
    viewer.appendTo("#pdfViewer");

Defaults to false

isValidFreeText

boolean

Checks if the freeText value is valid or not.

<body style="margin:0px">
    <button id = 'isValidFreeText'>Show is free text is valid or not</button>
    <div style="height: 100%;width: 100%">
        <div id="pdfViewer" style="height: 100%;width: 100%;"></div>
    </div>
</body>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
    viewer.appendTo('#pdfViewer');
    viewer.load('FormDesigner.pdf', null);

    document.getElementById('isValidFreeText').addEventListener('click', logisValidFreeText);
    function logisValidFreeText() {
        // Logs the freeText value is valid or not. 
        console.log("Is valid FreeText - " + viewer.isValidFreeText);
    }

Defaults to false

lineSettings

LineSettingsModel

Defines the settings of line annotation.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, AnnotationResizerLocation} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the line annotation settings.
    viewer.lineSettings = {
        opacity: 1,
        color: "#9c2592",
        fillColor: '#ffffff00',
        strokeColor: '#ff0000',
        author: "XYZ",
        thickness: 1,
        borderDashArray: 1, 
        lineHeadStartStyle: 'None', 
        lineHeadEndStyle: 'None',
        annotationSelectorSettings: {
            selectionBorderColor: "blue",
            resizerBorderColor: "black",
            resizerFillColor: "#FF4081",
            resizerSize: 8,
            selectionBorderThickness: 1,
            resizerShape: "Square",
            selectorLineDashArray: [5, 6],
            resizerLocation:
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges, resizerCursorType: null
        },
        minHeight: 10, 
        minWidth: 10, 
        maxWidth: 100, 
        maxHeight: 100, 
        isLock: false, 
        allowedInteractions: ['Resize'], 
        isPrint: true 
    };
    viewer.appendTo("#pdfViewer");

listBoxFieldSettings

ListBoxFieldSettingsModel

Get or set the listbox field settings.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner, ItemModel, FontStyle} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Add options to the field.
    let customOptions : ItemModel[] = [{itemName:'item1',itemValue:'item1'}, {itemName:'item2',itemValue:'item2'}]
    // Change the list box field settings.
    viewer.listBoxFieldSettings = {
        name: "List 1",
        fontFamily: "Helvetica",
        fontSize: 5,
        fontStyle: FontStyle.Italic,
        color: "black",
        backgroundColor: "white",
        alignment: "Right",
        isReadOnly: false,
        visibility: "visible",
        isRequired: false,
        isPrint: false,
        tooltip: "List 1",
        options: customOptions,
        thickness: 1,
        borderColor: "black"
    };

    viewer.appendTo("#pdfViewer");

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to

measurementSettings

MeasurementSettingsModel

Defines the settings of measurement annotation.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the measurement annotation settings.
    viewer.measurementSettings = { 
        conversionUnit: 'cm', 
        displayUnit: 'cm', 
        scaleRatio: 1, 
        depth: 96 
    };
    viewer.appendTo("#pdfViewer");

pageCount

number

gets the page count of the document loaded in the PdfViewer control.

<body style="margin:0px">
    <button id = 'pageCount'>Log Page Count</button>
    <div style="height: 100%;width: 100%">
        <div id="pdfViewer" style="height: 100%;width: 100%;"></div>
    </div>
</body>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
    viewer.appendTo('#pdfViewer');
    viewer.load('FormDesigner.pdf', null);

    document.getElementById('pageCount').addEventListener('click', logPageCount);
    function logPageCount() {
        // Logs the total page count of the loaded document.
        console.log("Total page count is - " + viewer.pageCount);
    }

Defaults to 0

pageOrganizerSettings

PageOrganizerSettingsModel

This property allows for control over various page management functionalities within the PDF Viewer. By setting it to true, users will be able to delete, insert and rotate pages. Conversely, setting it to false will disable these actions.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, PageOrganizer} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, PageOrganizer);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the page organizer settings.
    viewer.pageOrganizerSettings = { 
        canInsert: true, 
        canRotate: false, 
        canDelete: true
    };
    viewer.appendTo("#pdfViewer");

passwordFieldSettings

PasswordFieldSettingsModel

Get or set the password field settings.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner, FontStyle} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.appendTo("#pdfViewer");
    // Change the password field settings.
    viewer.passwordFieldSettings = {
        name: "Enter Password",
        value: "ABCD",
        fontFamily: "Helvetica",
        fontSize: 10,
        fontStyle: FontStyle.Italic,
        color: "black",
        borderColor: "black",
        backgroundColor: "white",
        alignment: "Right",
        isReadOnly: false,
        visibility: "visible",
        maxLength: 0,
        isRequired: false,
        isPrint: true,
        tooltip: "Password",
        thickness: 1
    };

perimeterSettings

PerimeterSettingsModel

Defines the settings of perimeter annotation.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, AnnotationResizerLocation, CursorType} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the perimeter annotation settings.
    viewer.perimeterSettings = {
        opacity: 1,
        fillColor: "#ffffff00",
        strokeColor: "#ff0000",
        author: "XYZ",
        thickness: 1,
        borderDashArray: 1,
        lineHeadStartStyle: "Open",
        lineHeadEndStyle: "Open",
        minHeight: 10,
        minWidth: 10,
        maxWidth: 100,
        maxHeight: 100,
        isLock: false,
        annotationSelectorSettings: {
            selectionBorderColor: "blue",
            resizerBorderColor: "black",
            resizerFillColor: "#4070ff",
            resizerSize: 8,
            selectionBorderThickness: 1,
            resizerShape: "Circle",
            selectorLineDashArray: [5, 6],
            resizerLocation:
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
            resizerCursorType: CursorType.grab
        },
        allowedInteractions: ["Resize"],
        isPrint: true
    };
    viewer.appendTo("#pdfViewer");

polygonSettings

PolygonSettingsModel

Defines the settings of polygon annotation.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, AnnotationResizerLocation, CursorType} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the polygon annotation settings.
    viewer.polygonSettings = {
        opacity: 1,
        fillColor: "#ffffff00",
        strokeColor: "#ff0000",
        author: "XYZ",
        thickness: 1,
        annotationSelectorSettings: {
            selectionBorderColor: "blue",
            resizerBorderColor: "black",
            resizerFillColor: "#FF4081",
            resizerSize: 8,
            selectionBorderThickness: 1,
            resizerShape: "Square",
            selectorLineDashArray: [5, 6],
            resizerLocation:
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
            resizerCursorType: CursorType.grab
        },
        minHeight: 10,
        minWidth: 10,
        maxWidth: 100,
        maxHeight: 100,
        isLock: false,
        allowedInteractions: ["Resize"],
        isPrint: true
    };
    viewer.appendTo("#pdfViewer");

printMode

PrintMode

Specifies the print mode in the PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.printMode = "NewWindow";
    viewer.appendTo("#pdfViewer");

Defaults to Default

radioButtonFieldSettings

RadioButtonFieldSettingsModel

Get or set the radio button field settings.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the radio button field settings.
    viewer.radioButtonFieldSettings = {
        name: "Radio",
        isSelected: false,
        backgroundColor: "white",
        isReadOnly: false,
        visibility: "visible",
        isPrint: true,
        tooltip: "Radio",
        isRequired: false,
        thickness: 1,
        borderColor: "black"
    };
    viewer.appendTo("#pdfViewer");

radiusSettings

RadiusSettingsModel

Defines the settings of radius annotation.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, AnnotationResizerLocation, CursorType} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the radius annotation settings.
    viewer.radiusSettings = {
        opacity: 1,
        fillColor: "#ffffff00",
        strokeColor: "#ff0000",
        author: "XYZ",
        thickness: 1,
        annotationSelectorSettings: {
            selectionBorderColor: "blue",
            resizerBorderColor: "red",
            resizerFillColor: "#4070ff",
            resizerSize: 8,
            selectionBorderThickness: 1,
            resizerShape: "Circle",
            selectorLineDashArray: [5, 6],
            resizerLocation:
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
            resizerCursorType: CursorType.grab                                         
        },
        minHeight: 10,
        minWidth: 10,
        maxWidth: 100,
        maxHeight: 100,
        isLock: false,
        allowedInteractions: ["Resize"],
        isPrint: true
    };
    viewer.appendTo("#pdfViewer");

rectangleSettings

RectangleSettingsModel

Defines the settings of rectangle annotation.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, AnnotationResizerLocation, CursorType} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the rectangle annotation settings.
    viewer.rectangleSettings = {
        opacity: 1,
        fillColor: "#9c2592",
        strokeColor: "#ff0000",
        author: "XYZ",
        thickness: 1,
        annotationSelectorSettings: {
            selectionBorderColor: "blue",
            resizerBorderColor: "black",
            resizerFillColor: "#FF4081",
            resizerSize: 8,
            selectionBorderThickness: 1,
            resizerShape: "Square",
            selectorLineDashArray: [5, 6],
            resizerLocation:
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
            resizerCursorType: CursorType.grab
        },
        minHeight: 10,
        minWidth: 10,
        maxWidth: 100,
        maxHeight: 100,
        isLock: false,
        allowedInteractions: ["Resize"],
        isPrint: true
    };

    viewer.appendTo("#pdfViewer");

resourceUrl

string

Set the resource URL for assets or the public directory. The standalone PDF Viewer will load its custom resources from this URL.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.resourceUrl = "http://localhost:3000/src/pdfviewer/ej2-pdfviewer-lib";
    viewer.appendTo("#pdfViewer");
    viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null);

Defaults to

restrictZoomRequest

boolean

restrict zoom request.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.restrictZoomRequest = true;
    viewer.appendTo("#pdfViewer");

Defaults to false

retryCount

number

Specifies the retry count for the failed requests.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.retryCount = 3;
    viewer.appendTo("#pdfViewer");

Defaults to 1

retryStatusCodes

number[]

Specifies the response status codes for retrying a failed request with a “3xx”, “4xx”, or “5xx” response status code. The value can have multiple values, such as [500, 401, 400], and the default value is 500.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the retry status code as 405, 503, etc;
    viewer.retryStatusCodes = [500, 401, 400];
    viewer.appendTo("#pdfViewer");

Defaults to [500]

retryTimeout

number

Gets or sets the timeout for retries in seconds.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner,AccessibilityTags} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner,AccessibilityTags);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.retryCount = 5;
    viewer.retryTimeout = 10;
    viewer.appendTo("#pdfViewer");

Defaults to 0

scrollSettings

ScrollSettingsModel

Defines the scroll settings.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the scroll settings.
    viewer.scrollSettings = { 
        delayPageRequestTimeOnScroll: 150 
    };
    viewer.appendTo("#pdfViewer");

selectedItems

SelectorModel

Defines the collection of selected items, size and position of the selector

Defaults to {}

serverActionSettings

ServerActionSettingsModel

Defines the settings of the PDF Viewer service.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the server action settings.
    viewer.serverActionSettings = {
        load: "Load",
        renderPages: "RenderPdfPages",
        unload: "Unload",
        download: "Download",
        renderThumbnail: "RenderThumbnailImages",
        print: "PrintImages",
        renderComments: "RenderAnnotationComments",
        importAnnotations: "ImportAnnotations",
        exportAnnotations: "ExportAnnotations",
        importFormFields: "ImportFormFields",
        exportFormFields: "ExportFormFields",
        renderTexts: "RenderPdfTexts"
    };
    viewer.appendTo("#pdfViewer");

serviceUrl

string

Defines the service url of the PdfViewer control.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"; 
    viewer.appendTo("#pdfViewer");
    viewer.load('FormDesigner.pdf', null);

shapeLabelSettings

ShapeLabelSettingsModel

Defines the settings of shape label.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.enableShapeLabel = true;
    // Change the shape label settings.
    viewer.shapeLabelSettings = { 
        opacity: 1, 
        fillColor: '#9c2592', 
        borderColor: '#ff0000', 
        fontColor: '#000', 
        fontSize: 16, 
        labelHeight: 24.6, 
        labelMaxWidth: 151, 
        labelContent: 'XYZ' 
    };
    viewer.appendTo("#pdfViewer");

showDigitalSignatureAppearance

boolean

Show or hide the digital signature appearance in the document.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Show or hide the appearence of digital signature.
    viewer.showDigitalSignatureAppearance = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

showNotificationDialog

boolean

If it is set as false then error message box is not displayed in PDF viewer control.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.showNotificationDialog = false;
    viewer.appendTo("#pdfViewer");

Defaults to true

signatureCollection

any[]

Get the Loaded document signature Collections in the PdfViewer control.

<body style="margin:0px">
    <button id = 'logSign'>Show Signature Collection</button>
    <div style="height: 100%;width: 100%">
        <div id="pdfViewer" style="height: 100%;width: 100%;"></div>
    </div>
</body>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
    viewer.appendTo('#pdfViewer');
    viewer.load('HandwrittenSignature.pdf', null);

    document.getElementById('logSign').addEventListener('click', logSignatureCollection);
    function logSignatureCollection() {
        // Logs the signature collection of the loaded document.
        console.log(viewer.signatureCollection);
    }

signatureDialogSettings

SignatureDialogSettingsModel

Get or set the signature dialog settings for signature field.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, DisplayMode} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the signature dialog settings.
    viewer.signatureDialogSettings = { 
        displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload, hideSaveSignature: true
    };
    viewer.appendTo("#pdfViewer");

signatureFieldSettings

SignatureFieldSettingsModel

Get or set the signature field settings.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, DisplayMode} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.appendTo("#pdfViewer");
    // Change the signature field settings.
    viewer.signatureFieldSettings = {
        name: "Sign",
        isReadOnly: true,
        visibility: "visible",
        isRequired: true,
        isPrint: false,
        tooltip: "Sign",
        thickness: 1,
        signatureIndicatorSettings: {
            opacity: 1,
            backgroundColor: "orange",
            width: 19,
            height: 10,
            fontSize: 10,
            text: null,
            color: "black"  
        },
        signatureDialogSettings: {
            displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
            hideSaveSignature: false
        }
    };

signatureFitMode

SignatureFitMode

Specifies the signature mode in the PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the signature fit.
    viewer.signatureFitMode = "Stretch";
    viewer.appendTo("#pdfViewer");

Defaults to Default

stampSettings

StampSettingsModel

Defines the settings of stamp annotation.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, AnnotationResizerLocation, DynamicStampItem, SignStampItem, StandardBusinessStampItem, CursorType} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the stamp annotation settings.
    viewer.stampSettings = {
        opacity: 1,
        author: "XYZ",
        annotationSelectorSettings: {
            selectionBorderColor: "blue",
            resizerBorderColor: "red",
            resizerFillColor: "#FF4081",
            resizerSize: 8,
            selectionBorderThickness: 5,
            resizerShape: "Circle",
            selectorLineDashArray: [5, 6],
            resizerLocation:
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
            resizerCursorType: CursorType.grab
        },
        minHeight: 10,
        minWidth: 10,
        maxWidth: 100,
        maxHeight: 100,
        isLock: false,
        dynamicStamps: [
            DynamicStampItem.Revised,
            DynamicStampItem.Reviewed,
            DynamicStampItem.Received,
            DynamicStampItem.Confidential,
            DynamicStampItem.Approved,
            DynamicStampItem.NotApproved
        ],
        signStamps: [
            SignStampItem.Witness,
            SignStampItem.InitialHere,
            SignStampItem.SignHere,
            SignStampItem.Accepted,
            SignStampItem.Rejected
        ],
        standardBusinessStamps: [
            StandardBusinessStampItem.Approved,
            StandardBusinessStampItem.NotApproved,
            StandardBusinessStampItem.Draft,
            StandardBusinessStampItem.Final,
            StandardBusinessStampItem.Completed,
            StandardBusinessStampItem.Confidential,
            StandardBusinessStampItem.ForPublicRelease,
            StandardBusinessStampItem.NotForPublicRelease,
            StandardBusinessStampItem.ForComment,
            StandardBusinessStampItem.Void,
            StandardBusinessStampItem.PreliminaryResults,
            StandardBusinessStampItem.InformationOnly
        ],
        allowedInteractions: ["Resize"],
        isPrint: true
    };
    viewer.appendTo("#pdfViewer");

stickyNotesSettings

StickyNotesSettingsModel

Defines the settings of stickyNotes annotation.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, AnnotationResizerLocation, CursorType} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the sticky note annotation settings.
    viewer.stickyNotesSettings = {
        author: "XYZ",
        opacity: 1,
        annotationSelectorSettings: {
            selectionBorderColor: "blue",
            resizerBorderColor: "red",
            resizerFillColor: "#4070ff",
            resizerSize: 8,
            selectionBorderThickness: 1,
            resizerShape: "Circle",
            selectorLineDashArray: [5, 6],
            resizerLocation:
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
            resizerCursorType: CursorType.grab
        },
        isLock: false,
        allowedInteractions: ["Resize"],
        isPrint: true
    };
    viewer.appendTo("#pdfViewer");

strikethroughSettings

StrikethroughSettingsModel

Defines the settings of strikethrough annotation.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, AnnotationResizerLocation} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the strikethrough annotation settings.
    viewer.strikethroughSettings = {
        opacity: 1,
        color: "#DAFF56",
        author: "XYZ",
        annotationSelectorSettings: {
            selectionBorderColor: "blue",
            resizerBorderColor: "black",
            resizerFillColor: "#FF4081",
            resizerSize: 8,
            selectionBorderThickness: 1,
            resizerShape: "Square",
            selectorLineDashArray: [5, 6],
            resizerLocation:
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges
        },
        isLock: false,
        enableMultiPageAnnotation: false,
        enableTextMarkupResizer: false,
        allowedInteractions: ["Resize"],
        isPrint: true
    };
    viewer.appendTo("#pdfViewer");

textFieldSettings

TextFieldSettingsModel

Get or set the text field settings.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner, FontStyle} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.appendTo("#pdfViewer");
    // Change the text field settings.
    viewer.textFieldSettings = {
        name: "Enter name",
        value: "John",
        fontFamily: "Helvetica",
        fontSize: 10,
        fontStyle: FontStyle.Italic,
        color: "black",
        borderColor: "black",
        backgroundColor: "white",
        alignment: "Right",
        isReadOnly: false,
        visibility: "visible",
        maxLength: 0,
        isRequired: false,
        isPrint: true,
        tooltip: "Name",
        thickness: 1,
        isMultiline: false
    };

textSearchColorSettings

TextSearchColorSettingsModel

Sets the settings for the color of the text search highlight.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the text search color settings.
    viewer.textSearchColorSettings = { 
        searchHighlightColor: '#4070ff', 
        searchColor: '#FF4081' 
    };
    viewer.appendTo("#pdfViewer");

tileRenderingSettings

TileRenderingSettingsModel

Defines the tile rendering settings.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the tile rendering settings.
    viewer.tileRenderingSettings = {
        enableTileRendering: false, 
        x: 0, 
        y: 0
    };
    viewer.appendTo("#pdfViewer");

toolbarSettings

ToolbarSettingsModel

Defines the settings of the PDF Viewer toolbar.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the tool bar settings.
    viewer.toolbarSettings = {
        showTooltip: false,
        toolbarItems: [
            "OpenOption",
            "UndoRedoTool",
            "PageNavigationTool",
            "MagnificationTool",
            "PanTool",
            "SelectionTool",
            "CommentTool",
            "SubmitForm",
            "AnnotationEditTool",
            "FormDesignerEditTool",
            "FreeTextAnnotationOption",
            "InkAnnotationOption",
            "ShapeAnnotationOption",
            "StampAnnotation",
            "SignatureOption",
            "SearchOption",
            "PrintOption",
            "DownloadOption"
        ],
        annotationToolbarItems: [
            "HighlightTool",
            "UnderlineTool",
            "StrikethroughTool",
            "ColorEditTool",
            "OpacityEditTool",
            "AnnotationDeleteTool",
            "StampAnnotationTool",
            "HandWrittenSignatureTool",
            "InkAnnotationTool",
            "ShapeTool",
            "CalibrateTool",
            "StrokeColorEditTool",
            "ThicknessEditTool",
            "FreeTextAnnotationTool",
            "FontFamilyAnnotationTool",
            "FontSizeAnnotationTool",
            "FontStylesAnnotationTool",
            "FontAlignAnnotationTool",
            "FontColorAnnotationTool",
            "CommentPanelTool"
        ],
        formDesignerToolbarItems: [
            "TextboxTool",
            "PasswordTool",
            "CheckBoxTool",
            "RadioButtonTool",
            "DropdownTool",
            "ListboxTool",
            "DrawSignatureTool",
            "DeleteTool"
        ]
    };
    viewer.appendTo("#pdfViewer");

underlineSettings

UnderlineSettingsModel

Defines the settings of underline annotation.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, AnnotationResizerLocation} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the underline annotation settings.
    viewer.underlineSettings = {
        opacity: 1,
        color: "#9c2592",
        author: "XYZ",
        annotationSelectorSettings: {
            selectionBorderColor: "blue",
            resizerBorderColor: "black",
            resizerFillColor: "#FF4081",
            resizerSize: 8,
            selectionBorderThickness: 1,
            resizerShape: "Square",
            selectorLineDashArray: [5, 6],
            resizerLocation:
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges
        },
        isLock: false,
        enableMultiPageAnnotation: false,
        enableTextMarkupResizer: false,
        allowedInteractions: ["Resize"],
        isPrint: true
    };
    viewer.appendTo("#pdfViewer");

volumeSettings

VolumeSettingsModel

Defines the settings of volume annotation.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, AnnotationResizerLocation, CursorType} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the volume annotation settings.
    viewer.volumeSettings = {
        opacity: 1,
        fillColor: "#ffffff00",
        strokeColor: "#ff0000",
        author: "XYZ",
        thickness: 1,
        minHeight: 10,
        minWidth: 10,
        maxWidth: 100,
        maxHeight: 100,
        isLock: false,
        annotationSelectorSettings: {
            selectionBorderColor: "blue",
            resizerBorderColor: "black",
            resizerFillColor: "#4070ff",
            resizerSize: 8,
            selectionBorderThickness: 1,
            resizerShape: "Circle",
            selectorLineDashArray: [5, 6],
            resizerLocation:
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
            resizerCursorType: CursorType.grab
        },
        allowedInteractions: ["Resize"],
        isPrint: true
    };
    viewer.appendTo("#pdfViewer");

width

string | number

Defines the scrollable width of the PdfViewer control.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
    
    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the width.
    viewer.width = 300;
    viewer.appendTo("#pdfViewer");

Defaults to ‘auto’

zoomMode

ZoomMode

Specifies the rendering mode in the PDF Viewer.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    viewer.zoomMode = "FitToWidth";
    viewer.appendTo("#pdfViewer");

Defaults to Default

zoomValue

number

Sets the initial loading zoom value from 10 to 400 in the PDF Viewer Control.

<div id="pdfViewer" style="height: 100%;width: 100%;"></div>
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";

    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
    TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);

    let viewer: PdfViewer = new PdfViewer();
    viewer.serviceUrl = "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
    viewer.documentPath = "PDF_Succinctly.pdf";
    // Change the zoom value.
    viewer.zoomValue = 75;
    viewer.appendTo("#pdfViewer");

Defaults to 0

accessibilityTags AccessibilityTags

Gets the Accessibility Tags object of the pdf viewer.

annotation Annotation

Gets the annotation object of the pdf viewer.

bookmark BookmarkView

Gets the bookmark view object of the pdf viewer.

formDesigner FormDesigner

Gets the FormDesigner object of the pdf viewer.

magnification Magnification

Gets the magnification object of the pdf viewer.

Gets the navigation object of the pdf viewer.

pageOrganizer PageOrganizer

Gets the page organizer object of the PDF Viewer.

Gets the print object of the pdf viewer.

textSearch TextSearch

Gets the text search object of the pdf viewer.

textSelection TextSelection

Gets the TextSelection object of the pdf viewer.

thumbnailView ThumbnailView

Gets the thumbnail-view object of the pdf viewer.

toolbar Toolbar

Gets the toolbar object of the pdf viewer.

zoomPercentage number

Returns the current zoom percentage of the PdfViewer control.

Methods

addAnnotation

Perform to add annotations in the PDF Viewer

Returns void

addCustomMenu

Adds a custom menu item to the existing menu, with optional configurations.

Parameter Type Description
menuItems MenuItemModel[] The custom menu item to be added.
disableDefaultItems (optional) boolean Optional. When set to true, this parameter disables the inclusion of default items in the menu. Defaults to false, meaning default items will be included.
appendToEnd (optional) boolean Optional. When set to true, the custom menu item will be added at the bottom of the existing menu list. If false or not provided, the item will be added at the default position.

Returns void

addEventListener

Adds the handler to the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event
handler Function Specifies the call to run when the event occurs.

Returns void

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

clearFormFields

Clears data from the form fields. Parameter - Specifies the form field object.

Returns void

convertClientPointToPagePoint

Convert user coordinates to the PDF page coordinates.

Parameter Type Description
clientPoint Point The user should provide a x, y coordinates.
pageNumber number We need to pass pageNumber.

Returns Point

convertPagePointToClientPoint

Convert page coordinates to the user coordinates.

Parameter Type Description
pagePoint Point The user should provide a page x, y coordinates.
pageNumber number We need to pass pageNumber.

Returns Point

convertPagePointToScrollingPoint

Convert page coordinates to the scrolling coordinates.

Parameter Type Description
pagePoint Point The user should provide a page x, y coordinates.
pageNumber number We need to pass pageNumber.

Returns Point

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

deleteAnnotations

To delete the annotation Collections in the PDF Document.

Returns void

destroy

Destroys all managed resources used by this object.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

download

Downloads the PDF document being loaded in the ejPdfViewer control.

Returns void

exportAnnotation

Perform export annotations action in the PDF Viewer

Returns void

exportAnnotationsAsBase64String

Export annotations and returns a base64 string for both Json and XFDF formats

Returns Promise

exportAnnotationsAsObject

Perform export annotations action in the PDF Viewer

Parameter Type Description
annotationDataFormat AnnotationDataFormat Export the annotation based on the format.

Returns Promise

exportFormFields

Exports the form field data in the specified data format.

Returns void

exportFormFieldsAsObject

Returns an object which represents the form field data in the specified data format.

Returns Promise

focusFormField

Focus a form field in a document by its field name or the field object.

Returns void

getLocalData

Returns the persistence data for component

Returns any

getPageNumberFromClientPoint

Get page number from the user coordinates x and y.

Parameter Type Description
clientPoint Point The user will provide a x, y coordinates.

Returns number

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

importAnnotation

Perform imports annotations action in the PDF Viewer

Returns void

importFormFields

Imports the form fields data into the current PDF document.

Returns void

load

Loads the given PDF document in the PDF viewer control

Parameter Type Description
document string Specifies the document name for load
password string Specifies the Given document password

Returns void

redo

Perform redo action for the edited annotations

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event to remove
handler Function Specifies the function to remove

Returns void

resetFormFields

reset all form fields data

Returns void

retrieveFormFields

To retrieve the form fields in the PDF Document.

Returns FormFieldModel[]

saveAsBlob

Saves the PDF document being loaded in the PDF Viewer control as blob.

Returns Promise

setJsonData

To modify the Json Data in ajax request.

Returns void

showNotificationPopup

Specifies the message to be displayed in the popup.

Returns void

undo

Perform undo action for the edited annotations

Returns void

unload

Unloads the PDF document being displayed in the PDF viewer.

Returns void

updateFormFields

To update the form fields in the PDF Document.

Returns void

updateFormFieldsValue

Update the form field values from externally.

Returns void

updateViewerContainer

updates the PDF Viewer container width and height from externally.

Returns void

zoomToRect

Brings the given rectangular region to view and zooms in the document to fit the region in client area (view port).

Parameter Type Description
rectangle Rect Specifies the region in client coordinates that is to be brought to view.

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter Type Description
moduleList Function[] ?

Returns void

Events

addSignature

EmitType<AddSignatureEventArgs>

Triggers when a signature is added to a page of a PDF document.

ajaxRequestFailed

EmitType<AjaxRequestFailureEventArgs>

Triggers when the AJAX request is failed.

ajaxRequestInitiate

EmitType<AjaxRequestInitiateEventArgs>

Triggers before the data is sent to the server.

ajaxRequestSuccess

EmitType<AjaxRequestSuccessEventArgs>

Triggers on successful AJAX request.

annotationAdd

EmitType<AnnotationAddEventArgs>

Triggers when an annotation is added to a PDF document’s page.

annotationDoubleClick

EmitType<AnnotationDoubleClickEventArgs>

Triggers when the annotation is double clicked.

annotationMouseLeave

EmitType<AnnotationMouseLeaveEventArgs>

Triggers when the user mouse moves away from the annotation object.

annotationMouseover

EmitType<AnnotationMouseoverEventArgs>

Triggers when the mouse is moved over the annotation object.

annotationMove

EmitType<AnnotationMoveEventArgs>

Triggers when an annotation is moved over the page of the PDF document.

annotationMoving

EmitType<AnnotationMovingEventArgs>

Triggers while moving an annotation.

annotationPropertiesChange

EmitType<AnnotationPropertiesChangeEventArgs>

Triggers when the annotation’s property is modified on a PDF document page.

annotationRemove

EmitType<AnnotationRemoveEventArgs>

Triggers when an annotation is removed from a PDF document’s page.

annotationResize

EmitType<AnnotationResizeEventArgs>

Triggers when an annotation is resized over the page of a PDF document.

annotationSelect

EmitType<AnnotationSelectEventArgs>

Triggers when an annotation is selected over the page of the PDF document.

annotationUnSelect

EmitType<AnnotationUnSelectEventArgs>

Triggers when an annotation is unselected over the page of the PDF document.

beforeAddFreeText

EmitType<BeforeAddFreeTextEventArgs>

Triggers before adding a text in the freeText annotation.

bookmarkClick

EmitType<BookmarkClickEventArgs>

Triggers when the bookmark is clicked in the PDF Viewer’s bookmark panel.

buttonFieldClick

EmitType<ButtonFieldClickEventArgs>

Triggers when the button is clicked.

commentAdd

EmitType<CommentEventArgs>

Triggers when a comment for the annotation is added to the comment panel.

commentDelete

EmitType<CommentEventArgs>

Triggers when the comment for the annotation in the comment panel is deleted.

commentEdit

EmitType<CommentEventArgs>

Triggers when the comment for the annotation in the comment panel is edited.

commentSelect

EmitType<CommentEventArgs>

Triggers when the comment for the annotation in the comment panel is selected.

commentStatusChanged

EmitType<CommentEventArgs>

Triggers when the annotation’s comment for status is changed in the comment panel.

created

EmitType<void>

Triggers during the creation of the PDF viewer component.

customContextMenuBeforeOpen

EmitType<CustomContextMenuBeforeOpenEventArgs>

Fires before the custom context menu option is opened.

customContextMenuSelect

EmitType<CustomContextMenuSelectEventArgs>

Fires when a custom context menu option is selected.

documentLoad

EmitType<LoadEventArgs>

Triggers while loading document into PDF viewer.

documentLoadFailed

EmitType<LoadFailedEventArgs>

Triggers while document loading failed in PdfViewer.

documentUnload

EmitType<UnloadEventArgs>

Triggers while closing the document.

downloadEnd

EmitType<DownloadEndEventArgs>

Triggers when the download actions are completed.

downloadStart

EmitType<DownloadStartEventArgs>

Triggers when the download action is initiated.

exportFailed

EmitType<ExportFailureEventArgs>

Triggers when the annotations export in a PDF document fails.

exportStart

EmitType<ExportStartEventArgs>

Triggers when an exported annotation started in the PDF Viewer.

exportSuccess

EmitType<ExportSuccessEventArgs>

Triggers when the annotations in a PDF document are successfully exported.

extractTextCompleted

EmitType<ExtractTextCompletedEventArgs>

Triggers when an text extraction is completed in the PDF Viewer.

formFieldAdd

EmitType<FormFieldAddArgs>

Triggers when a form field is added.

formFieldClick

EmitType<FormFieldClickArgs>

Triggers when the form field is selected.

formFieldDoubleClick

EmitType<FormFieldDoubleClickArgs>

Triggers when the form field is double-clicked.

formFieldFocusOut

EmitType<FormFieldFocusOutEventArgs>

Triggers when focus out from the form fields.

formFieldMouseLeave

EmitType<FormFieldMouseLeaveArgs>

Triggers when the mouse cursor leaves the form field.

formFieldMouseover

EmitType<FormFieldMouseoverArgs>

Triggers when the mouse cursor is over a form field.

formFieldMove

EmitType<FormFieldMoveArgs>

Triggers when a form field is moved.

formFieldPropertiesChange

EmitType<FormFieldPropertiesChangeArgs>

Triggers when a property of form field is changed.

formFieldRemove

EmitType<FormFieldRemoveArgs>

Triggers when a form field is removed.

formFieldResize

EmitType<FormFieldResizeArgs>

Triggers when a form field is resized.

formFieldSelect

EmitType<FormFieldSelectArgs>

Triggers when a form field is selected.

formFieldUnselect

EmitType<FormFieldUnselectArgs>

Triggers when a form field is unselected.

hyperlinkClick

EmitType<HyperlinkClickEventArgs>

Triggers when a hyperlink in a PDF document is clicked.

hyperlinkMouseOver

EmitType<HyperlinkMouseOverArgs>

Triggers when hyperlink in a PDF document is hovered.

importFailed

EmitType<ImportFailureEventArgs>

Triggers when the annotations imports in a PDF document fails.

importStart

EmitType<ImportStartEventArgs>

Triggers when an imported annotation started to appear in the PDF document.

importSuccess

EmitType<ImportSuccessEventArgs>

Triggers when the annotations in a PDF document are successfully imported.

keyboardCustomCommands

EmitType<KeyboardCustomCommandsEventArgs>

Triggers when the customized keyboard command keys are pressed.

moveSignature

EmitType<MoveSignatureEventArgs>

Triggers when a signature is moved across the page of a PDF document.

pageChange

EmitType<PageChangeEventArgs>

Triggers when there is change in current page number.

pageClick

EmitType<PageClickEventArgs>

Triggers when the mouse click is performed over the page of the PDF document.

pageMouseover

EmitType<PageMouseoverEventArgs>

Triggers when moving the mouse over the page.

pageOrganizerSaveAs

EmitType<PageOrganizerSaveAsEventArgs>

Triggers when the page organizer save as triggered.

pageRenderComplete

EmitType<PageRenderCompleteEventArgs>

Triggers upon completion of page rendering.

pageRenderInitiate

EmitType<PageRenderInitiateEventArgs>

Triggers upon the initiation of page rendering.

printEnd

EmitType<PrintEndEventArgs>

Triggers when the print actions are completed.

printStart

EmitType<PrintStartEventArgs>

Triggers when the print action is initiated.

removeSignature

EmitType<RemoveSignatureEventArgs>

Triggers when the signature is removed from the page of a PDF document.

resizeSignature

EmitType<ResizeSignatureEventArgs>

Triggers when the signature is resized and placed on a page of a PDF document.

signaturePropertiesChange

EmitType<SignaturePropertiesChangeEventArgs>

Triggers when the property of the signature is changed in the page of the PDF document.

signatureSelect

EmitType<SignatureSelectEventArgs>

Triggers when signature is selected over the page of the PDF document.

textSearchComplete

EmitType<TextSearchCompleteEventArgs>

Triggers when the text search is completed.

textSearchHighlight

EmitType<TextSearchHighlightEventArgs>

Triggers when the text search text is highlighted.

textSearchStart

EmitType<TextSearchStartEventArgs>

Triggers when the text search is initiated.

textSelectionEnd

EmitType<TextSelectionEndEventArgs>

Triggers when the text selection is complete.

textSelectionStart

EmitType<TextSelectionStartEventArgs>

Triggers when the text selection is initiated.

thumbnailClick

EmitType<ThumbnailClickEventArgs>

Triggers when the thumbnail in the PDF Viewer’s thumbnail panel is clicked.

toolbarClick

EmitType<ClickEventArgs>

Triggers when custom toolbar item is clicked.

validateFormFields

EmitType<ValidateFormFieldsArgs>

Triggers when validation is failed.

zoomChange

EmitType<ZoomChangeEventArgs>

Triggers When the magnification value changes.

Contents
Contents