|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Programmatic support for redaction in JavaScript PDF Viewer | Syncfusion |
| 4 | +description: Learn how to add, delete, update, and apply redaction annotations programmatically in the Syncfusion JavaScript (ES6/TypeScript) PDF Viewer. |
| 5 | +platform: document-processing |
| 6 | +control: PdfViewer |
| 7 | +documentation: ug |
| 8 | +--- |
| 9 | + |
| 10 | +# Programmatic support for redaction in JavaScript (ES6) PdfViewer |
| 11 | + |
| 12 | +The Syncfusion JavaScript PDF Viewer (EJ2) provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel. |
| 13 | + |
| 14 | +## Add redaction annotations programmatically |
| 15 | + |
| 16 | +You can add redaction annotations to a PDF document using the `addAnnotation` method of the `annotation` module. |
| 17 | + |
| 18 | +```html |
| 19 | + |
| 20 | +``` |
| 21 | + |
| 22 | +```ts |
| 23 | +document.getElementById('addRedactAnnot').addEventListener('click', () => { |
| 24 | + viewer.annotation.addAnnotation("Redaction", { |
| 25 | + bound: { x: 200, y: 480, width: 150, height: 75 }, |
| 26 | + pageNumber: 1, |
| 27 | + markerFillColor: '#0000FF', |
| 28 | + markerBorderColor: 'white', |
| 29 | + fillColor: 'red', |
| 30 | + overlayText: 'Confidential', |
| 31 | + fontColor: 'yellow', |
| 32 | + fontFamily: 'Times New Roman', |
| 33 | + fontSize: 8, |
| 34 | + beforeRedactionsApplied: false |
| 35 | + }); |
| 36 | +}); |
| 37 | +``` |
| 38 | + |
| 39 | +You can listen to the `annotationAdd` event to track when annotations are added: |
| 40 | + |
| 41 | +```ts |
| 42 | +viewer.annotationAdd = (args) => { |
| 43 | + console.log('Annotation added:', args); |
| 44 | +}; |
| 45 | +``` |
| 46 | + |
| 47 | +## Delete redaction annotations programmatically |
| 48 | + |
| 49 | +Redaction annotations can be removed using the `deleteAnnotationById` event or by selecting and deleting them through code. |
| 50 | + |
| 51 | +```html |
| 52 | + <button id="deleteAnnotationbyId">Delete Annotation By Id</button> |
| 53 | +``` |
| 54 | +```ts |
| 55 | +// Delete annotation by id |
| 56 | +document.getElementById('deleteAnnotationbyId').addEventListener('click', () => { |
| 57 | + viewer.annotationModule.deleteAnnotationById( |
| 58 | + viewer.annotationCollection[0].annotationId |
| 59 | + ); |
| 60 | + }); |
| 61 | +``` |
| 62 | + |
| 63 | +Alternatively, you can remove annotations by selecting them in the UI and pressing the **Delete** key. |
| 64 | + |
| 65 | +## Update redaction annotation properties programmatically |
| 66 | + |
| 67 | +You can update properties of an existing redaction annotation using the `editAnnotation` API. For example, to change overlay text or fill color: |
| 68 | + |
| 69 | +```html |
| 70 | +<button id="editRedactAnnotation">Edit Redact Annotation</button> |
| 71 | +``` |
| 72 | +```ts |
| 73 | +let editRedactAnnotation = document.getElementById('editRedactAnnotation'); |
| 74 | +if (editRedactAnnotation) { |
| 75 | +editRedactAnnotation.addEventListener('click', function () { |
| 76 | + if (viewer) { |
| 77 | + for (let i = 0; i < viewer.annotationCollection.length; i++) { |
| 78 | + if (viewer.annotationCollection[i].subject === "Redaction") { |
| 79 | + viewer.annotationCollection[i].overlayText= 'EditedAnnotation', |
| 80 | + viewer.annotationCollection[i].markerFillColor= '#22FF00', |
| 81 | + viewer.annotationCollection[i].markerBorderColor= '#000000', |
| 82 | + viewer.annotationCollection[i].isRepeat= true, |
| 83 | + viewer.annotationCollection[i].fillColor= '#F8F8F8', |
| 84 | + viewer.annotationCollection[i].fontColor= '#333333', |
| 85 | + viewer.annotationCollection[i].fontSize= 14, |
| 86 | + viewer.annotationCollection[i].fontFamily= 'Symbol', |
| 87 | + viewer.annotationCollection[i].textAlign= 'Right' |
| 88 | + viewer.annotationCollection[i].beforeRedactionsApplied= false |
| 89 | + viewer.annotation.editAnnotation(viewer.annotationCollection[i]); |
| 90 | + } |
| 91 | + } |
| 92 | + } |
| 93 | +}); |
| 94 | +} |
| 95 | +``` |
| 96 | + |
| 97 | +## Add page redactions programmatically |
| 98 | + |
| 99 | +Entire pages can be marked for redaction using the `addPageRedactions` method: |
| 100 | + |
| 101 | +```html |
| 102 | + <button id="addPageRedactions">Add Page Redaction</button> |
| 103 | +``` |
| 104 | +```ts |
| 105 | +document.getElementById('addPageRedactions').addEventListener('click', () => { |
| 106 | + viewer.annotation.addPageRedactions([1, 3, 5, 7]); // Redacts pages 1, 3, 5, and 7 |
| 107 | +}); |
| 108 | +``` |
| 109 | + |
| 110 | +## Apply redaction programmatically |
| 111 | + |
| 112 | +Once annotations are added, you can permanently apply them to the document using the `redact` method: |
| 113 | + |
| 114 | +```html |
| 115 | + <button id="redact">Apply Redaction</button> |
| 116 | +``` |
| 117 | +```ts |
| 118 | +document.getElementById('redact').addEventListener('click', () => { |
| 119 | + viewer.annotation.redact(); |
| 120 | +}); |
| 121 | +``` |
| 122 | + |
| 123 | +N> Applying redaction is irreversible. Once applied, the original content cannot be recovered. |
| 124 | + |
| 125 | +## Configure default redaction annotation properties |
| 126 | + |
| 127 | +You can configure default properties for redaction annotations (such as fill color, overlay text, and font) when adding them programmatically: |
| 128 | + |
| 129 | +```ts |
| 130 | +viewer.redactionSettings= { |
| 131 | + overlayText: 'Confidential', |
| 132 | + markerFillColor: '#FF0000', |
| 133 | + markerBorderColor: '#000000', |
| 134 | + isRepeat: false, |
| 135 | + fillColor: '#F8F8F8', |
| 136 | + fontColor: '#333333', |
| 137 | + fontSize: 14, |
| 138 | + fontFamily: 'Symbol', |
| 139 | + textAlign: 'Right' |
| 140 | + }; |
| 141 | +``` |
| 142 | + |
| 143 | +## Redaction property panel |
| 144 | + |
| 145 | +The redaction property panel allows users to update annotation properties through the UI. Programmatically, you can invoke the property panel by selecting an annotation and calling the relevant APIs. Properties such as overlay text, font style, and fill color can be updated directly in the panel. |
| 146 | + |
| 147 | + |
| 148 | + |
| 149 | +## See also |
| 150 | + |
| 151 | +* [Overview of Redaction](./overview) |
| 152 | +* [Redaction UI interactions](./ui-interaction) |
| 153 | +* [Programmatic support](./programmatic-support) |
| 154 | +* [Redaction Toolbar](./toolbar) |
| 155 | +* [Reaction in Mobile view](./mobile-view) |
| 156 | +* [Events](./events) |
0 commit comments