ejPdfViewer

10 Nov 201724 minutes to read

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

Example

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

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl" [(locale)]="locale"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public locale:string;
    constructor()
    {
	  this.locale = "fr-FR";
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    } 
}

toolbarSettings `object`

Specifies the toolbar settings.

toolbarSettings.showToolTip `boolean`

Shows or hides the tooltip of the toolbar items.

Default Value: true

Example:

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl"  [(toolbarSettings)]="toolbarSettings"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public toolbarSettings:any;
    constructor()
    {
	  this.toolbarSettings = { showTooltip: false };   
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
}

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:

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl"  [(toolbarSettings)]="toolbarSettings"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public toolbarSettings:any;
    constructor()
    {
	  this.toolbarSettings = { toolbarItem: ej.PdfViewer.ToolbarItems.MagnificationTools };   
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
}

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

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl"  [(serverActionSettings)]="serverActionSettings"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public serverActionSettings:any;
    constructor()
    {
      this.serverActionSettings = { load: "Load", fileUpload: "FileUpload", print: "Print", download: "Download" };
      this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
}

serviceUrl `string`

Sets the PDF Web API service URL

Example:

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    constructor()
    {
      this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
}

documentPath `string`

Sets the PDF document path for initial loading.

Example:

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl" [(documentPath)]="documentPath"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public documentPath:string;
    constructor()
    {
	  this.documentPath = "HTTP Succinctly.pdf";
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
}

enableTextMarkupAnnotations `boolean`

Enables or disables the text markup annotations.

Default Value: true

Example:

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl"  [(enableTextMarkupAnnotations)]="enableTextMarkupAnnotations"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public enableTextMarkupAnnotations:boolean;
    constructor()
    {
	  this.enableTextMarkupAnnotations = true;
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
}

enableHighlightAnnotation `boolean`

Enables or disables the highlight annotation.

Default Value: true

Example:

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl"  [(enableHighlightAnnotation)]="enableHighlightAnnotation"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public enableHighlightAnnotation:boolean;
    constructor()
    {
	  this.enableHighlightAnnotation = true;
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
}

enableUnderlineAnnotation `boolean`

Enables or disables the underline annotation.

Default Value: true

Example:

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl"  [(enableUnderlineAnnotation)]="enableUnderlineAnnotation"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public enableUnderlineAnnotation:boolean;
    constructor()
    {
	  this.enableUnderlineAnnotation = true;
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
}

enableStrikethroughAnnotation `boolean`

Enables or disables the strikethrough annotation.

Default Value: true

Example:

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl"  [(enableStrikethroughAnnotation)]="enableStrikethroughAnnotation"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public enableStrikethroughAnnotation:boolean;
    constructor()
    {
	  this.enableStrikethroughAnnotation = true;
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
}

enableSignature `boolean`

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

Default Value: true

Example:

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl"  [(enableSignature)]="enableSignature"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public enableSignature:boolean;
    constructor()
    {
	  this.enableSignature = true;
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
}

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

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl"  [(strikethroughSettings)]="strikethroughSettings"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public strikethroughSettings:any;
    constructor()
    {
	  this.strikethroughSettings = {color: "#ff0000", author: "Guest", opacity: 0.5, subject: "strikethrough", modifiedDate: "2017-03-27 12:00:51", isLocked: true
			           };   
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
}

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

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl"  [(underlineSettings)]="underlineSettings"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public underlineSettings:any;
    constructor()
    {
	  this.underlineSettings = {color: "#00ff00", author: "Guest", opacity: 0.5, subject: "underline", modifiedDate: "2017-03-27 12:00:51", isLocked: true
			           };   
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
}

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

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl"  [(highlightSettings)]="highlightSettings"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public highlightSettings:any;
    constructor()
    {
	  this.highlightSettings = {color: "#ffff00", author: "Guest", opacity: 0.5, subject: "highlight", modifiedDate: "2017-03-27 12:00:51", isLocked: true
			           };   
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
}

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

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl"  [(signatureSettings)]="signatureSettings"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public signatureSettings:any;
    constructor()
    {
      this.signatureSettings = { color: "#000000", opacity: 1 };
      this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
}

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:

export class DefaultComponent {
     @ViewChild('viewer') PdfViewer: EJComponents<any, any>;
     var totalPages = this.PdfViewer.widget.pageCount;
}

currentPageNumber `number`

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

Example:

export class DefaultComponent {
    @ViewChild('viewer') PdfViewer: EJComponents<any, any>;
    var pageNumber = this.PdfViewer.widget.currentPageNumber;
}

