|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Programmatic redaction in Blazor SfPdfViewer | Syncfusion |
| 4 | +description: Learn how to add, edit, delete, and apply redaction annotations programmatically in the Syncfusion Blazor SfPdfViewer component. |
| 5 | +platform: document-processing |
| 6 | +control: SfPdfViewer |
| 7 | +documentation: ug |
| 8 | +--- |
| 9 | + |
| 10 | +# Programmatic Support for Redaction in Blazor PDF Viewer |
| 11 | + |
| 12 | +## Add redaction annotations programmatically |
| 13 | + |
| 14 | +Use the [`AddAnnotationAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_PdfViewer_SfPdfViewer2_AddAnnotationAsync_Syncfusion_Blazor_PdfViewer_PdfAnnotation_) method to add a redaction annotation by creating a [`PdfAnnotation`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PdfViewer.PdfAnnotation.html) instance. Configure redaction-specific settings with [`RedactionProperties`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PdfViewer.RedactionProperties.html). |
| 15 | + |
| 16 | +The example below creates a redaction annotation with custom appearance, redaction options, and position on the first page. |
| 17 | + |
| 18 | +```cshtml |
| 19 | +@page "/" |
| 20 | +
|
| 21 | +<SfButton OnClick="AddRedactionAnnotation">Add Redaction Annotation</SfButton> |
| 22 | +<SfPdfViewer2 @ref="SfPdfViewer2" DocumentPath="@DocumentPath" Height="800px" Width="100%"> |
| 23 | +</SfPdfViewer2> |
| 24 | +
|
| 25 | +@code{ |
| 26 | +
|
| 27 | + private string DocumentPath { get; set; } = "wwwroot/data/Annotations.pdf"; |
| 28 | + private SfPdfViewer2? SfPdfViewer2; |
| 29 | +
|
| 30 | + // Adds a redaction annotation to the first page of the PDF Viewer |
| 31 | + private async void AddRedactionAnnotation() |
| 32 | + { |
| 33 | + // Create a redaction annotation with custom appearance and properties |
| 34 | + PdfAnnotation annotation = new PdfAnnotation() |
| 35 | + { |
| 36 | + Id = "redaction_Annotation", |
| 37 | + FontSize = 20, |
| 38 | + Bound = new Bound() |
| 39 | + { |
| 40 | + X = 200, |
| 41 | + Y = 80, |
| 42 | + Width = 150, |
| 43 | + Height = 75 |
| 44 | + }, |
| 45 | + PageNumber = 0, |
| 46 | +
|
| 47 | + // Configure redaction-specific properties |
| 48 | + AnnotationProperties = new RedactionProperties() |
| 49 | + { |
| 50 | + MarkerFillColor = "#FF00FF", |
| 51 | + MarkerOpacity = 0.5, |
| 52 | + MarkerBorderColor = "#233A77", |
| 53 | + OverlayText = "Hello", |
| 54 | + IsRepeat = false |
| 55 | + }, |
| 56 | +
|
| 57 | + // Set the font and fill style |
| 58 | + FontColor = "#0000FF", |
| 59 | + FontFamily = "Courier", |
| 60 | + FillColor = "#EEEEEE", |
| 61 | +
|
| 62 | + // Specify the annotation type |
| 63 | + Type = AnnotationType.Redaction |
| 64 | + }; |
| 65 | +
|
| 66 | + // Add the annotation to the PDF Viewer |
| 67 | + await SfPdfViewer2.AddAnnotationAsync(annotation); |
| 68 | + } |
| 69 | +} |
| 70 | +``` |
| 71 | + |
| 72 | + |
| 73 | + |
| 74 | +The `RedactionProperties` settings control the annotation’s appearance and behavior: `MarkerFillColor` (overlay color), `MarkerOpacity` (0–1), `MarkerBorderColor` (border color), `OverlayText` (text over the redacted area), and `IsRepeat` (repeat overlay text across the area). |
| 75 | + |
| 76 | +## Delete redaction annotations programmatically |
| 77 | + |
| 78 | +Delete redaction annotations programmatically using the [`DeleteAnnotationAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DeleteAnnotationsAsync) method by passing the annotation ID or object reference. |
| 79 | + |
| 80 | +For additional examples, see [Delete annotation programmatically](./text-markup-annotation#delete-annotation-programmatically). |
| 81 | + |
| 82 | +## Update redaction annotation properties programmatically |
| 83 | + |
| 84 | +To update an existing redaction annotation, first retrieve it using [`GetAnnotationsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_PdfViewer_SfPdfViewer2_GetAnnotationsAsync), then modify the required properties and apply the changes using [`EditAnnotationAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_PdfViewer_SfPdfViewer2_EditAnnotationAsync_Syncfusion_Blazor_PdfViewer_PdfAnnotation_). |
| 85 | + |
| 86 | +The following example retrieves an existing redaction annotation, updates properties such as overlay text, colors, and opacity along with general appearance settings, and then applies the changes using [`EditAnnotationAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_PdfViewer_SfPdfViewer2_EditAnnotationAsync_Syncfusion_Blazor_PdfViewer_PdfAnnotation_). |
| 87 | + |
| 88 | +```cshtml |
| 89 | +@page "/" |
| 90 | +
|
| 91 | +<SfButton OnClick="EditRedaction">Edit Redaction</SfButton> |
| 92 | +
|
| 93 | +<SfPdfViewer2 @ref="SfPdfViewer2" DocumentPath="@DocumentPath" Height="800px" Width="100%"> |
| 94 | +</SfPdfViewer2> |
| 95 | +
|
| 96 | +@code{ |
| 97 | + private string DocumentPath { get; set; } = "wwwroot/data/Annotations.pdf"; |
| 98 | + private SfPdfViewer2? SfPdfViewer2; |
| 99 | + // Updates the first redaction annotation's properties in the PDF Viewer |
| 100 | + private async void EditRedaction() |
| 101 | + { |
| 102 | + // Retrieve all annotations from the viewer |
| 103 | + List<PdfAnnotation> annotations = await SfPdfViewer2.GetAnnotationsAsync(); |
| 104 | +
|
| 105 | + // Get the first annotation to update |
| 106 | + PdfAnnotation annotation = annotations[0]; |
| 107 | +
|
| 108 | + // Check if the annotation is a redaction type and update redaction-specific properties |
| 109 | + if (annotation.AnnotationProperties is RedactionProperties redaction) |
| 110 | + { |
| 111 | + redaction.OverlayText = "Updated Text"; |
| 112 | + redaction.MarkerFillColor = "#9bc7b8"; |
| 113 | + redaction.MarkerBorderColor = "#888f8c"; |
| 114 | + redaction.IsRepeat = true; |
| 115 | + redaction.MarkerOpacity = 0.2; |
| 116 | + } |
| 117 | +
|
| 118 | + // Update general annotation properties |
| 119 | + annotation.FontSize = 15; |
| 120 | + annotation.FontColor = "Yellow"; |
| 121 | + annotation.TextAlignment = TextAlignment.Left; |
| 122 | +
|
| 123 | + // Apply the changes to the annotation in the viewer |
| 124 | + await SfPdfViewer2.EditAnnotationAsync(annotation); |
| 125 | + } |
| 126 | +} |
| 127 | +``` |
| 128 | + |
| 129 | + |
| 130 | + |
| 131 | +## Add page redactions programmatically |
| 132 | + |
| 133 | +Entire pages can be marked for redaction using the [`AddPageRedactionsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_PdfViewer_SfPdfViewer2_AddPageRedactionsAsync_System_Collections_Generic_List_System_Int32__) method. |
| 134 | + |
| 135 | +This is useful when the full page contains confidential data. |
| 136 | + |
| 137 | +The following example adds redaction annotations to specific pages in a PDF using 0-based page indexes. Here, redaction is applied to the first and third pages. |
| 138 | + |
| 139 | +```cshtml |
| 140 | +@page "/" |
| 141 | +
|
| 142 | +<SfButton OnClick="RedactPages">Add Redact Pages</SfButton> |
| 143 | +
|
| 144 | +<SfPdfViewer2 @ref="SfPdfViewer2" DocumentPath="@DocumentPath" Height="800px" Width="100%"> |
| 145 | +</SfPdfViewer2> |
| 146 | +
|
| 147 | +@code{ |
| 148 | +
|
| 149 | + private string DocumentPath { get; set; } = "wwwroot/data/Annotations.pdf"; |
| 150 | +
|
| 151 | + private SfPdfViewer2? SfPdfViewer2; |
| 152 | +
|
| 153 | + // Adds redaction annotations to entire pages using 0-based page indexes. |
| 154 | + // In this example, redaction is applied to the first (0) and third (2) pages. |
| 155 | + private async void RedactPages() |
| 156 | + { |
| 157 | + List<int> pagesToRedact = new() { 0, 2 }; // Page indexes start from 0 |
| 158 | + await SfPdfViewer2.AddPageRedactionsAsync(pagesToRedact); |
| 159 | + } |
| 160 | +
|
| 161 | +} |
| 162 | +``` |
| 163 | + |
| 164 | + |
| 165 | + |
| 166 | +## Apply redaction programmatically |
| 167 | + |
| 168 | +Use the [`RedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_PdfViewer_SfPdfViewer2_RedactAsync) method to apply all redaction annotations. |
| 169 | + |
| 170 | +Note: Applying redaction is permanent and cannot be undone. Consider saving a copy of the document before applying redaction. |
| 171 | + |
| 172 | +```cshtml |
| 173 | +@page "/" |
| 174 | +
|
| 175 | +<SfButton OnClick="ApplyRedaction">Apply Redaction</SfButton> |
| 176 | +
|
| 177 | +<SfPdfViewer2 @ref="SfPdfViewer2" DocumentPath="@DocumentPath" Height="800px" Width="100%"> |
| 178 | +</SfPdfViewer2> |
| 179 | +
|
| 180 | +@code{ |
| 181 | + private string DocumentPath { get; set; } = "wwwroot/data/Annotations.pdf"; |
| 182 | + private SfPdfViewer2? SfPdfViewer2; |
| 183 | +
|
| 184 | + // Applies all redaction annotations permanently |
| 185 | + private async void ApplyRedaction() |
| 186 | + { |
| 187 | + await SfPdfViewer2.RedactAsync(); |
| 188 | + } |
| 189 | +} |
| 190 | +``` |
| 191 | + |
| 192 | + |
| 193 | + |
| 194 | +## Configure default redaction annotation properties |
| 195 | + |
| 196 | +Use [`PdfViewerRedactionSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PdfViewer.PdfViewerRedactionSettings.html) inside the viewer to set default redaction properties for newly created annotations, including fill color, overlay text, font style, and alignment. |
| 197 | + |
| 198 | +These defaults apply to newly added annotations created from the toolbar unless overridden. |
| 199 | + |
| 200 | +The following example shows how to set default properties for redaction annotations using [`PdfViewerRedactionSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PdfViewer.PdfViewerRedactionSettings.html). |
| 201 | + |
| 202 | +```cshtml |
| 203 | +@* |
| 204 | + This component demonstrates how to configure default redaction annotation settings |
| 205 | + in the Syncfusion Blazor PDF Viewer. |
| 206 | +*@ |
| 207 | +<SfPdfViewer2 @ref="SfPdfViewer2" DocumentPath="@DocumentPath" Height="800px" Width="100%"> |
| 208 | + <PdfViewerRedactionSettings OverlayText="Confidential" |
| 209 | + MarkerFillColor="#FF0000" |
| 210 | + MarkerBorderColor="#000000" |
| 211 | + IsRepeat="false" |
| 212 | + FillColor="#F8F8F8" |
| 213 | + FontColor="#333333" |
| 214 | + FontSize="14" |
| 215 | + FontFamily="Symbol" |
| 216 | + TextAlignment="TextAlignment.Right" /> |
| 217 | + <PdfViewerToolbarSettings ToolbarItems="ToolbarItems" MobileToolbarItems="MobileToolbarItems"></PdfViewerToolbarSettings> |
| 218 | +</SfPdfViewer2> |
| 219 | +``` |
| 220 | + |
| 221 | +## Redaction property panel |
| 222 | + |
| 223 | +When no annotation is selected, the property panel displays default values from [`PdfViewerRedactionSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PdfViewer.PdfViewerRedactionSettings.html). When a redaction is selected, it shows the selected annotation’s properties. |
| 224 | + |
| 225 | +Use the panel to update overlay text, font settings, opacity, and related options. |
| 226 | + |
| 227 | + |
| 228 | + |
| 229 | +## See also |
| 230 | + |
| 231 | +* [Overview of redaction](./overview) |
| 232 | +* [Interact with redaction using the UI](./ui-interactions) |
| 233 | +* [Redaction in mobile view](./redaction-in-mobileView) |
0 commit comments