Search results

PdfViewerModel API in React PDF Viewer API component

Interface for a class PdfViewer

Properties

addSignature

EmitType<AddSignatureEventArgs>

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

ajaxRequestFailed

EmitType<AjaxRequestFailureEventArgs>

Triggers when the AJAX request is failed.

ajaxRequestInitiate

EmitType<AjaxRequestInitiateEventArgs>

Triggers before the data is sent to the server.

ajaxRequestSuccess

EmitType<AjaxRequestSuccessEventArgs>

Triggers on successful AJAX request.

annotationAdd

EmitType<AnnotationAddEventArgs>

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

annotationDoubleClick

EmitType<AnnotationDoubleClickEventArgs>

Triggers when the annotation is double clicked.

annotationMouseLeave

EmitType<AnnotationMouseLeaveEventArgs>

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

annotationMouseover

EmitType<AnnotationMouseoverEventArgs>

Triggers when the mouse is moved over the annotation object.

annotationMove

EmitType<AnnotationMoveEventArgs>

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

annotationMoving

EmitType<AnnotationMovingEventArgs>

Triggers while moving an annotation.

annotationPropertiesChange

EmitType<AnnotationPropertiesChangeEventArgs>

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

annotationRemove

EmitType<AnnotationRemoveEventArgs>

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

annotationResize

EmitType<AnnotationResizeEventArgs>

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

annotationSelect

EmitType<AnnotationSelectEventArgs>

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

annotationUnSelect

EmitType<AnnotationUnSelectEventArgs>

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

beforeAddFreeText

EmitType<BeforeAddFreeTextEventArgs>

Triggers before adding a text in the freeText annotation.

bookmarkClick

EmitType<BookmarkClickEventArgs>

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

buttonFieldClick

EmitType<ButtonFieldClickEventArgs>

Triggers when the button is clicked.

commentAdd

EmitType<CommentEventArgs>

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

commentDelete

EmitType<CommentEventArgs>

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

commentEdit

EmitType<CommentEventArgs>

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

commentSelect

EmitType<CommentEventArgs>

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

commentStatusChanged

EmitType<CommentEventArgs>

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

created

EmitType<void>

Triggers during the creation of the PDF viewer component.

documentLoad

EmitType<LoadEventArgs>

Triggers while loading document into PDF viewer.

documentLoadFailed

EmitType<LoadFailedEventArgs>

Triggers while document loading failed in PdfViewer.

documentUnload

EmitType<UnloadEventArgs>

Triggers while closing the document.

downloadEnd

EmitType<DownloadEndEventArgs>

Triggers when the download actions are completed.

downloadStart

EmitType<DownloadStartEventArgs>

Triggers when the download action is initiated.

exportFailed

EmitType<ExportFailureEventArgs>

Triggers when the annotations export in a PDF document fails.

exportStart

EmitType<ExportStartEventArgs>

Triggers when an exported annotation started in the PDF Viewer.

exportSuccess

EmitType<ExportSuccessEventArgs>

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

extractTextCompleted

EmitType<ExtractTextCompletedEventArgs>

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

formFieldAdd

EmitType<FormFieldAddArgs>

Triggers when a form field is added.

formFieldClick

EmitType<FormFieldClickArgs>

Triggers when the form field is selected.

formFieldDoubleClick

EmitType<FormFieldDoubleClickArgs>

Triggers when the form field is double-clicked.

formFieldFocusOut

EmitType<FormFieldFocusOutEventArgs>

Triggers when focus out from the form fields.

formFieldMouseLeave

EmitType<FormFieldMouseLeaveArgs>

Triggers when the mouse cursor leaves the form field.

formFieldMouseover

EmitType<FormFieldMouseoverArgs>

Triggers when the mouse cursor is over a form field.

formFieldMove

EmitType<FormFieldMoveArgs>

Triggers when a form field is moved.

formFieldPropertiesChange

EmitType<FormFieldPropertiesChangeArgs>

Triggers when a property of form field is changed.

formFieldRemove

EmitType<FormFieldRemoveArgs>

Triggers when a form field is removed.

formFieldResize

EmitType<FormFieldResizeArgs>

Triggers when a form field is resized.

formFieldSelect

EmitType<FormFieldSelectArgs>

Triggers when a form field is selected.

formFieldUnselect

EmitType<FormFieldUnselectArgs>

Triggers when a form field is unselected.

hyperlinkClick

EmitType<HyperlinkClickEventArgs>

