`Represents the react PdfViewer Component.
<PdfViewerComponent />Get or set the dropdown field settings.
Gets the Accessibility Tags object of the pdf viewer.
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 />);Gets the annotation object of the pdf viewer.
any[]
Get the Loaded document annotation Collections in the PdfViewer control.
<body>
<button onclick="annot()">Annotation collection</button>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
<script>
function annot(){
var viewer = document.getElementById('container').ej2_instances[0];
// Logs the annotation collection.
console.log(viewer.annotationCollection);
}
</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 />); 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 />);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 />);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 />);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 />);Gets the bookmark view object of the pdf viewer.
Get or set the check box field settings.
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 />);Defines a set of custom commands and binds them with a set of desired key gestures.
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
<script>
function keyboardCustomCommands(args) {
}
</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, PdfKeys, ModifierKeys, 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"
documentLoad = {this.documentLoaded}
style={{ 'height': '680px' }}
commandManager = {{
keyboardCommand: [{
name: 'customCopy',
gesture: {
pdfKeys: PdfKeys.G,
modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt
}
},
{
name: 'customPaste',
gesture: {
pdfKeys: PdfKeys.H,
modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt
}
}]
}}
>
<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 />);Defaults to {}
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 />);Defaults to RightClick
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 />); 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 />);Defaults to 0
string[]
Specifies a collection of font names as strings. These fonts must be located in the resourceUrl folder.
Defaults to []
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 />);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 />); 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 />); 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 />);Defaults to false
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 />);Defaults to []
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 />); 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 />); 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 />); 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 />);Defaults to true
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 />);Defaults to true
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 />);Defaults to true
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 />);Defaults to true
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 />);Defaults to true
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 />);Defaults to false
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 />);Defaults to true
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 />);Defaults to false
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 />);Defaults to true
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 />);Defaults to true
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 />);Defaults to true
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 />);Defaults to true
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 />);Defaults to false
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 />);Defaults to true
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 />);Defaults to true
boolean
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 />);Defaults to true
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 />);Defaults to true
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 />);Defaults to true
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 />);Defaults to true
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 />);Defaults to true
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 />);Defaults to false
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 />);Defaults to false
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 />);Defaults to true
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 />);Defaults to true
boolean
Enable or disable the page organizer 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, PageOrganizer, 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' }}
enablePageOrganizer = "false"
>
<Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]} />
</PdfViewerComponent>
</div>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);Defaults to true
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
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 />);Defaults to true
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 />);Defaults to true
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 />);Defaults to true
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
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 />);Defaults to true
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 />);Defaults to false
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 />);Defaults to true
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 />);Defaults to true
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 />);Defaults to true
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 />);Defaults to false
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 />);Defaults to true
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 />);Defaults to true
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 />);Defaults to true
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 />);Defaults to true
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 />);Defaults to true
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 />); string
Gets or sets the document name loaded in the PdfViewer control.
<body>
<button onclick="file()">File Name</button>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
<script>
function file(){
var viewer = document.getElementById('container').ej2_instances[0];
// Logs the loaded PDF file name.
console.log("File name - " + viewer.fileName);
}
</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 />);Gets the FormDesigner object of the pdf viewer.
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 />);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 />); 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 />); 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 />);Defaults to ‘auto’
boolean
Gets or sets a boolean value to show or hide the save signature check box option in the signature dialog. FALSE by default
Defaults to false
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 />);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 />);Defaults to CurrentTab
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 />);Get or set the initial field 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, DisplayMode } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
return (<div>
<div className='control-section'>
<PdfViewerComponent
id="container"
documentPath="PDF_Succinctly.pdf"
style={{ 'height': '680px' }}
initialFieldSettings.typeSignatureFonts=['Allura', 'Tangerine', 'Sacramento', 'Inspiration']
>
<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 />); 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 />);Defaults to 2
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 />);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 />);Defaults to TextSelection
boolean
Opens the annotation toolbar when the PDF document is loaded in the PDF Viewer control initially.
Defaults to false
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 />);Defaults to false
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 />);Defaults to false
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 />);Defaults to false
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 />); 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 />);Defaults to false
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 />);Defaults to false
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 />);Defaults to false
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 />);Defaults to false
boolean
Specifies whether the page organizer dialog will be displayed upon the 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, PageOrganizer, 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.
isPageOrganizerOpen = "true"
>
<Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]} />
</PdfViewerComponent>
</div>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);Defaults to false
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 />);Defaults to false
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 />);Defaults to false
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 />);Defaults to false
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 />);Get or set the listbox field settings.
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
Gets the magnification object of the pdf viewer.
number
Specifies the maximum allowable zoom level for the control, with a default value of 400.
<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 maximum zoom value.
maxZoom = {270}
>
<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 />);Defaults to 400
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 />); number
Specifies the minimum acceptable zoom level for the control, with a default value of 10.
<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 minimum zoom value.
minZoom = {45}
>
<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 />);Defaults to 10
Gets the navigation object of the pdf viewer.
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 />);Defaults to 0
Gets the page organizer object of the PDF Viewer.
This property allows for control over various page management functionalities within the PDF Viewer. By setting it to true, users will be able to delete, insert, rotate pages, rearrange pages. Conversely, setting it to false will disable these actions.
<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, PageOrganizer, 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 page organizer settings.
pageOrganizerSettings = {{
canInsert: true,
canRotate: false,
canDelete: true,
canCopy: true,
canRearrange: true,
canImport: true
}}
>
<Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]} />
</PdfViewerComponent>
</div>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);Get or set the password field settings.
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 />);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 />);Gets the print object of the pdf viewer.
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 />);Defaults to Default
number
Specifies the document printing quality. The default printing quality is set to 1.0. This limit varies from 0.5 to 5.0. If an invalid value is specified, the default value of 1.0 will be used. For documents with smaller page dimensions, a higher print quality is recommended. {% codeBlock src=‘pdfviewer/printScaleFactor/index.md’ %}{% endBlock %}
Defaults to 1.0
Get or set the radio button field settings.
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 />);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 />); 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 />);Defaults to ”
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 />);Defaults to false
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 />);Defaults to 1
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 />);Defaults to [500]
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 />);Defaults to 0
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 />);Defines the collection of selected items, size and position of the selector
Defaults to {}
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 />); 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 />);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 />); 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 = {