The PDF Viewer control provides the options to add, edit, and delete the sticky note annotations in the PDF document.
Sticky note annotations can be added to the PDF document using the annotation toolbar.
Annotation comments can be added to the PDF document using the comment panel.
The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
The comment, comment reply, and comment status of the annotation can be edited using the Comment Panel.
You can modify or delete the comments or comments replay and it’s status using the menu option provided in the comment panel.
The properties of the sticky note annotation can be set before creating the control using the StickyNoteSettings.
After editing the default opacity using the Edit Opacity tool, they will be changed to the selected values. Refer to the following code sample to set the default sticky note annotation settings.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
export class App extends React.Component {
render() {
return (
<div>
<div className='control-section'>
<PdfViewerComponent ref={(scope) => { this.viewer = scope; }}
id="container"
documentPath="PDF_Succinctly.pdf"
serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"
stickyNotesSettings={{author: 'Syncfusion'}}
style={{ 'height': '640px' }}>
<Inject services={[ Toolbar, Annotation, Magnification, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, TextSearch]}/>
</PdfViewerComponent>
</div>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
export class App extends React.Component {
render() {
return (<div>
<div className='control-section'>
<PdfViewerComponent ref={(scope) => { this.viewer = scope; }} id="container" documentPath="PDF_Succinctly.pdf" serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer" stickyNotesSettings={{ author: 'Syncfusion' }} style={{ 'height': '640px' }}>
<Inject services={[Toolbar, Annotation, Magnification, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, TextSearch]}/>
</PdfViewerComponent>
</div>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));
The PDF Viewer control provides an option to disable the sticky note annotations feature. The code sample for disabling the feature is as follows.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
export class App extends React.Component {
render() {
return (
<div>
<div className='control-section'>
<PdfViewerComponent ref={(scope) => { this.viewer = scope; }}
id="container"
documentPath="PDF_Succinctly.pdf"
serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"
enableStickyNotesAnnotation={false}
style={{ 'height': '640px' }}>
<Inject services={[ Toolbar, Annotation, Magnification, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, TextSearch]}/>
</PdfViewerComponent>
</div>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
export class App extends React.Component {
render() {
return (<div>
<div className='control-section'>
<PdfViewerComponent ref={(scope) => { this.viewer = scope; }} id="container" documentPath="PDF_Succinctly.pdf" serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer" enableStickyNotesAnnotation={false} style={{ 'height': '640px' }}>
<Inject services={[Toolbar, Annotation, Magnification, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, TextSearch]}/>
</PdfViewerComponent>
</div>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));