Triggers when a hyperlink in a PDF document is clicked.

hyperlinkMouseOver

EmitType<HyperlinkMouseOverArgs>

Triggers when hyperlink in a PDF document is hovered.

importFailed

EmitType<ImportFailureEventArgs>

Triggers when the annotations imports in a PDF document fails.

importStart

EmitType<ImportStartEventArgs>

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

importSuccess

EmitType<ImportSuccessEventArgs>

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

moveSignature

EmitType<MoveSignatureEventArgs>

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

pageChange

EmitType<PageChangeEventArgs>

Triggers when there is change in current page number.

pageClick

EmitType<PageClickEventArgs>

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

pageMouseover

EmitType<PageMouseoverEventArgs>

Triggers when moving the mouse over the page.

printEnd

EmitType<PrintEndEventArgs>

Triggers when the print actions are completed.

printStart

EmitType<PrintStartEventArgs>

Triggers when the print action is initiated.

removeSignature

EmitType<RemoveSignatureEventArgs>

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

resizeSignature

EmitType<ResizeSignatureEventArgs>

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

signaturePropertiesChange

EmitType<SignaturePropertiesChangeEventArgs>

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

signatureSelect

EmitType<SignatureSelectEventArgs>

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

textSearchComplete

EmitType<TextSearchCompleteEventArgs>

Triggers when the text search is completed.

textSearchHighlight

EmitType<TextSearchHighlightEventArgs>

Triggers when the text search text is highlighted.

textSearchStart

EmitType<TextSearchStartEventArgs>

Triggers when the text search is initiated.

textSelectionEnd

EmitType<TextSelectionEndEventArgs>

Triggers when the text selection is complete.

textSelectionStart

EmitType<TextSelectionStartEventArgs>

Triggers when the text selection is initiated.

thumbnailClick

EmitType<ThumbnailClickEventArgs>

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

toolbarClick

EmitType<ClickEventArgs>

Triggers when custom toolbar item is clicked.

validateFormFields

EmitType<ValidateFormFieldsArgs>

Triggers when validation is failed.

zoomChange

EmitType<ZoomChangeEventArgs>

Triggers When the magnification value changes.

Get or set the dropdown field settings.

ajaxRequestSettings

AjaxRequestSettingsModel

