Blazor Pdf Viewer doesn't render transparent redaction annotations

[Peter-Nicholas Sarateanu]

Hi,

I am working on a solution to automate redactions in PDF documents.

I am currently using Pdf.Net.Core to extract text, identify areas subject to redactions, and apply annotations.

So far this works well, but the problem arises when we try to display the changes in Blazor’s SfPdfViewer2.

The issue is with styling:

• What I want is transparent fill with red border, and black fill with red overlay text and border on hover (exactly like Adobe Acrobat).

• In Blazor, however, the redaction fill is always opaque — I cannot achieve transparency.

Attempts I’ve made:

1. I tried separating responsibilities: Pdf.Net.Core returns the RectangleF bounds, and then I use Blazor’s AddAnnotationAsync with those coordinates. But the coordinates are completely misaligned, and I don’t understand why.

2. I also tried moving to WPF, but Pdf.Net.Core and WPF don’t seem to integrate properly when it comes to annotations.

Question: Is there any way to continue using Pdf.Net.Core (because it offers excellent PDF manipulation methods) while still being able to replicate Adobe’s exact redaction styling (transparent preview, hover overlay, etc.) within Blazor/WPF/other Syncfusion viewers?

Any guidance on whether this is a limitation of the rendering engine, or if there are specific APIs I should be using to achieve transparency and hover styling, would be greatly appreciated.

Thanks in advance!

[Venkada Subramanian Durai]

 Hi Peter-Nicholas Sarateanu,

Thank you for your patience. We have prepared a sample based on your requirements using the Syncfusion Blazor PDF Viewer. In this sample, we retrieved the text bounds of the search term using the PDF Library (Pdf.Net.Core) and used those bounds to programmatically add a redaction annotation in the PDF Viewer. The annotation has a transparent fill color with a red border, and when hovered over, it displays a black fill with the text in red.

 

Please note that the FindText API from the PDF Library (Pdf.Net.Core) returns bound values in points, which must be converted to pixels before passing them to the AddAnnotationAsync API. We have attached the sample and a reference video for your convenience. Feel free to reach out if you need any clarifications.

 

Note: When hovering over the redaction annotation, the border will not be applied; only the fill color will be applied.

 

Code snippet:

 

   Syncfusion.Blazor.SfPdfViewer.PdfAnnotation annotation = new Syncfusion.Blazor.SfPdfViewer.PdfAnnotation()

   {

       Id = $"redaction_{pageNumber}_{Guid.NewGuid()}",

       FontSize = 5,

       TextAlignment= TextAlignment.Center,

       Bound = new Bound()

       {

           X = ConvertPointToPixel(rect.X),

           Y = ConvertPointToPixel(rect.Y),

           Width = ConvertPointToPixel(rect.Width),

           Height = ConvertPointToPixel(rect.Height)

       },

       PageNumber = pageNumber,

 

       // Redaction-specific properties

       AnnotationProperties = new RedactionProperties()

       {

           MarkerFillColor = "transparent",

           MarkerBorderColor = "red",

           OverlayText = "Redaction",

           IsRepeat = false

       },

 

       FontColor = "red",

       FontFamily = "Courier",

       FillColor = "black",

       BorderColor = "red",

       Type = AnnotationType.Redaction

   };

 

   // Add annotation to the PDF Viewer

   await Viewer.AddAnnotationAsync(annotation);

}

 

Sample for adding redaction annotation in PDF Viewer

Demo for adding redaction annotation in PDF Viewer

 

UG for adding redaction annotation in PDF Viewer

Regards,

Venkada Subramanian D