ejPdfViewer

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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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:

  • ts
  • 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:

  • ts
  • 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:

  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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"; 
        }
    }

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

    Example:
  • html
  • <ej-pdfviewer id="viewer" [(serviceUrl)]="serviceUrl"  [(enableHyperlink)]="enableHyperlink"> </ej-pdfviewer>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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

  • ts
  • 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>
  • ts
  • 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:

  • ts
  • 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:

  • ts
  • @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:

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

    print()

    Prints the PDF document.

    Example:

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

    abortPrint()

    Abort the printing function and restores the PDF viewer.

    Example:

  • ts
  • @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:

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

    download()

    Downloads the PDF document being loaded in the ejPdfViewer control.

    Example:

  • ts
  • @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:

  • ts
  • @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:

  • ts
  • @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:

  • ts
  • @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:

  • ts
  • @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:

  • ts
  • @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:

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

    goToLastPage()

    Navigates to the last page of the PDF document.

    Example:

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

    goToFirstPage()

    Navigates to the first page of PDF document.

    Example:

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

    goToNextPage()

    Navigates to the next page of the PDF document.

    Example:

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

    goToPreviousPage()

    Navigates to the previous page of the PDF document.

    Example:

  • ts
  • @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:

  • ts
  • @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:

  • ts
  • @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:

  • ts
  • @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:

  • ts
  • @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:

  • ts
  • @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:

  • ts
  • @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:

  • ts
  • @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:

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

    redo()

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

    Example:

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

    unload()

    Unloads the PDF document being displayed in the PDF viewer.

    Example:

  • ts
  • @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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • export class DefaultComponent {
        public serviceUrl:string;
        constructor()
        {
              this.serviceUrl = "http://js.syncfusion.com/ejservices/api/PdfViewer"; 
        }
        destroy(sender)
        {
             alert("The control is destroyed successfully");
        }  
    }