NOTE

Syncfusion recommends using Blazor PDF Viewer (NextGen) Component which provides fast rendering of pages and improved performance. Also, there is no need of external Web service for processing the files and ease out the deployment complexity. It can be used in Blazor Server, WASM and MAUI applications without any changes.

Sticky notes annotations in Blazor PDF Viewer Component

5 Sep 20232 minutes to read

The PDF Viewer control provides the options to add, edit, and delete the sticky note annotations in the PDF document.

Adding a sticky note annotation to the PDF document

Sticky note annotations can be added to the PDF document using the annotation toolbar.

• Click the Comments button in the PDF Viewer toolbar. A toolbar appears below it.
• Click the position, where you want to add sticky note annotation in the PDF document.
• Sticky note annotation will be added in the clicked positions.

Annotation comments can be added to the PDF document using the comment panel.

• Select a Sticky note annotation in the PDF document and right-click it.
• Select Comment option in the context menu that appears.
• Now, you can add Comments, Reply, and Status using Comment Panel.

Editing the properties of the sticky note annotation

Editing opacity

The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.

Editing comments

The comment, comment reply, and comment status of the annotation can be edited using the Comment Panel.

• Open the comment panel using the Comment Panel button displayed in the annotation toolbar.

You can modify or delete the comments or comments replay and it’s status using the menu option provided in the comment panel.

Setting default properties during control initialization

The properties of the sticky note annotation can be set before creating the control using StickyNoteSettings.

After editing the default opacity using the Edit Opacity tool, they will be changed to the selected values.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.PdfViewerServer

<SfPdfViewerServer @ref="@viewer" DocumentPath="@DocumentPath" StickyNotesSettings="@StickyNotesSettings" >
</SfPdfViewerServer>

@code{
    SfPdfViewerServer viewer;
    private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
    PdfViewerStickyNotesSettings StickyNotesSettings = new PdfViewerStickyNotesSettings {Author="Syncfusion"};
}

Disabling sticky note annotations

The PDF Viewer control provides an option to disable the sticky note annotations feature.

@using Syncfusion.Blazor.PdfViewerServer
@using Syncfusion.Blazor.PdfViewer

<SfPdfViewerServer DocumentPath="@DocumentPath" EnableStickyNotesAnnotation=false>
</SfPdfViewerServer>

@code{
    private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
}

NOTE

You can refer to the Blazor PDF Viewer feature tour page for its groundbreaking feature representations. You can also explore the Blazor PDF Viewer example to understand how to explain core features of PDF Viewer.