zoomPercentage `number`

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

Example:

export class DefaultComponent {
     @ViewChild('viewer') PdfViewer: EJComponents<any, any>;
     var currentZoom = this.PdfViewer.widget.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.

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl"  [(pdfService)]="pdfService"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public pdfService:any;
    constructor()
    {
      this.pdfService =  ej.PdfViewer.PdfService.Remote;
      this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
}

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.

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl"  [(interactionMode)]="interactionMode"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public interactionMode:any;
    constructor()
    {
      this.interactionMode = ej.PdfViewer.InteractionMode.Pan;
      this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
}

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.

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl"  [(hyperlinkOpenState)]="hyperlinkOpenState"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public hyperlinkOpenState:any;
    constructor()
    {
	    this.hyperlinkOpenState = ej.PdfViewer.LinkTarget.NewTab
        this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
}

enableHyperlink `boolean`

Enables or disables the hyperlinks in PDF document.
Default Value: true

Example:

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl"  [(enableHyperlink)]="enableHyperlink"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public enableHyperlink:boolean;
    constructor()
    {
        this.enableHyperlink = true;
        this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
}

enableTextSelection `boolean`

Enables or disables the text selection in PDF document.

Default Value: true

Example:

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl"  [(enableTextSelection)]="enableTextSelection"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public enableTextSelection:boolean;
    constructor()
    {
        this.enableTextSelection = false;
        this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
}

isResponsive `boolean`

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

Default Value: true

Example

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl" [(isResponsive)]="isResponsive"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public isResponsive:boolean;
    constructor()
    {
        this.isResponsive = true;
        this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    } 
}

isDocumentEdited `boolean`

Checks whether the PDF document is edited.

Default Value: false

Example

export class DefaultComponent {
     @ViewChild('viewer') PdfViewer: EJComponents<any, any>;
     var documentEdited = this.PdfViewer.widget.isDocumentEdited;
}

allowClientBuffering `boolean`

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

Default Value: false

Example:

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl"  [(allowClientBuffering)]="allowClientBuffering"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public allowClientBuffering:boolean;
    constructor()
    {
    	this.allowClientBuffering = true;
        this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
	}
}

fileName `string`

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

Example:

export class DefaultComponent {
    @ViewChild('viewer') PdfViewer: EJComponents<any, any>;
    var fileName = this.PdfViewer.widget.fileName;
}

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:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.load("Manual");

showToolbar(show)

Shows/hides the toolbar in the PDF viewer.

Name	Type	Description
show	boolean	shows/hides the toolbar

Example:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.showToolbar(false);

print()

Prints the PDF document.

Example:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.print();

abortPrint()

Abort the printing function and restores the PDF viewer.

Example:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.abortPrint();

showPrintTools(show)

Shows/hides the print icon in the toolbar.

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

Example:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.showPrintTools(false);

download()

Downloads the PDF document being loaded in the ejPdfViewer control.

Example:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.download();

showDownloadTool(show)

Shows/hides the download tool in the toolbar.

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

Example:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.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:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.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:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.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:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.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:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.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:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.goToPage(4);

goToLastPage()

Navigates to the last page of the PDF document.

Example:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.goToLastPage();

goToFirstPage()

Navigates to the first page of PDF document.

Example:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.goToFirstPage();

goToNextPage()

Navigates to the next page of the PDF document.

Example:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.goToNextPage();

goToPreviousPage()

Navigates to the previous page of the PDF document.

Example:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.goToPreviousPage();

showMagnificationTools(show)

Shows/hides the zoom tools in the toolbar.

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

Example:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.showMagnificationTools(false);

fitToPage()

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

Example:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.fitToPage();

fitToWidth()

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

Example:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.fitToWidth();

zoomIn()

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

Example:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.zoomIn();

zoomOut()

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

Example:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.zoomOut();

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:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.zoomTo(130);

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:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.addAnnotation(ej.PdfViewer.AnnotationType.Underline);

undo()

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

Example:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.undo();

redo()

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

Example:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.redo();

unload()

Unloads the PDF document being displayed in the PDF viewer.

Example:

@ViewChild('viewer') PdfViewer: EJComponents<any, any>;
this.PdfViewer.widget.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	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 PDF document name displaying in the PDF viewer.

