ejPdfViewer

12 Dec 201824 minutes to read

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>

enableHyperlink boolean

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>