|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Annotations Permission in React PDF Viewer | Syncfusion |
| 4 | +description: Learn here all about how to use annotation permissions in Syncfusion React PDF Viewer using programmatic APIs. |
| 5 | +platform: document-processing |
| 6 | +control: PDF Viewer |
| 7 | +documentation: ug |
| 8 | +domainurl: ##DomainURL## |
| 9 | +--- |
| 10 | + |
| 11 | +# Annotation permissions in React |
| 12 | + |
| 13 | +Use [annotationSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotationsettings) to control creation-time permissions and default behavior for annotations in the PDF Viewer. These settings establish defaults for annotations created through the UI and programmatic flows. |
| 14 | + |
| 15 | +## Common permissions |
| 16 | + |
| 17 | +- `isLock`: Lock an annotation so it cannot be moved, resized, edited, or deleted. |
| 18 | +- `skipPrint`: Exclude annotations from the print output when printing from the viewer. |
| 19 | +- `skipDownload`: Exclude annotations from the exported/downloaded PDF. |
| 20 | + |
| 21 | +Example: set default `annotationSettings` as a JSX prop on `PdfViewerComponent`. |
| 22 | + |
| 23 | +{% tabs %} |
| 24 | +{% highlight js tabtitle="Standalone" %} |
| 25 | +{% raw %} |
| 26 | +import * as React from 'react'; |
| 27 | +import * as ReactDOM from 'react-dom/client'; |
| 28 | +import { |
| 29 | + PdfViewerComponent, Inject, |
| 30 | + Toolbar, Annotation, TextSelection, |
| 31 | + AllowedInteraction |
| 32 | +} from '@syncfusion/ej2-react-pdfviewer'; |
| 33 | + |
| 34 | +function App() { |
| 35 | + return ( |
| 36 | + <PdfViewerComponent |
| 37 | + id="container" |
| 38 | + documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" |
| 39 | + resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" |
| 40 | + style={{ height: '650px' }} |
| 41 | + annotationSettings={{ |
| 42 | + author: 'XYZ', |
| 43 | + minHeight: 10, |
| 44 | + minWidth: 10, |
| 45 | + maxWidth: 100, |
| 46 | + maxHeight: 100, |
| 47 | + isLock: false, // allow moving/resizing/editing by default |
| 48 | + skipPrint: false, // include annotations when printing the document |
| 49 | + skipDownload: false, // include annotations when downloading/exporting the document |
| 50 | + allowedInteractions: [AllowedInteraction.Resize] |
| 51 | + }} |
| 52 | + > |
| 53 | + <Inject services={[Toolbar, Annotation, TextSelection]} /> |
| 54 | + </PdfViewerComponent> |
| 55 | + ); |
| 56 | +} |
| 57 | + |
| 58 | +ReactDOM.createRoot(document.getElementById('sample')).render(<App />); |
| 59 | +{% endraw %} |
| 60 | +{% endhighlight %} |
| 61 | +{% endtabs %} |
| 62 | + |
| 63 | +## Individual permissions |
| 64 | + |
| 65 | +- `isPrint`: Controls whether a specific annotation participates in printing. Set to `false` to exclude only that annotation from print output. |
| 66 | +- `isLock`: Lock or unlock a specific annotation instance programmatically. |
| 67 | + |
| 68 | +Example: set per-annotation defaults for text markup, shapes, and measurements as JSX props. |
| 69 | + |
| 70 | +{% tabs %} |
| 71 | +{% highlight js tabtitle="Standalone" %} |
| 72 | +{% raw %} |
| 73 | +import * as React from 'react'; |
| 74 | +import * as ReactDOM from 'react-dom/client'; |
| 75 | +import { |
| 76 | + PdfViewerComponent, Inject, |
| 77 | + Toolbar, Annotation, TextSelection |
| 78 | +} from '@syncfusion/ej2-react-pdfviewer'; |
| 79 | + |
| 80 | +function App() { |
| 81 | + return ( |
| 82 | + <PdfViewerComponent |
| 83 | + id="container" |
| 84 | + documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" |
| 85 | + resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" |
| 86 | + style={{ height: '650px' }} |
| 87 | + |
| 88 | + // Text markup defaults |
| 89 | + highlightSettings={{ author: 'QA', subject: 'Review', color: '#ffff00', opacity: 0.6 }} |
| 90 | + strikethroughSettings={{ author: 'QA', subject: 'Remove', color: '#ff0000', opacity: 0.6 }} |
| 91 | + underlineSettings={{ author: 'Guest User', subject: 'Points to be remembered', color: '#00ffff', opacity: 0.9 }} |
| 92 | + squigglySettings={{ author: 'Guest User', subject: 'Corrections', color: '#00ff00', opacity: 0.9 }} |
| 93 | + |
| 94 | + // Shapes |
| 95 | + lineSettings={{ strokeColor: '#0066ff', thickness: 2, opacity: 0.8, isLock: false, isPrint: true }} |
| 96 | + arrowSettings={{ strokeColor: '#0066ff', thickness: 2, opacity: 0.8, isLock: false, isPrint: true }} |
| 97 | + rectangleSettings={{ fillColor: '#ffffff00', strokeColor: '#222222', thickness: 1, opacity: 1, isLock: false, isPrint: true }} |
| 98 | + circleSettings={{ fillColor: '#ffffff00', strokeColor: '#222222', thickness: 1, opacity: 1, isLock: false, isPrint: true }} |
| 99 | + polygonSettings={{ fillColor: '#ffffff00', strokeColor: '#222222', thickness: 1, opacity: 1, isLock: false, isPrint: true }} |
| 100 | + |
| 101 | + // Measurements |
| 102 | + distanceSettings={{ strokeColor: '#0066ff', thickness: 2, opacity: 0.8, isLock: false, isPrint: true }} |
| 103 | + perimeterSettings={{ strokeColor: '#0066ff', thickness: 2, opacity: 0.8, isLock: false, isPrint: true }} |
| 104 | + areaSettings={{ strokeColor: '#0066ff', thickness: 2, opacity: 0.8, fillColor: '#ffffff00', isLock: false, isPrint: true }} |
| 105 | + radiusSettings={{ strokeColor: '#0066ff', thickness: 2, opacity: 0.8, fillColor: '#ffffff00', isLock: false, isPrint: true }} |
| 106 | + volumeSettings={{ strokeColor: '#0066ff', thickness: 2, opacity: 0.8, fillColor: '#ffffff00', isLock: false, isPrint: true }} |
| 107 | + |
| 108 | + // Others |
| 109 | + freeTextSettings={{ borderColor: '#222222', opacity: 1, isLock: false, isPrint: true }} |
| 110 | + inkAnnotationSettings={{ strokeColor: '#0000ff', thickness: 3, opacity: 0.8, isLock: false, isPrint: true }} |
| 111 | + stampSettings={{ opacity: 0.9, isLock: false, isPrint: true }} |
| 112 | + stickyNotesSettings={{ author: 'QA', subject: 'Review', opacity: 1, isLock: false, isPrint: true }} |
| 113 | + > |
| 114 | + <Inject services={[Toolbar, Annotation, TextSelection]} /> |
| 115 | + </PdfViewerComponent> |
| 116 | + ); |
| 117 | +} |
| 118 | + |
| 119 | +ReactDOM.createRoot(document.getElementById('sample')).render(<App />); |
| 120 | +{% endraw %} |
| 121 | +{% endhighlight %} |
| 122 | +{% endtabs %} |
| 123 | + |
| 124 | +Behavior notes |
| 125 | +- isLock true: The annotation is locked; users cannot move, resize, or edit it through the UI until it is unlocked. |
| 126 | +- skipPrint true: All annotations are omitted from the print output initiated from the viewer. |
| 127 | +- skipDownload true: All annotations are omitted from the exported/downloaded PDF from the viewer. |
| 128 | +- isPrint on an individual annotation: Use this when you only want to exclude a particular annotation from printing while leaving others printable. |
| 129 | + |
| 130 | +[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples) |
| 131 | + |
| 132 | +## See also |
| 133 | + |
| 134 | +- [Annotation Overview](../overview) |
| 135 | +- [Annotation Types](../annotation/annotation-types/area-annotation) |
| 136 | +- [Annotation Toolbar](../toolbar-customization/annotation-toolbar) |
| 137 | +- [Create and Modify Annotation](../annotation/create-modify-annotation) |
| 138 | +- [Customize Annotation](../annotation/customize-annotation) |
| 139 | +- [Remove Annotation](../annotation/delete-annotation) |
| 140 | +- [Handwritten Signature](../annotation/signature-annotation) |
| 141 | +- [Export and Import Annotation](../annotation/export-import/export-annotation) |
| 142 | +- [Annotation in Mobile View](../annotation/annotations-in-mobile-view) |
| 143 | +- [Annotation Events](../annotation/annotation-event) |
| 144 | +- [Annotation API](../annotation/annotations-api) |
0 commit comments