Example:

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl" (documentLoad)="documentLoaded($event)"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    constructor()
    {
        this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
    documentLoaded(sender)
    {
        alert("The document" +sender.fileName + "is ready to view");
    }  
}

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	true, if the event should be canceled; otherwise, false.
model	object	Returns the PDF viewer model
type	string	Returns the name of the event

Example:

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl" (documentUnload)="documentUnloaded($event)"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    constructor()
    {
        this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
    documentUnloaded(sender)
    {
        alert("The PDF document is unloaded from the PDF viewer");
    }  
}

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	true, if the event should be canceled; otherwise, false.
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

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl" (pageChange)="currentPageChanged($event)"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    constructor()
    {
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
    currentPageChanged(sender)
    {
          alert("The current page number is " + sender.currentPageNumber);
    }  
}

ajaxRequestFailure

Triggers when the AJAX request is failed.

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
message	string	Returns the exception details.

Example:

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl" (ajaxRequestFailure)="ajaxRequestFailed($event)"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    constructor()
    {
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
    ajaxRequestFailed(sender)
    {
      alert("Please find the Exception details"+ sender.message);
    }  
}

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	true, if the event should be canceled; otherwise, false.
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

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl" (zoomChange)="zoomChange($event)"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    constructor()
    {
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
    zoomChange(sender)
    {
          alert("The magnification changes from " + sender.previousZoomPercentage + " to" + sender.currentZoomPercentage);
    }  
}

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	true, if the event should be canceled; otherwise, false.
model	object	Returns the PDF viewer model
type	string	Returns the name of the event
hyperlink	string	Returns the clicked hyperlink

Example:

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl" (hyperlinkClick)="onHyperlinkClicked($event)"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    constructor()
    {
         this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
    onHyperlinkClicked(sender)
    {
         alert("The hyperlink is " + sender.hyperlink);
    }  
}

beforePrint

Triggers before the printing starts.

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

Example:

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl" (beforePrint)="beforePrint($event)"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    constructor()
    {
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
    beforePrint(sender)
    {
       alert("Printing started successfully");
    }  
}

afterPrint

Triggers after the printing is completed.

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

Example:

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl" (afterPrint)="afterPrint($event)"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    constructor()
    {
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
    afterPrint(sender)
    {
     alert("Printing completed successfully");
    }  
}

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	True, if the event should be canceled; otherwise, false.
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

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl" (pageClick)="pageClick($event)"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    constructor()
    {
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
    pageClick(sender)
    {
          alert("The page number" + sender.currentPageNumber + " is clicked");
    }  
}

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	True, if the event should be canceled; otherwise, false.
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

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl" (annotationAdd)="annotationAdd($event)"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    constructor()
    {
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
    annotationAdd(sender)
    {
       alert("The annotation is added to the PDF document successfully");
    }  
}

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	True, if the event should be canceled; otherwise, false.
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

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl" (annotationRemove)="annotationRemove($event)"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    constructor()
    {
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
    annotationRemove(sender)
    {
       alert("The annotation is removed from the PDF document successfully");
    }  
}

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	True, if the event should be canceled; otherwise, false.
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

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl" (annotationPropertiesChange)="annotationPropertiesChange($event)"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    constructor()
    {
        this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
    annotationPropertiesChange(sender)
    {
       alert("The annotation is modified in the PDF document successfully");
    }  
}

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	True, if the event should be canceled; otherwise, false.
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

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl" (signatureAdd)="signatureAdd($event)"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    constructor()
    {
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
    signatureAdd(sender)
    {
          alert("The signature is added to the PDF document successfully");
    }  
}

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	True, if the event should be canceled; otherwise, false.
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

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl" (signatureDelete)="signatureDelete($event)"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    constructor()
    {
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
    signatureDelete(sender)
    {
         alert("The signature is removed from the page of the PDF document successfully");
    }  
}

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	True, if the event should be canceled; otherwise, false.
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

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl" (signaturePropertiesChange)="signaturePropertiesChange($event)"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    constructor()
    {
         this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
    signaturePropertiesChange(sender)
    {
         alert("The signature properties is changed from the page of the PDF document successfully");
    }  
}

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	True, if the event should be canceled; otherwise, false.
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

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl" (signatureResize)="signatureResize($event)"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    constructor()
    {
         this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
    signatureResize(sender)
    {
         alert("The signature is resized to the PDF document successfully");
    }  
}

bufferStart

Triggers when the client buffering process starts.

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
isBuffering	boolean	Specifies the state of the buffering