Defines the ajax Request settings of the PDF Viewer.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        ajaxRequestSettings={{
          ajaxHeaders: [
            {
              headerName: "Authorization",
              headerValue: "Bearerabcdefghijklmnopqrstuvwxyz"
            }
          ],
          withCredentials: false
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

annotationSelectorSettings

AnnotationSelectorSettingsModel

Defines the settings of annotation selector.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the annotation selector settings.
        annotationSelectorSettings={{
          selectionBorderColor: 'blue', 
          resizerBorderColor: 'red', 
          resizerFillColor: '#4070ff', 
          resizerSize: 8, 
          selectionBorderThickness: 1, 
          resizerShape: 'Square', 
          selectorLineDashArray: [5, 6], 
          resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges, 
          resizerCursorType: CursorType.grab 
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

annotationSettings

AnnotationSettingsModel

Defines the settings of the annotations.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, CursorType } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the annotation settings.
        annotationSettings = {{
          author: 'XYZ', 
          minHeight: 10, 
          minWidth: 10, 
          maxWidth: 100, 
          maxHeight: 100, 
          isLock: false, 
          skipPrint: false, 
          skipDownload: false, 
          allowedInteractions: ['Resize'] 
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

areaSettings

AreaSettingsModel

Defines the settings of area annotation.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, CursorType } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the area annotation settings.
        areaSettings={{ 
          opacity: 1, 
          fillColor: '#ffffff00', 
          strokeColor: '#ff0000', 
          author: 'XYZ', 
          thickness: 1, 
          minHeight: 10, 
          minWidth: 10, 
          maxWidth: 100, 
          maxHeight: 100, 
          isLock: false, 
          annotationSelectorSettings: { 
            selectionBorderColor: 'blue', 
            resizerBorderColor: 'black', 
            resizerFillColor: '#4070ff', 
            resizerSize: 8, 
            selectionBorderThickness: 1, 
            resizerShape: 'Circle', 
            selectorLineDashArray: [5, 6], 
            resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges, 
            resizerCursorType: CursorType.grab 
          }, 
          allowedInteractions: ['Resize'], 
          isPrint: true 
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

arrowSettings

ArrowSettingsModel

Defines the settings of arrow annotation.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the arrow annotation settings.
        arrowSettings={{ 
          opacity: 1, 
          fillColor: '#9c2592', 
          strokeColor: '#ff0000', 
          author: 'XYZ', 
          thickness: 1, 
          borderDashArray: 1, 
          lineHeadStartStyle: 'Closed', 
          lineHeadEndStyle: 'Closed', 
          annotationSelectorSettings: {
            selectionBorderColor: 'blue', 
            resizerBorderColor: 'black', 
            resizerFillColor: '#FF4081', 
            resizerSize: 8, 
            selectionBorderThickness: 1, 
            resizerShape: 'Square', 
            selectorLineDashArray: [5, 6], 
            resizerLocation: 
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges, 
            resizerCursorType: CursorType.grab 
          }, 
          minHeight: 10, 
          minWidth: 10, 
          maxWidth: 100, 
          maxHeight: 100, 
          isLock: false, 
          allowedInteractions: ['Resize'], 
          isPrint: true 
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

checkBoxFieldSettings

CheckBoxFieldSettingsModel

Get or set the check box field settings.

circleSettings

CircleSettingsModel

Defines the settings of circle annotation.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the circle annotation settings.
        circleSettings = {{ 
          opacity: 1, 
          fillColor: '#9c2592', 
          strokeColor: '#ff0000', 
          author: 'XYZ', 
          thickness: 1, 
          annotationSelectorSettings: { 
            selectionBorderColor: 'blue',
            resizerBorderColor: 'black', 
            resizerFillColor: '#FF4081', 
            resizerSize: 8, 
            selectionBorderThickness: 1, 
            resizerShape: 'Square', 
            selectorLineDashArray: [5, 6], 
            resizerLocation: 
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges, 
            resizerCursorType: CursorType.grab 
          }, 
          minHeight: 10, 
          minWidth: 10, 
          maxWidth: 100, 
          maxHeight: 100, 
          isLock: false, 
          allowedInteractions: ['Resize'], 
          isPrint: true 
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

contextMenuOption

ContextMenuAction

Specifies the state of the ContextMenu in the PDF document.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the settings of the context menu option.
        contextMenuOption = "None"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

contextMenuSettings

ContextMenuSettingsModel

Defines the context menu settings.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, ContextMenuItem } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the context menu settings.
        contextMenuSettings = {{ 
          contextMenuAction: 'RightClick', 
          contextMenuItems: [
            ContextMenuItem.Comment, 
            ContextMenuItem.Copy, 
            ContextMenuItem.Cut, 
            ContextMenuItem.Delete, 
            ContextMenuItem.Highlight, 
            ContextMenuItem.Paste, 
            ContextMenuItem.Properties, 
            ContextMenuItem.ScaleRatio, 
            ContextMenuItem.Strikethrough, 
            ContextMenuItem.Underline
          ] 
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

currentPageNumber

number

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

<body>
    <button onclick="currentPage()">Current Page Number</button>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

<script>
    function currentPage(){
        var viewer = document.getElementById('container').ej2_instances[0];	
        // Logs the current page number.
        console.log("Current page number is - " + viewer.currentPageNumber);
    }
 </script>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
      
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

customStamp

CustomStampModel[]

Defines the stamp items of the PDF Viewer.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Add your custom stamp image source as base64 image.
        customStamp = {[
            { 
              customStampName: 'Sample', 
              customStampImageSource: "data:image/png;base64, Syncfusionpdfviewer"
            }
        ]}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

customStampSettings

CustomStampSettingsModel

Defines the settings of customStamp annotation.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the custom stamp settings.
        customStampSettings = {{ 
            opacity: 1, 
            author: 'XYZ', 
            width: 100, 
            height: 100, 
            left: 200, 
            top: 200, 
            minHeight: 10, 
            minWidth: 10, 
            maxWidth: 100, 
            maxHeight: 100, 
            isLock: false, 
            enableCustomStamp: true, 
            allowedInteractions: ['None'],
            isPrint: true 
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

dateTimeFormat

string

Customize desired date and time format

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the date time format.
        dateTimeFormat = "yyyy-MM-dd HH:mm:ss"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

designerMode

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        designerMode = "true"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

disableContextMenuItems

ContextMenuItem[]

Disables the menu items in the context menu.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, ContextMenuItem } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Show or hide the context menu items.
        disableContextMenuItems = {[
          ContextMenuItem.Copy,
          ContextMenuItem.Paste
        ]}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

distanceSettings

DistanceSettingsModel

Defines the settings of distance annotation.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the distance annotation settings.
        distanceSettings = {{ 
          opacity: 1, 
          fillColor: '#ffffff00', 
          strokeColor: '#ff0000', 
          author: 'Guest', 
          thickness: 1, 
          borderDashArray: 1, 
          lineHeadStartStyle: 'Closed', 
          lineHeadEndStyle: 'Closed', 
          annotationSelectorSettings: { 
            selectionBorderColor: 'blue', 
            resizerBorderColor: 'black', 
            resizerFillColor: '#FF4081', 
            resizerSize: 8, 
            selectionBorderThickness: 1, 
            resizerShape: 'Square', 
            selectorLineDashArray: [5, 6], 
            resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges, 
            resizerCursorType: CursorType.grab 
          }, 
          minHeight: 10, 
          minWidth: 10, 
          maxWidth: 100, 
          maxHeight: 100, 
          isLock: false, 
          leaderLength: 40, 
          resizeCursorType: CursorType.move, 
          allowedInteractions: ['Resize'], 
          isPrint: true 
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

documentPath

string

Sets the PDF document path for initial loading.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

downloadFileName

string

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        downloadFileName = 'Document_Downloaded'
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableAccessibilityTags

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, AccessibilityTags, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable download.
        enableAccessibilityTags = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner, AccessibilityTags]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableAnnotation

boolean

Enable or disable the annotation in the PDF Viewer.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable the Add or Edit Annotations tool in the toolbar.
        enableAnnotation = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableAnnotationToolbar

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Show or hide the annotation toolbar.
        enableAnnotationToolbar = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableAutoComplete

boolean

Enable or disables the auto complete option in form documents.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        enableAutoComplete = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableBookmark

boolean

Enables or disables the bookmark view in the PDF viewer

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Show or hide the bookmark tool.
        enableBookmark = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableBookmarkStyles

boolean

Enables or disables the bookmark styles in the PDF viewer

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable bookmark styles.
        enableBookmarkStyles = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableCommentPanel

boolean

Enable or disables the Comment Panel of PdfViewer.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable comment panel.
        enableCommentPanel = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableDesktopMode

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable desktop mode.
        enableDesktopMode = "true"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableDownload

boolean

Enable or disables the download option of PdfViewer.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable download.
        enableDownload = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableFormDesigner

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable form designer.
        enableFormDesigner = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableFormDesignerToolbar

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable form designer.
        enableFormDesigner = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableFormFields

boolean

Enable or disable the form fields in the PDF Viewer.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable form fields.
        enableFormFields = "false";
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableFormFieldsValidation

boolean

Enable or disable the form fields validation.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable form fields.
        enableFormFieldsValidation = "true"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableFreeText

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable free text.
        enableFreeText = "false";
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableHandwrittenSignature

boolean

Enables or disables the handwritten signature in PDF document.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable hand written signature.
        enableHandwrittenSignature = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

Enables or disables the hyperlinks in PDF document.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable hyper link.
        enableHyperlink = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableImportAnnotationMeasurement

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable import annotation measurement.
        enableImportAnnotationMeasurement = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableInkAnnotation

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable ink annotation.
        enableInkAnnotation = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableMagnification

boolean

Enable or disable the Magnification module of PDF Viewer.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable magnification.
        enableMagnification = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableMeasureAnnotation

boolean

Enable or disable the calibrate annotation in the PDF Viewer.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable measure annotation.
        enableMeasureAnnotation = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableMultiLineOverlap

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable multi line text markup annotations in overlapping collections.
        enableMultiLineOverlap = "true"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableMultiPageAnnotation

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable multi-page text markup annotation selection.
        enableMultiPageAnnotation = "true"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableNavigation

boolean

Enable or disable the Navigation module of PDF Viewer.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable navigation.
        enableNavigation = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableNavigationToolbar

boolean

Enable or disables the Navigation toolbar of PdfViewer.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable navigation tool bar.
        enableNavigationToolbar = "true"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enablePersistence

boolean

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

enablePinchZoom

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable pinch zoom.
        enablePinchZoom = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enablePrint

boolean

Enable or disables the print option of PdfViewer.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable print.
        enablePrint = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enablePrintRotation

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        enablePrintRotation = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableRtl

boolean

Enable or disable rendering component in right to left direction.

enableShapeAnnotation

boolean

Enable or disable the shape annotation in the PDF Viewer.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable sahpe annotation.
        enableShapeAnnotation = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableShapeLabel

boolean

Enable or disable the Label for shapeAnnotations of PDF Viewer.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable shape label for shape annotations.
        enableShapeLabel = "true"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableStampAnnotations

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable stamp annotations.
        enableStampAnnotations = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableStickyNotesAnnotation

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable sticky notes annotation.
        enableStickyNotesAnnotation = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableTextMarkupAnnotation

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable text markup annotation.
        enableTextMarkupAnnotation = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableTextMarkupResizer

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable text mark up resizer.
        enableTextMarkupResizer = "true"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableTextSearch

boolean

Enable or disable the text search in the PDF Viewer.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable text search.
        enableTextSearch = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableTextSelection

boolean

Enable or disable the text selection in the PDF Viewer.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable text selection.
        enableTextSelection = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableThumbnail

boolean

Enables or disables the thumbnail view in the PDF viewer

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable thumb nail.
        enableThumbnail = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableToolbar

boolean

Enable or disables the toolbar of PdfViewer.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable tool bar.
        enableToolbar = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

enableZoomOptimization

boolean

Enable or disable the zoom optimization mode in PDF Viewer.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable zoom optimization.
        enableZoomOptimization = "false"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

exportAnnotationFileName

string

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the export annotation file name.
        exportAnnotationFileName = 'Annotation export file_1'
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

formFieldCollections

FormFieldModel[]

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

<body>
    <button onclick="form()">Form Field Collections</button>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

<script>
    function form(){
        var viewer = document.getElementById('container').ej2_instances[0];	
        // Logs the form field collections.
        console.log(viewer.formFieldCollections);
    }
 </script>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
      id="container" 
      documentPath="PDF_Succinctly.pdf"
      serviceUrl="https://localhost:44309/pdfviewer" 
      style={{ 'height': '680px' }} 
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

freeTextSettings

FreeTextSettingsModel

Defines the settings of free text annotation.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, AnnotationResizerLocation, FontStyle } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Changes the free text annotation settings.
        freeTextSettings = {{
          opacity: 1,
          fillColor: "#ffffff00",
          borderColor: "#4070ff",
          author: "XYZ",
          borderWidth: 1,
          width: 151,
          fontSize: 16,
          height: 24.6,
          fontColor: "#000",
          fontFamily: "Helvetica",
          defaultText: "Type Here",
          textAlignment: "Right",
          fontStyle: FontStyle.Italic,
          allowTextOnly: false,
          annotationSelectorSettings: {
            selectionBorderColor: "blue",
            resizerBorderColor: "black",
            resizerFillColor: "#FF4081",
            resizerSize: 8,
            selectionBorderThickness: 1,
            resizerShape: "Circle",
            selectorLineDashArray: [],
            resizerLocation:
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
            resizerCursorType: null
          },
          minHeight: 10,
          minWidth: 10,
          maxWidth: 100,
          maxHeight: 100,
          isLock: false,
          allowedInteractions: ["None"],
          isPrint: true,
          isReadonly: false,
          enableAutoFit: false
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

handWrittenSignatureSettings

HandWrittenSignatureSettingsModel

Defines the settings of handWrittenSignature.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, CursorType } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Changes the hand written signature settings.
        handWrittenSignatureSettings = {{
          signatureItem: ["Signature", "Initial"],
          saveSignatureLimit: 1,
          saveInitialLimit: 1,
          opacity: 1,
          strokeColor: "#000000",
          width: 150,
          height: 100,
          thickness: 1,
          annotationSelectorSettings: {
            selectionBorderColor: "blue",
            resizerBorderColor: "black",
            resizerFillColor: "#FF4081",
            resizerSize: 8,
            selectionBorderThickness: 1,
            resizerShape: "Circle",
            selectorLineDashArray: [5, 6],
            resizerLocation:
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
            resizerCursorType: CursorType.grab
          },
          allowedInteractions: ["Resize"],
          signatureDialogSettings: {
            displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
            hideSaveSignature: false
          },
          initialDialogSettings: {
            displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
            hideSaveSignature: false
          }
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

height

string | number

Defines the scrollable height of the PdfViewer control.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the height of the PDF viewer.
        height = {500}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

hideSaveSignature

boolean

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

highlightSettings

HighlightSettingsModel

Defines the settings of highlight annotation.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, AnnotationResizerLocation } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Changes the highlight annotation settings.
        highlightSettings = {{
          opacity: 1,
          color: "#DAFF56",
          author: "XYZ",
          annotationSelectorSettings: {
            selectionBorderColor: "blue",
            resizerBorderColor: "black",
            resizerFillColor: "#FF4081",
            resizerSize: 8,
            selectionBorderThickness: 1,
            resizerShape: "Square",
            selectorLineDashArray: [5, 6],
            resizerLocation:
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges
          },
          isLock: false,
          enableMultiPageAnnotation: false,
          enableTextMarkupResizer: false,
          allowedInteractions: ["Resize"],
          isPrint: true
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

hyperlinkOpenState

LinkTarget

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        hyperlinkOpenState = 'NewTab'
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

initialDialogSettings

SignatureDialogSettingsModel

Get or set the signature dialog settings for initial field.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, DisplayMode } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Changes the initial dialog settings.
        initialDialogSettings = {{ 
          displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
          hideSaveSignature: true
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

initialFieldSettings

InitialFieldSettingsModel

Get or set the initial field settings.

initialRenderPages

number

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, AccessibilityTags, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Specifies the maximum number of pages that should be rendered on the document loading.
        initialRenderPages = 4
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner, AccessibilityTags]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

inkAnnotationSettings

InkAnnotationSettingsModel

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Changes the ink annotation settings.
        inkAnnotationSettings = {{
          author: "XYZ",
          opacity: 1,
          strokeColor: "#ff0000",
          thickness: 1,
          annotationSelectorSettings: {
            selectionBorderColor: "blue",
            resizerBorderColor: "black",
            resizerFillColor: "#FF4081",
            resizerSize: 8,
            selectionBorderThickness: 1,
            resizerShape: "Circle",
            selectorLineDashArray: [5, 6],
            resizerLocation:
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
            resizerCursorType: CursorType.grab
          },
          isLock: false,
          allowedInteractions: ["Resize"],
          isPrint: true
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

interactionMode

InteractionMode

Sets the interaction mode of the PDF Viewer.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the interaction mode.
        interactionMode = "Pan"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

isAnnotationToolbarOpen

boolean

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

isAnnotationToolbarVisible

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Show or hide the annotation tool bar.
        isAnnotationToolbarVisible = "true"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

isBookmarkPanelOpen

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Show or hide the bookmark panel.
        isBookmarkPanelOpen = "true"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

isCommandPanelOpen

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Show or hide the command panel.
        isCommandPanelOpen = "true"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

isDocumentEdited

boolean

Checks whether the PDF document is edited.

<body>
    <button onclick="doc()">Is Document Edited</button>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div> 
</body>

<script>
    function doc(){
        var viewer = document.getElementById('container').ej2_instances[0];	
        // Logs whether the PDF document is edited.
        console.log("Is the document edited - " + viewer.isDocumentEdited );
    }
 </script>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
      id="container" 
      documentPath="PDF_Succinctly.pdf"
      serviceUrl="https://localhost:44309/pdfviewer" 
      style={{ 'height': '680px' }} 
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

isExtractText

boolean

Enable or disable the text extract from the PDF viewer.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        isExtractText = "true"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

isFormDesignerToolbarVisible

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Show or hide form designer toolbar.
        isFormDesignerToolbarVisible = "true"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

isFormFieldDocument

boolean

Enable if the PDF document contains form fields.

<body>
    <button onclick="form()">Is Form Field Document</button>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

<script>
    function form(){
        var viewer = document.getElementById('container').ej2_instances[0];	
        // Logs the presence of form fields in a document.
        console.log("Is form fields exist in the document - " + viewer.isFormFieldDocument);
    }
 </script>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
      id="container" 
      documentPath="PDF_Succinctly.pdf"
      serviceUrl="https://localhost:44309/pdfviewer" 
      style={{ 'height': '680px' }} 
      
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

isMaintainSelection

boolean

Maintain the selection of text markup annotation.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        isMaintainSelection = "true"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

isSignatureEditable

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Enable or disable saving the hand written signature.
        isSignatureEditable = "true"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

isThumbnailViewOpen

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Show or hide the thumbnail view.
        isThumbnailViewOpen = "true"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

isValidFreeText

boolean

Checks if the freeText value is valid or not.

<body>
    <button onclick="validText()">Show is free text is valid or not</button>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

<script>
    function validText(){
        var viewer = document.getElementById('container').ej2_instances[0];	
        // Logs the freeText value is valid or not. 
        console.log("Is valid FreeText - " + viewer.isValidFreeText);
    }
 </script>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
      id="container" 
      documentPath="PDF_Succinctly.pdf"
      serviceUrl="https://localhost:44309/pdfviewer" 
      style={{ 'height': '680px' }} 
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

lineSettings

LineSettingsModel

Defines the settings of line annotation.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the line annotation settings.
        lineSettings = {{
          opacity: 1,
          color: "#9c2592",
          fillColor: '#ffffff00',
          strokeColor: '#ff0000',
          author: "XYZ",
          thickness: 1,
          borderDashArray: 1, 
          lineHeadStartStyle: 'None', 
          lineHeadEndStyle: 'None',
          annotationSelectorSettings: {
            selectionBorderColor: "blue",
            resizerBorderColor: "black",
            resizerFillColor: "#FF4081",
            resizerSize: 8,
            selectionBorderThickness: 1,
            resizerShape: "Square",
            selectorLineDashArray: [5, 6],
            resizerLocation:
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges, 
            resizerCursorType: CursorType.grab
          },
          minHeight: 10, 
          minWidth: 10, 
          maxWidth: 100, 
          maxHeight: 100, 
          isLock: false, 
          allowedInteractions: ['Resize'], 
          isPrint: true 
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

listBoxFieldSettings

ListBoxFieldSettingsModel

Get or set the listbox field settings.

locale

string

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

measurementSettings

MeasurementSettingsModel

Defines the settings of measurement annotation.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the measurement annotation settings.
        measurementSettings = {{ 
          conversionUnit: 'cm', 
          displayUnit: 'cm', 
          scaleRatio: 1, 
          depth: 96 
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

pageCount

number

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

<body>
    <button onclick="count()">Page Count</button>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

<script>
    function count(){
        var viewer = document.getElementById('container').ej2_instances[0];	
        console.log("Total page count = " + viewer.pageCount);
    }
 </script>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
      id="container" 
      documentPath="PDF_Succinctly.pdf"
      serviceUrl="https://localhost:44309/pdfviewer" 
      style={{ 'height': '680px' }} 
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

passwordFieldSettings

PasswordFieldSettingsModel

Get or set the password field settings.

perimeterSettings

PerimeterSettingsModel

Defines the settings of perimeter annotation.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the perimeter annotation settings.
        perimeterSettings = {{
          opacity: 1,
          fillColor: "#ffffff00",
          strokeColor: "#ff0000",
          author: "XYZ",
          thickness: 1,
          borderDashArray: 1,
          lineHeadStartStyle: "Open",
          lineHeadEndStyle: "Open",
          minHeight: 10,
          minWidth: 10,
          maxWidth: 100,
          maxHeight: 100,
          isLock: false,
          annotationSelectorSettings: {
            selectionBorderColor: "blue",
            resizerBorderColor: "black",
            resizerFillColor: "#4070ff",
            resizerSize: 8,
            selectionBorderThickness: 1,
            resizerShape: "Circle",
            selectorLineDashArray: [5, 6],
            resizerLocation:
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
            resizerCursorType: CursorType.grab
          },
          allowedInteractions: ["Resize"],
          isPrint: true
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

polygonSettings

PolygonSettingsModel

Defines the settings of polygon annotation.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the polygon annotation settings.
        polygonSettings = {{
          opacity: 1,
          fillColor: "#ffffff00",
          strokeColor: "#ff0000",
          author: "XYZ",
          thickness: 1,
          annotationSelectorSettings: {
            selectionBorderColor: "blue",
            resizerBorderColor: "black",
            resizerFillColor: "#FF4081",
            resizerSize: 8,
            selectionBorderThickness: 1,
            resizerShape: "Square",
            selectorLineDashArray: [5, 6],
            resizerLocation:
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
            resizerCursorType: CursorType.grab
          },
          minHeight: 10,
          minWidth: 10,
          maxWidth: 100,
          maxHeight: 100,
          isLock: false,
          allowedInteractions: ["Resize"],
          isPrint: true
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

printMode

PrintMode

Specifies the print mode in the PDF Viewer.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        printMode = "NewWindow"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

radioButtonFieldSettings

RadioButtonFieldSettingsModel

Get or set the radio button field settings.

radiusSettings

RadiusSettingsModel

Defines the settings of radius annotation.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the radius annotation settings.
        radiusSettings = {{
          opacity: 1,
          fillColor: "#ffffff00",
          strokeColor: "#ff0000",
          author: "XYZ",
          thickness: 1,
          annotationSelectorSettings: {
            selectionBorderColor: "blue",
            resizerBorderColor: "red",
            resizerFillColor: "#4070ff",
            resizerSize: 8,
            selectionBorderThickness: 1,
            resizerShape: "Circle",
            selectorLineDashArray: [5, 6],
            resizerLocation:
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
            resizerCursorType: CursorType.grab
          },
          minHeight: 10,
          minWidth: 10,
          maxWidth: 100,
          maxHeight: 100,
          isLock: false,
          allowedInteractions: ["Resize"],
          isPrint: true
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

rectangleSettings

RectangleSettingsModel

Defines the settings of rectangle annotation.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the rectangle annotation settings.
        rectangleSettings = {{
          opacity: 1,
          fillColor: "#9c2592",
          strokeColor: "#ff0000",
          author: "XYZ",
          thickness: 1,
          annotationSelectorSettings: {
            selectionBorderColor: "blue",
            resizerBorderColor: "black",
            resizerFillColor: "#FF4081",
            resizerSize: 8,
            selectionBorderThickness: 1,
            resizerShape: "Square",
            selectorLineDashArray: [5, 6],
            resizerLocation:
            AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
            resizerCursorType: CursorType.grab
          },
          minHeight: 10,
          minWidth: 10,
          maxWidth: 100,
          maxHeight: 100,
          isLock: false,
          allowedInteractions: ["Resize"],
          isPrint: true
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

resourceUrl

string

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
        resourceUrl="http://localhost:3000/ej2-pdfviewer-lib" 
        style={{ 'height': '680px' }} 
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

restrictZoomRequest

boolean

restrict zoom request.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        restrictZoomRequest = {true}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

retryCount

number

Specifies the retry count for the failed requests.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        retryCount = {3}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

retryStatusCodes

number[]

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the retry status code as 405, 503, etc;
        retryStatusCodes = {[500, 401, 400]}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

retryTimeout

number

Gets or sets the timeout for retries in seconds.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, AccessibilityTags, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        retryCount="5"
        retryTimeout="10"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner, AccessibilityTags]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

scrollSettings

ScrollSettingsModel

Defines the scroll settings.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the scroll settings.
        scrollSettings = {{ 
          delayPageRequestTimeOnScroll: 150 
      }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

selectedItems

SelectorModel

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

serverActionSettings

ServerActionSettingsModel

Defines the settings of the PDF Viewer service.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the server action settings.
        serverActionSettings = {{
          load: "Load",
          renderPages: "RenderPdfPages",
          unload: "Unload",
          download: "Download",
          renderThumbnail: "RenderThumbnailImages",
          print: "PrintImages",
          renderComments: "RenderAnnotationComments",
          importAnnotations: "ImportAnnotations",
          exportAnnotations: "ExportAnnotations",
          importFormFields: "ImportFormFields",
          exportFormFields: "ExportFormFields",
          renderTexts: "RenderPdfTexts"
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

serviceUrl

string

Defines the service url of the PdfViewer control.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

shapeLabelSettings

ShapeLabelSettingsModel

Defines the settings of shape label.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        enableShapeLabel = {true}
        // Change the shape label settings.
        shapeLabelSettings = {{ 
          opacity: 1, 
          fillColor: '#9c2592', 
          borderColor: '#ff0000', 
          fontColor: '#000', 
          fontSize: 16, 
          labelHeight: 24.6, 
          labelMaxWidth: 151, 
          labelContent: 'XYZ' 
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

showDigitalSignatureAppearance

boolean

Show or hide the digital signature appearance in the document.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Show or hide the appearence of digital signature.
        showDigitalSignatureAppearance = {false}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

showNotificationDialog

boolean

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

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        showNotificationDialog = {false}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

signatureDialogSettings

SignatureDialogSettingsModel

Get or set the signature dialog settings for signature field.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, DisplayMode } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the signature dialog settings.
        signatureDialogSettings = {{ 
          displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload, hideSaveSignature: true
        }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

signatureFieldSettings

SignatureFieldSettingsModel

Get or set the signature field settings.

signatureFitMode

SignatureFitMode

Specifies the signature mode in the PDF Viewer.

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>    
</body>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent 
        id="container" 
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://localhost:44309/pdfviewer" 
        style={{ 'height': '680px' }} 
        // Change the signature fit.
        signatureFitMode