ejPdfViewer

PDF viewer JS is visualization component to view PDF documents. It is powered by HTML5/JavaScript and provides various control customizations.

Syntax

$(element).ejPdfViewer({serviceUrl: ‘../api/PdfViewer’});

Example

  • html
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
                $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer'});
    });
    </script>

    Requires

    • module:jquery.js
    • module:jquery.easing.min.js
    • module:ej.core.js
    • module:ej.data.js
    • module:ej.globalize.js
    • module:ej.draggable.js
    • module:ej.pdfviewer.js
    • module:ej.dropdownlist.js
    • module:ej.toolbar.js
    • module:ej.button.js
    • module:ej.waitingpopup.js
    • module:ej.scroller.js
    • module:ej.checkbox.js
    • module:ej.tooltip.js
    • module:ej.maskedit.js
    • module:ej.dialog.js
    • module:ej.tab.js
    • module:ej.colorpicker.js
    • module:ej.splitbutton.js
    • module:ej.menu.js
    • module:ej.slider.js

    Members

    locale string

    Specifies the locale information of the PDF viewer.

    Default Value: “en-US”

    Example:

  • html
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
                $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', locale:"fr-FR" });
            });
    </script>

    toolbarSettings object

    Specifies the toolbar settings.

    toolbarSettings.showToolTip boolean

    Shows or hides the tooltip of the toolbar items.

    Default Value: true

    Example:

  • html
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
                $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', toolbarSettings: { showTooltip: false } });
            });
    </script>

    toolbarSettings.toolbarItem enum

    Shows or hides the grouped items in the toolbar with the help of enum ej.PdfViewer.ToolbarItems

    Name Description
    MagnificationTools Shows only magnification tools in the toolbar.
    PageNavigationTools Shows only page navigation tools in the toolbar.
    PrintTools Shows only print tool in the toolbar.
    DownloadTool Shows only download tool in the toolbar.
    TextSearchTool Shows only text search tool in the toolbar.
    TextMarkupAnnotationTools Shows only text markup annotation tools in the toolbar.
    SignatureTool Shows only signature tool in the toolbar.
    SelectionTool Shows only selection tool in the toolbar.
    All Shows all the toolbar items.

    Default value: ej.PdfViewer.ToolbarItems.All

    Example:

    Below code snippet shows only the magnification tools in the toolbar.

  • html
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
               $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', toolbarSettings: { toolbarItem: ej.PdfViewer.ToolbarItems.MagnificationTools } });
            });
    </script>

    serverActionSettings object

    Specifies the name of the action method in the server.

    serverActionSettings.load string

    Specifies the name of the action method used for loading the PDF document.

    Default Value: Load

    serverActionSettings.fileUpload string

    Specifies the name of the action method used for uploading the PDF document to the PDF viewer control.

    Default Value: FileUpload

    serverActionSettings.print string

    Specifies the name of the action method used for printing the PDF document in the PDF viewer control.

    Default Value: Load

    serverActionSettings.download string

    Specifies the name of the action method used for downloading the PDF document from the PDF viewer control.

    Default Value: Download

    Example:

  • html
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
                $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', serverActionSettings: { load: "Load", fileUpload: "FileUpload", print: "Print", download: "Download" } });
            });
    </script>

    serviceUrl string

    Sets the PDF Web API service URL

    documentPath string

    Sets the PDF document path for initial loading.

    Example:

  • html
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
                $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', documentPath: "HTTP Succinctly.pdf" });
            });
    </script>

    enableTextMarkupAnnotations boolean

    Enables or disables the text markup annotations.

    Default Value: true

    Example:

  • html
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
                $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', enableTextMarkupAnnotations: true });
            });
    </script>

    enableHighlightAnnotation boolean

    Enables or disables the highlight annotation.

    Default Value: true

    Example:

  • html
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
                $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', enableHighlightAnnotation: true });
            });
    </script>

    enableUnderlineAnnotation boolean

    Enables or disables the underline annotation.

    Default Value: true

    Example:

  • html
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
                $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', enableUnderlineAnnotation: true });
            });
    </script>

    enableStrikethroughAnnotation boolean

    Enables or disables the strikethrough annotation.

    Default Value: true

    Example:

  • html
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
                $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', enableStrikethroughAnnotation: true });
            });
    </script>

    enableSignature boolean

    Enables or disables the adding of handwritten signature over the PDF document.

    Default Value: true

    Example:

  • html
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
                $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', enableSignature: true });
            });
    </script>

    strikethroughSettings object

    Gets/sets the settings of the strikethrough annotation.

    strikethroughSettings.color string

    Gets/sets the color of the strikethrough annotation.

    Default Value: “#ff0000”

    strikethroughSettings.author string

    Gets/sets the author of the strikethrough annotation.

    Default Value: “Guest”

    strikethroughSettings.opacity number

    Gets/sets the opacity of the strikethrough annotation.

    Default Value: 1

    strikethroughSettings.subject string

    Gets/sets the subject of the strikethrough annotation.

    Default Value: “Strikethrough”

    strikethroughSettings.modifiedDate string

    Gets/sets the modified Date of the strikethrough annotation.

    Default Value: null

    strikethroughSettings.isLocked boolean

    Gets/sets the locked property of the strikethrough annotation.

    Default Value: false

    Example:

  • html
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
                $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', strikethroughSettings: {
    				color: "#ff0000", author: "Guest", opacity: 0.5, subject: "strikethrough", modifiedDate: "2017-03-27 12:00:51", isLocked: true
    			} });
            });
    </script>

    underlineSettings object

    Gets/sets the settings of the underline annotation.

    underlineSettings.color string

    Gets/sets the color of the underline annotation.

    Default Value: “#00ff00”

    underlineSettings.author string

    Gets/sets the author of the underline annotation.

    Default Value: “Guest”

    underlineSettings.opacity number

    Gets/sets the opacity of the underline annotation.

    Default Value: 1

    underlineSettings.subject string

    Gets/sets the subject of the underline annotation.

    Default Value: “Underline”

    underlineSettings.modifiedDate string

    Gets/sets the modified Date of the underline annotation.

    Default Value: null

    underlineSettings.isLocked boolean

    Gets/sets the locked property of the underline annotation.

    Default Value: false

    Example:

  • html
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
                $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', underlineSettings: {
    				color: "#00ff00", author: "Guest", opacity: 0.5, subject: "underline", modifiedDate: "2017-03-27 12:00:51", isLocked: true
    			} });
            });
    </script>

    highlightSettings object

    Gets/sets the settings of the highlight annotation.

    highlightSettings.color string

    Gets/sets the color of the highlight annotation.

    Default Value: “#ffff00”

    highlightSettings.author string

    Gets/sets the author of the highlight annotation.

    Default Value: “Guest”

    highlightSettings.opacity number

    Gets/sets the opacity of the highlight annotation.

    Default Value: 1

    highlightSettings.subject string

    Gets/sets the subject of the highlight annotation.

    Default Value: “Highlight”

    highlightSettings.modifiedDate string

    Gets/sets the modified Date of the highlight annotation.

    Default Value: null

    highlightSettings.isLocked boolean

    Gets/sets the locked property of the highlight annotation.

    Default Value: false

    Example:

  • html
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
                $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', highlightSettings: {
    				color: "#ffff00", author: "Guest", opacity: 0.5, subject: "highlight", modifiedDate: "2017-03-27 12:00:51", isLocked: true
    			} });
            });
    </script>

    signatureSettings object

    Gets/sets the settings of the handwritten signature.

    signatureSettings.color string

    Gets/sets the color of the handwritten signature.

    Default Value: “#000000”

    signatureSettings.opacity number

    Gets/sets the opacity of the handwritten signature.

    Default Value: 1

    Example:

  • html
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
                $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', signatureSettings: {
    				color: "#000000", opacity: 1
    			} });
            });
    </script>

    textSelectionContextMenu object

    Enables/ disables the text selection context menu.

    textSelectionContextMenu.isEnable boolean

    Enables/ disables the text selection context menu.

    Default Value: true

    textSelectionContextMenu.isCopyEnable boolean

    Enables/disables the copy menu in the text selection context menu.

    Default Value: true

    textSelectionContextMenu.isSearchEnable boolean

    Enables/disables the search menu in the text selection context menu.

    Default Value: true

    textSelectionContextMenu.isHighlightEnable boolean

    Enables/disables the highlight annotation menu in the text selection context menu.

    Default Value: true

    textSelectionContextMenu.isStrikeoutEnable boolean

    Enables/disables the strikeout annotation menu in the text selection context menu.

    Default Value: true

    Example:

  • html
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
                $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', textSelectionContextMenu: {
    				isSearchEnable : false , isHighlightEnable: false
    			} });
            });
    </script>

    annotationContextMenu object

    Enables/disables the annotation context menu.

    annotationContextMenu.isEnable boolean

    Enables/disables the annotation context menu.

    Default Value: true

    annotationContextMenu.isPopupEnable boolean

    Enables/disables the popup menu in the annotation context menu.

    Default Value: true

    annotationContextMenu.isDeleteEnable boolean

    Enables/disables the delete menu in the annotation context menu.

    Default Value: true

    annotationContextMenu.isPropertiesEnable boolean

    Enables/disables the properties menu in the annotation context menu.

    Default Value: true

    Example:

  • html
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
                $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', annotationContextMenu: {
    				isPopupEnable  : false ,isDeleteEnable:false
    			} });
            });
    </script>

    annotationType enum

    Specifies the type of the annotations.

    Name Description
    Underline Specifies the underline annotation.
    Strikethrough Specifies the strikethrough annotation.
    Highlight Specifies the highlight annotation.

    pageCount number

    Gets the total number of pages in PDF document.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    var totalPages = pdfviewerObj.pageCount;

    currentPageNumber number

    Gets the number of the page being displayed in the PDF viewer.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    var currentPage = pdfviewerObj.currentPageNumber;

    zoomPercentage number

    Gets the current zoom percentage of the PDF document in viewer.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    var currentZoom = pdfviewerObj.zoomPercentage;

    pdfService enum

    Specifies the location of the supporting PDF service

    Name Description
    Local Denotes that the service is located in the local project
    Remote Denotes that the service is hosted in the remote server

    Default value: ej.PdfViewer.PdfService.Local

    Example:

    The below code snippet shows the service accessed from remote server.

  • javascript
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
               $("#viewer").ejPdfViewer({serviceUrl: 'http://mvc.syncfusion.com/PDFViewer/pdfviewer.asmx/PostViewerAction', pdfService : ej.PdfViewer.PdfService.Remote});
            });
    </script>

    interactionMode enum

    Specifies the viewer interaction mode.

    Name Description
    TextSelection To set the text selection mode to the PDF viewer control.
    Pan To set the panning mode to the PDF viewer control.

    Default value: ej.PdfViewer.InteractionMode.TextSelection

    Example:

    The below code snippet shows to set the Panning mode to the PDF viewer control.

  • javascript
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
               $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', interactionMode: ej.PdfViewer.InteractionMode.Pan});
            });
    </script>

    bufferingMode enum

    Gets or sets the buffering mode of the PDF viewer control when allowClientBuffering is set to true.

    Name Description
    Default Retrieves details to render first two pages in a request and rest of the pages in other request.
    Complete Retrieves complete details to render all the pages in a single request.

    Default value: ej.PdfViewer.BufferingMode.Default

    Example:

    The below code snippet shows to set the Buffering mode to the PDF viewer control.

  • javascript
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
               $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', allowClientBuffering: true, bufferingMode: ej.PdfViewer.BufferingMode.Complete});
            });
    </script>

    hyperlinkOpenState enum

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

    Name Description
    Default Opens the hyperlink in the same tab of the browser.
    NewTab Opens the hyperlink in a new tab of the browser.
    NewWindow Opens the hyperlink in a new window of the browser.

    Default value: ej.PdfViewer.LinkTarget.Default

    Example:

    The below code snippet shows the hyperlink opened in a new tab.

  • javascript
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
               $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', hyperlinkOpenState : ej.PdfViewer.LinkTarget.NewTab});
            });
    </script>

    Enables or disables the hyperlinks in PDF document.

    Default Value: true

    Example:
  • javascript
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
                $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', enableHyperlink: false });
            });
    </script>

    enableTextSelection boolean

    Enables or disables the text selection in PDF document.

    Default Value: true

    Example:
  • javascript
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
                $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', enableTextSelection: false });
            });
    </script>

    isResponsive boolean

    Enables or disables the responsiveness of the PDF viewer control during the window resize.

    Default Value: true

    Example

  • javascript
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
                $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', isResponsive: false });
            });
    </script>

    isDocumentEdited boolean

    Checks whether the PDF document is edited.

    Default Value: false

    Example

  • javascript
  • <div id="viewer"></div>
    <script type="text/javascript">
    var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    var isEdited = pdfviewerObj.isDocumentEdited;
    </script>

    allowClientBuffering boolean

    Enables or disables the buffering of the PDF pages in the client side.

    Default Value: false

    Example:
  • javascript
  • <div id="viewer"></div>
    <script type="text/javascript">
            $(function () {
                $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', allowClientBuffering: true });
            });
    </script>

    fileName string

    Gets the name of the PDF document which loaded in the ejPdfViewer control for downloading.

    Example:

  • javascript
  • <div id="viewer"></div>
    <script type="text/javascript">
    var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    var fileName = pdfviewerObj.fileName;
    </script>

    Methods

    load(fileName)

    Loads the document with the filename and displays it in PDF viewer.

    Name Type Description
    fileName string File name to be loaded

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.load("Manual");

    showToolbar(show)

    Shows/hides the toolbar in the PDF viewer.

    Name Type Description
    show boolean shows/hides the toolbar

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.showToolbar(false);

    print()

    Prints the PDF document.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.print();

    abortPrint()

    Abort the printing function and restores the PDF viewer.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.abortPrint();

    abortDownload()

    Aborts the download operation.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.abortDownload();

    showPrintTools(show)

    Shows/hides the print icon in the toolbar.

    Name Type Description
    show boolean shows/hides print button in the toolbar

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.showPrintTools(false);

    download()

    Downloads the PDF document being loaded in the ejPdfViewer control.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.download();

    showDownloadTool(show)

    Shows/hides the download tool in the toolbar.

    Name Type Description
    show boolean shows/hides download button in the toolbar

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.showDownloadTool(false);

    showPageNavigationTools(show)

    Shows/hides the page navigation tools in the toolbar

    Name Type Description
    show boolean shows/hides navigation tools in the toolbar

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.showPageNavigationTools(false);

    showTextMarkupAnnotationTools(show)

    Shows/hides the text markup annotation tools in the toolbar.

    Name Type Description
    show boolean shows/hides text markup annotation tools in the toolbar

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.showTextMarkupAnnotationTools(false);

    showSignatureTool(show)

    Shows/hides the signature tool in the toolbar.

    Name Type Description
    show boolean shows/hides signature tool in the toolbar

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.showSignatureTool(false);

    showSelectionTool(show)

    Shows/hides the selection tool in the toolbar.

    Name Type Description
    show boolean shows/hides selection tool in the toolbar

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.showSelectionTool(false);

    goToPage(pageNumber)

    Navigates to the specific page in the PDF document. If the page is not available for the given pageNumber, PDF viewer retains the existing page in view.

    Name Type Description
    pageNumber number navigates to the page number in the PDF document

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.goToPage(4);

    goToLastPage()

    Navigates to the last page of the PDF document.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.goToLastPage();

    goToFirstPage()

    Navigates to the first page of PDF document.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.goToFirstPage();

    goToNextPage()

    Navigates to the next page of the PDF document.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.goToNextPage();

    goToPreviousPage()

    Navigates to the previous page of the PDF document.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.goToPreviousPage();

    showMagnificationTools(show)

    Shows/hides the zoom tools in the toolbar.

    Name Type Description
    show boolean shows/hides zoom tools in the toolbar

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.showMagnificationTools(false);

    showTextSearchTool(show)

    Shows/hides the search tool in the toolbar.

    Name Type Description
    show boolean shows/hides search tool in the toolbar

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.showTextSearchTool(false);

    fitToPage()

    Scales the page to fit the page in the container in the control.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.fitToPage();

    fitToWidth()

    Scales the page to fit the page width to the width of the container in the control.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.fitToWidth();

    zoomIn()

    Magnifies the page to the next value in the zoom drop down list.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.zoomIn();

    zoomOut()

    Shrinks the page to the previous value in the magnification in the drop down list.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.zoomOut();

    updateViewerSize()

    Resize the viewer based on the parent element height.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.updateViewerSize();

    zoomTo(zoomValue)

    Scales the page to the specified percentage ranging from 50 to 400. If the given zoomValue is less than 50 or greater than 400; the PDF viewer scales the page to 50 and 400 respectively.

    Name Type Description
    zoomValue number zoom value for scaling the pages in the PDF Viewer

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.zoomTo(130);

    searchText(targetText)

    Searches the target text in the PDF document and highlights the occurrences in the pages.

    Name Type Description
    targetText string The text to be searched in the pages in the PDF viewer.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.searchText("name");

    searchNext()

    Searches the next occurrence of the searched text from the current occurrence in the PDF viewer control.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.searchNext();

    searchPrevious()

    Searches the previous occurrence of the searched text from the current occurrence in the PDF viewer control.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.searchPrevious();

    setJSONData(jsonData)

    Set the JSON data that are formed for rendering the document content in PDF viewer.

    NOTE

    The JSON data format should be formed as mentioned here

    Name Type Description
    jsonData object Set the JSON data that are formed for rendering the document content.

    Example:

  • javascript
  • <script type="text/javascript">
            $(function () {
                $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', ajaxRequestSuccess: "ajaxRequestSucceed" });
            });
             function ajaxRequestSucceed(args){           
                var pdfviewerObj = $("#container").data("ejPdfViewer");            
                pdfviewerObj.setJSONData(args.responseData);
            }
    </script>

    matchCase(enableMatchCase)

    Searches the target text with its casing.

    Name Type Description
    enableMatchCase boolean Specifies whether the text search must be performed with match case or not.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.matchCase(true);

    cancelSearchText()

    Cancels the text search and removes the highlighted occurrences from the PDF viewer.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.cancelSearchText();

    addAnnotation(annotationType)

    Adds annotations to the PDF document.

    Name Type Description
    annotationType enum type of the annotation to be added in the PDF document.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.addAnnotation(ej.PdfViewer.AnnotationType.Underline);

    undo()

    Performs undo function for the included annotations in the PDF document.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.undo();

    redo()

    Performs redo function for the included annotations in the PDF document.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.redo();

    unload()

    Unloads the PDF document being displayed in the PDF viewer.

    Example:

  • javascript
  • var pdfviewerObj = $("#viewer").data("ejPdfViewer");
    pdfviewerObj.unload();

    Events

    documentLoad

    Triggers when the PDF document gets loaded and is ready to view in the Control.

    Name

    Type

    Description

    argument object Event parameters from PDF viewer

    Name

    Type

    Description

    cancel boolean Returns the cancel option value.
    model object Returns the PDF viewer model
    type string Returns the name of the event
    fileName string Returns the PDF document name displaying in the PDF viewer.

    Example:

  • html
  • <script type="text/javascript">
            $(function () {
                var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', documentLoad:"documentLoaded" });
            });
            function documentLoaded(args) {
                alert("The document" +args.fileName + "is ready to view");
            }
    </script>

    documentUnload

    Triggers when the PDF document gets unloaded from the PDF viewer.

    Name

    Type

    Description

    argument object Event parameters from PDF viewer

    Name

    Type

    Description

    cancel boolean Returns the cancel option value.
    model object Returns the PDF viewer model
    type string Returns the name of the event

    Example:

  • html
  • <script type="text/javascript">
            $(function () {
                var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', documentUnload:"documentUnloaded" });
            });
            function documentUnloaded(args) {
                alert("The PDF document is unloaded from the PDF viewer");
            }
    </script>

    pageChange

    Triggers when there is change in current page number.

    Name

    Type

    Description

    argument object Event parameters from PDF viewer

    Name

    Type

    Description

    cancel boolean Returns the cancel option value.
    model object Returns the PDF viewer model
    type string Returns the name of the event
    currentPageNumber number Returns the current page number in view.

    Example:

  • html
  • <script type="text/javascript">
            $(function () {
                var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', pageChange:"currentPageChanged" });
            });
            function currentPageChanged(args) {
                alert("The current page number is " + args.currentPageNumber);
            }
    </script>

    ajaxRequestFailure

    Triggers when the AJAX request is failed.

    Name

    Type

    Description

    argument object Event parameters from PDF viewer

    Name

    Type

    Description

    cancel boolean Returns the cancel option value.
    model object Returns the PDF viewer model
    type string Returns the name of the event
    message string Returns the exception details.

    Example:

  • html
  • <script type="text/javascript">
            $(function () {
                var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', ajaxRequestFailure:"ajaxRequestFailed" });
            });
            function ajaxRequestFailed(args) {
                alert("Please find the Exception details"+ args.message);
            }
    </script>

    ajaxRequestSuccess

    Triggers when the ajax request is Success.

    Name

    Type

    Description

    argument object Event parameters from PDF viewer

    Name

    Type

    Description

    cancel boolean true, if the event should be canceled; otherwise, false.
    model object Returns the PDF viewer model
    type string Returns the name of the event
    responseData string Returns the response data on ajax success.

    Example:

  • html
  • <script type="text/javascript">
            $(function () {
                var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', ajaxRequestSuccess:"ajaxRequestSucceed" });
            });
            function ajaxRequestSucceed(args) {
                alert("Please find the response data"+ args.responseData);
            }
    </script>

    zoomChange

    Triggers when there is change in the magnification value.

    Name

    Type

    Description

    Argument object Event parameters from PDF viewer

    Name

    Type

    Description

    cancel boolean Returns the cancel option value.
    model object Returns the PDF viewer model
    type string Returns the name of the event.
    previousZoomPercentage number Returns the previous zoom percentage of the PDF viewer control
    currentZoomPercentage number Returns the current zoom percentage of the PDF viewer control

    Example:

  • html
  • <script type="text/javascript">
            $(function () {
                var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', zoomChange: "zoomChanged" });
            });
            function zoomChanged(args) {
                alert("The magnification changes from " + args.previousZoomPercentage + " to" + args.currentZoomPercentage);
            }
    </script>

    hyperlinkClick

    Triggers when hyperlink in the PDF Document is clicked

    Name

    Type

    Description

    argument object Event parameters from PDF viewer

    Name

    Type

    Description

    cancel boolean Returns the cancel option value.
    model object Returns the PDF viewer model
    type string Returns the name of the event
    hyperlink string Returns the clicked hyperlink

    Example:

  • html
  • <script type="text/javascript">
            $(function () {
           $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', hyperlinkClick:"onHyperlinkClicked" });
            });
            function onHyperlinkClicked(args) {
                alert("The hyperlink is " + args.hyperlink);
            }
    </script>

    beforePrint

    Triggers before the printing starts.

    Name

    Type

    Description

    argument object Event parameters from PDF viewer

    Name

    Type

    Description

    cancel boolean Returns the cancel option value.
    model object Returns the PDF viewer model
    type string Returns the name of the event

    Example:

  • html
  • <script type="text/javascript">
            $(function () {
                var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', beforePrint: "beforePrint" });
            });
            function beforePrint() {
                alert("Printing started successfully");
            }
    </script>

    afterPrint

    Triggers after the printing is completed.

    Name

    Type

    Description

    argument object Event parameters from PDF viewer

    Name

    Type

    Description

    cancel boolean Returns the cancel option value.
    model object Returns the PDF viewer model
    type string Returns the name of the event

    Example:

  • html
  • <script type="text/javascript">
            $(function () {
                var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', afterPrint: "afterPrint" });
            });
            function afterPrint() {
                alert("Printing completed successfully");
            }
    </script>

    pageClick

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

    Name

    Type

    Description

    argument object Event parameters from PDF viewer

    Name

    Type

    Description

    cancel boolean Returns the cancel option value.
    model object Returns the PDF viewer model
    type string Returns the name of the event
    offsetX number Returns the current X position
    offsetY number Returns the current Y position

    Example:

  • html
  • <script type="text/javascript">
            $(function () {
                var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', pageClick: "onPageClicked" });
            });
              function onPageClicked(args) {
                alert("X-coordinate :" + args.XCoordinate + "  Y-coordinate :" + args.YCoordinate);
            }
    </script>

    annotationAdd

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

    Name

    Type

    Description

    argument object Event parameters from PDF viewer

    Name

    Type

    Description

    cancel boolean Returns the cancel option value.
    model object Returns the PDF viewer model
    type string Returns the name of the event
    annotationSettings object Returns the settings of the annotation added to the PDF document.
    annotationID number Returns the id of the annotation added in the page of the PDF document.
    annotationBound array Returns the bounds of the annotation added in the page of the PDF document.
    pageID number Returns the page number in which the annotation is added.
    annotationType string Returns the type of the annotation added in the page of the PDF document.

    Example:

  • html
  • <script type="text/javascript">
            $(function () {
                var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', annotationAdd: "annotationAdd" });
            });
            function annotationAdd(args) {
                alert("The annotation is added to the PDF document successfully");
            }
    </script>

    annotationRemove

    Triggers when an annotation is removed from the page of the PDF document.

    Name

    Type

    Description

    argument object Event parameters from PDF viewer

    Name

    Type

    Description

    cancel boolean Returns the cancel option value.
    model object Returns the PDF viewer model
    type string Returns the name of the event
    annotationID number Returns the id of the annotation removed from the page of the PDF document.
    pageID number Returns the page number in which the annotation is removed.
    annotationType string Returns the type of the annotation removed from the page of the PDF document.

    Example:

  • html
  • <script type="text/javascript">
            $(function () {
                var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', annotationRemove: "annotationRemove" });
            });
            function annotationRemove(args) {
                alert("The annotation is removed from the PDF document successfully");
            }
    </script>

    annotationPropertiesChange

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

    Name

    Type

    Description

    argument object Event parameters from PDF viewer

    Name

    Type

    Description

    cancel boolean Returns the cancel option value.
    model object Returns the PDF viewer model
    type string Returns the name of the event
    annotationID number Returns the id of the annotation added in the page of the PDF document.
    pageID number Returns the page number in which the annotation is added.
    annotationType string Returns the type of the annotation added in the page of the PDF document.
    isColorChanged boolean Specifies that the color of the annotation is changed.
    isOpacityChanged boolean Specifies that the opacity of the annotation is changed.

    Example:

  • html
  • <script type="text/javascript">
            $(function () {
                var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', annotationAdd: "annotationAdd" });
            });
            function annotationAdd(args) {
                alert("The annotation is added to the PDF document successfully");
            }
    </script>

    signatureAdd

    Triggers when a handwritten signature is added over the page of the PDF document.

    Name

    Type

    Description

    argument object Event parameters from PDF viewer

    Name

    Type

    Description

    cancel boolean Returns the cancel option value.
    model object Returns the PDF viewer model
    type string Returns the name of the event
    signatureSettings object Returns the settings of the signature added to the PDF document.
    signatureBound array Returns the bounds of the signature added in the page of the PDF document.
    pageNumber number Returns the page number in which the signature is added.

    Example:

  • html
  • <script type="text/javascript">
            $(function () {
                var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', signatureAdd: "signatureAdd" });
            });
            function signatureAdd(args) {
                alert("The signature is added to the PDF document successfully");
            }
    </script>

    signatureDelete

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

    Name

    Type

    Description

    argument object Event parameters from PDF viewer

    Name

    Type

    Description

    cancel boolean Returns the cancel option value.
    model object Returns the PDF viewer model
    type string Returns the name of the event
    pageNumber number Returns the page number in which the signature is removed.

    Example:

  • html
  • <script type="text/javascript">
            $(function () {
                var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', signatureDelete: "signatureDelete" });
            });
            function signatureDelete(args) {
                alert("The signature is removed from the page of the PDF document successfully");
            }
    </script>

    signaturePropertiesChange

    Triggers when a handwritten signature properties is changed in the PDF document.

    Name

    Type

    Description

    argument object Event parameters from PDF viewer

    Name

    Type

    Description

    cancel boolean Returns the cancel option value.
    model object Returns the PDF viewer model
    type string Returns the name of the event
    pageID number Returns the page number in which the signature properties is changed.
    isColorChange boolean Specifies that the color of the signature is changed.
    isOpacityChange boolean Specifies that the opacity of the signature is changed.
    previousColor string Returns the previous color of the signature.
    currentColor string Returns the current color of the signature.
    previousOpacity number Returns the previous opacity of the signature.
    currentOpacity number Returns the current opacity of the signature.

    Example:

  • html
  • <script type="text/javascript">
            $(function () {
                var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', signaturePropertiesChange: "signaturePropertiesChange" });
            });
            function signaturePropertiesChange(args) {
                alert("The signature properties is changed from the page of the PDF document successfully");
            }
    </script>

    signatureResize

    Triggers when a handwritten signature is resized in the PDF document.

    Name

    Type

    Description

    argument object Event parameters from PDF viewer

    Name

    Type

    Description

    cancel boolean Returns the cancel option value.
    model object Returns the PDF viewer model
    type string Returns the name of the event
    signatureSettings object Returns the settings of the signature added to the PDF document.
    pageNumber number Returns the page number in which the signature is added.
    signatureCurrentBound array Returns the current bounds of the signature resized in the page of the PDF document.
    signaturePreviousBound array Returns the previous bounds of the signature resized in the page of the PDF document.

    Example:

  • html
  • <script type="text/javascript">
            $(function () {
                var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', signatureResize: "signatureResize" });
            });
            function signatureResize(args) {
                alert("The signature is resized to the PDF document successfully");
            }
    </script>

    bufferStart

    Triggers when the client buffering process starts.

    Name

    Type

    Description

    argument object Event parameters from PDF viewer

    Name

    Type

    Description

    cancel boolean Returns the cancel option value.
    model object Returns the PDF viewer model
    type string Returns the name of the event
    isBuffering boolean Specifies the state of the buffering

    Example:

  • html
  • <script type="text/javascript">
            $(function () {
                var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', allowClientBuffering: true, bufferStart: "bufferStart" });
            });
            function bufferStart(args) {
                alert("The buffering process is started");
            }
    </script>

    bufferEnd

    Triggers when the client buffering process ends.

    Name

    Type

    Description

    argument object Event parameters from PDF viewer

    Name

    Type

    Description

    cancel boolean Returns the cancel option value.
    model object Returns the PDF viewer model
    type string Returns the name of the event
    isBuffering boolean Specifies the state of the buffering

    Example:

  • html
  • <script type="text/javascript">
            $(function () {
                var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', allowClientBuffering: true, bufferEnd: "bufferEnd" });
            });
            function bufferEnd(args) {
                alert("The buffering process is ended");
            }
    </script>

    downloadStart

    Triggers when the download is started.

    Name

    Type

    Description

    argument object Event parameters from PDF viewer

    Name

    Type

    Description

    cancel boolean true, if the event should be canceled; otherwise, false
    model object Returns the PDF viewer model
    type string Returns the name of the event
    fileName string Returns the name of the file being displayed in the PDF viewer.
    status string Returns the status about the download is started.

    Example:

  • html
  • <script type="text/javascript">
            $(function () {
                var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', downloadStart: "downloadStart" });
            });
            function downloadStart(args) {
                 alert(args.fileName + " file download process " + args.status);
            }
    </script>

    downloadEnd

    Triggers when the download is completed or aborted.

    Name

    Type

    Description

    argument object Event parameters from PDF viewer

    Name

    Type

    Description

    cancel boolean true, if the event should be canceled; otherwise, false
    model object Returns the PDF viewer model
    type string Returns the name of the event
    fileName string Returns the name of the file being displayed in the PDF viewer.
    status string Returns the status about the download is completed or aborted.

    Example:

  • html
  • <script type="text/javascript">
            $(function () {
                var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', downloadEnd: "downloadEnd" });
            });
            function downloadEnd(args) {
                 alert(args.fileName + " file download process " + args.status);
            }
    </script>

    destroy

    Triggers when PDF viewer control is destroyed successfully.

    Name

    Type

    Description

    argument object Event parameters from PDF viewer

    Name

    Type

    Description

    cancel boolean Returns the cancel option value.
    model object Returns the PDF viewer model
    type string Returns the name of the event

    Example:

  • html
  • <script type="text/javascript">
            $(function () {
                var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', destroy: "destroy" });
            });
            function destroy(args) {
                alert("The control is destroyed successfully");
            }
    </script>