Example:

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl"  [(allowClientBuffering)]="allowClientBuffering" (bufferStart)="bufferStart($event)"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public allowClientBuffering:boolean;
    constructor()
    {
          this.allowClientBuffering = true;
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
    bufferStart(sender)
    {
      alert("The buffering process is started");
    }  
}

bufferEnd

Triggers when the client buffering process ends.

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
isBuffering	boolean	Specifies the state of the buffering

Example:

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl"  [(allowClientBuffering)]="allowClientBuffering" (bufferEnd)="bufferEnd($event)"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    public allowClientBuffering:boolean;
    constructor()
    {
          this.allowClientBuffering = true;
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
    bufferEnd(sender)
    {
      alert("The buffering process is ended");
    }  
}

destroy

Triggers when PDF viewer control is destroyed successfully.

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

Example:

HTML

<ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl" (destroy)="destroy($event)"> </ej-pdfviewer>

export class DefaultComponent {
    public serviceUrl:string;
    constructor()
    {
          this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
    }
    destroy(sender)
    {
         alert("The control is destroyed successfully");
    }  
}

ejPdfViewer

Example

Requires

Members

locale string

Example:

toolbarSettings object

toolbarSettings.showToolTip boolean

Example:

toolbarSettings.toolbarItem enum

Example:

serverActionSettings object

serverActionSettings.load string

serverActionSettings.fileUpload string

serverActionSettings.print string

serverActionSettings.download string

Example:

serviceUrl string

Example:

documentPath string

Example:

enableTextMarkupAnnotations boolean

Example:

enableHighlightAnnotation boolean

Example:

enableUnderlineAnnotation boolean

Example:

enableStrikethroughAnnotation boolean

Example:

enableSignature boolean

Example:

strikethroughSettings object

strikethroughSettings.color string

strikethroughSettings.author string

strikethroughSettings.opacity number

strikethroughSettings.subject string

strikethroughSettings.modifiedDate string

strikethroughSettings.isLocked boolean

Example:

underlineSettings object

underlineSettings.color string

underlineSettings.author string

underlineSettings.opacity number

underlineSettings.subject string

underlineSettings.modifiedDate string

underlineSettings.isLocked boolean

Example:

highlightSettings object

highlightSettings.color string

highlightSettings.author string

highlightSettings.opacity number

highlightSettings.subject string

highlightSettings.modifiedDate string

highlightSettings.isLocked boolean

Example:

signatureSettings object

signatureSettings.color string

signatureSettings.opacity number

Example:

annotationType enum

pageCount number

Example:

currentPageNumber number

Example:

zoomPercentage number

Example:

pdfService enum

Example:

interactionMode enum

Example:

hyperlinkOpenState enum

Example:

enableHyperlink boolean

Example:

enableTextSelection boolean

Example:

isResponsive boolean

Example

isDocumentEdited boolean

Example

locale `string`

toolbarSettings `object`

toolbarSettings.showToolTip `boolean`

toolbarSettings.toolbarItem `enum`

serverActionSettings `object`

serverActionSettings.load `string`

serverActionSettings.fileUpload `string`

serverActionSettings.print `string`

serverActionSettings.download `string`

serviceUrl `string`

documentPath `string`

enableTextMarkupAnnotations `boolean`

enableHighlightAnnotation `boolean`

enableUnderlineAnnotation `boolean`

enableStrikethroughAnnotation `boolean`

enableSignature `boolean`

strikethroughSettings `object`

strikethroughSettings.color `string`

strikethroughSettings.author `string`

strikethroughSettings.opacity `number`

strikethroughSettings.subject `string`

strikethroughSettings.modifiedDate `string`

strikethroughSettings.isLocked `boolean`

underlineSettings `object`

underlineSettings.color `string`

underlineSettings.author `string`

underlineSettings.opacity `number`

underlineSettings.subject `string`

underlineSettings.modifiedDate `string`

underlineSettings.isLocked `boolean`

highlightSettings `object`

highlightSettings.color `string`

highlightSettings.author `string`

highlightSettings.opacity `number`

highlightSettings.subject `string`

highlightSettings.modifiedDate `string`

highlightSettings.isLocked `boolean`

signatureSettings `object`

signatureSettings.color `string`

signatureSettings.opacity `number`

annotationType `enum`

pageCount `number`

currentPageNumber `number`

zoomPercentage `number`

pdfService `enum`

interactionMode `enum`

hyperlinkOpenState `enum`

enableHyperlink `boolean`

enableTextSelection `boolean`

isResponsive `boolean`

isDocumentEdited `boolean`

allowClientBuffering `boolean`

fileName `string`