Annotations in PDFs are additional elements or comments that can be added to a PDF document to provide extra information, clarification, or interactivity. They can be used for a variety of purposes, including reviewing, collaborating, or studying. They enhance the usability and collaborative aspects of PDFs.
The Syncfusion Blazor PDF Viewer is a UI component for displaying PDFs from byte arrays, streams, or file paths. In addition to allowing users to print PDFs, it supports reviewing them with annotation tools.
This blog delves into the diverse annotation types available in the Syncfusion Blazor PDF Viewer.
Note: If you’re new to our Blazor PDF Viewer, please refer to its getting started documentation before proceeding.
The Syncfusion Blazor PDF Viewer is a powerful tool with an edit annotation toolbar. This toolbar is a treasure trove of annotation options, enabling users to add a variety of annotations to a PDF. These annotations can be comments, highlights, drawings, or textual feedback.
The Syncfusion Blazor PDF Viewer supports the following annotation types, each with unique functionalities:
These annotations enrich your PDF viewing experience and your ability to edit and interact with PDFs. So, let’s look at these features in detail to see how to unlock the full potential of your PDFs.
Refer to the following image.
The text markup annotations in Blazor PDF Viewers are a powerful tool for editors and proofreaders, enabling them to identify and communicate changes or issues in a document efficiently.
These annotations offer a range of functionalities:
In addition to these visual indicators, the text markup annotations allow us to add comments or notes. These can provide explanations or suggestions for improvement, further enhancing the clarity of the proofreading process.
Leveraging text markup annotations makes the proofreading process more streamlined and efficient. It reduces the chances of miscommunication and ensures the production of polished, error-free documents.
Adding text markup annotations using the annotation toolbar in the Syncfusion Blazor PDF Viewer is straightforward:
Alternative method
There’s also an alternative way to add annotations. First, select the text you want to annotate. Then, apply your desired annotation style using the highlight, underline, or strikethrough button in the edit annotation toolbar.
With these simple steps, you can efficiently add text markup annotations to your PDF, enhancing their readability and making them more interactive.
You can edit the color and the opacity of text markup annotations.
Refer to the following image.
You can also configure the properties of a text markup annotation before creating the control using the HighlightSettings, UnderlineSettings, and StrikethroughSettings properties.
Refer to the following code example.
@using Syncfusion.Blazor.SfPdfViewer <SfPdfViewer2 @ref="@viewer" DocumentPath="@DocumentPath" HighlightSettings="@HighlightSettings" UnderlineSettings="@UnderlineSettings" StrikethroughSettings="@StrikethroughSettings" Height="100%" Width="100%"> </SfPdfViewer2> @code { SfPdfViewer2 viewer; private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; PdfViewerHighlightSettings HighlightSettings = new PdfViewerHighlightSettings { Color = "green", Opacity = 0.6 }; PdfViewerUnderlineSettings UnderlineSettings = new PdfViewerUnderlineSettings { Color = "blue", Opacity = 0.6 }; PdfViewerStrikethroughSettings StrikethroughSettings = new PdfViewerStrikethroughSettings { Color = "orange", Opacity = 0.6 };
In the previous code, we configured the Syncfusion Blazor PDF Viewer with specific settings for highlighting, underlining, and strikethrough annotations. We also defined the color and opacity for each annotation type, which will be applied to the annotations when created in the viewer. This allows for a high degree of customization and control over the appearance of the annotations.
Refer to the following image.
Shape annotations are powerful, especially when a design team reviews a new website layout. These annotations allow team members to highlight and comment directly on specific elements of the webpage mockup, such as buttons, navigation bars, and images. This visual feedback method streamlines communication, ensuring everyone is aligned when discussing design changes and improvements.
The team can quickly identify areas that require adjustment by using shape annotations. This leads to a more efficient and collaborative review process, resulting in a more polished and user-friendly website design.
Follow these steps to add shape annotations using the annotation toolbar:
You can now add shapes to the pages of your PDF as needed. This allows you to highlight and comment on specific areas in the document.
Refer to the following image.
Follow these steps to edit the properties of a shape annotation:
The edit color tool houses a color palette that you can use to change the fill color of your annotation.
The edit stroke color tool also provides a color palette, but this one is for altering the stroke color of your annotation. This can help to enhance the visibility of your annotations against different backgrounds.
The edit thickness tool features a range slider that you can use to adjust the border thickness of your annotation. This can be particularly useful when you want your annotations to be more or less conspicuous.
The edit opacity tool also has a range slider, but it is for modifying the opacity of your annotation. This allows you to control how transparent or opaque your annotations are.
You can access the Line Properties window to make further adjustments for line shapes, including arrow annotations. To do so, right-click on the added line or arrow annotation and select Properties from the context menu.
With these tools, you can customize your shape annotations to suit your specific needs.
The properties of the shape annotations can be configured before creating the control using LineSettings, ArrowSettings, RectangleSettings, CircleSettings, and PolygonSettings properties.
Refer to the following code.
@using Syncfusion.Blazor.SfPdfViewer <SfPdfViewer2 @ref="@viewer" DocumentPath="@DocumentPath" LineSettings="@LineSettings" ArrowSettings="@ArrowSettings" RectangleSettings="@RectangleSettings" CircleSettings="@CircleSettings" PolygonSettings="@PolygonSettings" Width="100%" Height="100%"> </SfPdfViewer2> @code { SfPdfViewer2 viewer; private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; PdfViewerLineSettings LineSettings = new PdfViewerLineSettings { Opacity = 0.6, StrokeColor = "green" }; PdfViewerArrowSettings ArrowSettings = new PdfViewerArrowSettings { FillColor = "green", Opacity = 0.6, StrokeColor = "blue" }; PdfViewerRectangleSettings RectangleSettings = new PdfViewerRectangleSettings { Opacity = 0.6, StrokeColor = "orange" }; PdfViewerCircleSettings CircleSettings = new PdfViewerCircleSettings { Opacity = 0.6, StrokeColor = "pink" }; PdfViewerPolygonSettings PolygonSettings = new PdfViewerPolygonSettings { Opacity = 0.6, StrokeColor = "yellow" }; }
Refer to the following output image.
Measurement annotations, encompassing distance, perimeter, area, radius, and volume, are indispensable in scenarios such as reviewing a technical document. Engineers and researchers can leverage these annotations within the PDF viewer to measure critical parameters accurately, ensuring the document aligns with specifications and standards. This process aids in quality assurance, error detection, and compliance with project requirements. Collaborators can easily communicate and verify intricate details, fostering efficient decision-making and reducing the risk of errors. Ultimately, it leads to the successful development and implementation of complex technical solutions.
Follow these steps to add measurement annotations using the annotation toolbar:
You can now add measure annotations to the pages of your PDF as needed.
Refer to the following image.
You can customize the properties of measurement annotations by following these steps:
Use the edit color tool, containing a color palette, to change the fill color of your annotation.
Use the edit stroke color tool to alter the stroke color of your annotation.
Use the edit thickness tool, containing a range slider, to adjust the border thickness of your annotation.
Use the edit opacity tool to modify the opacity of your annotation.
You can access the Line Properties window to make further adjustments for line shapes like distance and perimeter annotations. Right-click on the added line or perimeter annotation and select Properties from the context menu.
Refer to the following image.
The properties of the shape annotations can be set before creating the control using DistanceSettings, PerimeterSettings, AreaSettings, RadiusSettings, and VolumeSettings.
@using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.SfPdfViewer <SfPdfViewer2 @ref="@viewer" DocumentPath="@DocumentPath" Height="100%" Width="100%" DistanceSettings="@DistanceSettings" PerimeterSettings="@PerimeterSettings" AreaSettings="@AreaSettings" RadiusSettings="@RadiusSettings" VolumeSettings="@VolumeSettings"> </SfPdfViewer2> @code { SfPdfViewer2 viewer; private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; PdfViewerDistanceSettings DistanceSettings = new PdfViewerDistanceSettings { Opacity = 0.6, StrokeColor = "red", LineHeadEndStyle = LineHeadStyle.Closed, LineHeadStartStyle = LineHeadStyle.Closed }; PdfViewerPerimeterSettings PerimeterSettings = new PdfViewerPerimeterSettings { Opacity = 0.6, StrokeColor = "red" }; PdfViewerAreaSettings AreaSettings = new PdfViewerAreaSettings { Opacity = 0.6, StrokeColor = "red" }; PdfViewerVolumeSettings VolumeSettings = new PdfViewerVolumeSettings { Opacity = 0.6, StrokeColor = "red" }; PdfViewerRadiusSettings RadiusSettings = new PdfViewerRadiusSettings { Opacity = 0.6, StrokeColor = "red" }; }
Free text annotations significantly enhance user interactivity and the ability to annotate information. Users can effortlessly provide additional details by inserting free text annotations directly onto a PDF.
This enables them to highlight key points, jot down personal notes, or collaborate with others by adding context-specific information. This feature fosters communication and enriches the information within the document. It’s a useful tool for professionals, educators, and anyone seeking to use PDFs for collaborative projects.
Follow these steps to add free text annotations using the annotation toolbar:
You can now insert text directly onto any page within the PDF, allowing you to add your comments.
You can customize the following properties of free text annotations:
Refer to the following image.
The properties of free text annotations can be set before creating the control using FreeTextSettings.
@using Syncfusion.Blazor.SfPdfViewer <SfPdfViewer2 @ref="viewer" DocumentPath=@DocumentPath Height="100%" Width="100%" FreeTextSettings=@FreeTextSettings> </SfPdfViewer2> @code { SfPdfViewer2 viewer; private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; PdfViewerFreeTextSettings FreeTextSettings = new PdfViewerFreeTextSettings { BorderColor = "blue", FontColor = "yellow" }; }
Stamp annotations are an invaluable tool in a bustling legal office, where they play a crucial role in efficiently reviewing legal documents. Lawyers and paralegals utilize PDF stamp annotations to mark sections for approval, highlight critical clauses, and indicate areas that require revision while examining contracts and agreements.
Each attorney adds their electronic signature and date to approval stamps, ensuring a clear and authentic record of the review process. Confidentiality concerns are addressed by stamping sections as Confidential or For Internal Use Only. Compliance with specific regulations is also confirmed through customized stamp annotations.
These digital marks facilitate version control, creating a transparent history of document revisions. The process culminates in a final Approved stamp, signaling that the document is ready for execution. This streamlined approach enhances document management, fosters accuracy, and ensures legal compliance in legal document review.
Follow these steps to add stamp annotations using the annotation toolbar:
You can now add the selected stamp to any page within your PDF.
Refer to the following image.
The properties of stamp annotations can be set before creating the control using StampSettings.
@using Syncfusion.Blazor.SfPdfViewer <SfPdfViewer2 @ref="viewer" DocumentPath="@DocumentPath" Height="100" Width="100%" StampSettings=@StampSettings> </SfPdfViewer2> @code { // Sets the PDF document path for initial loading. private string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf"; SfPdfViewer2 viewer; PdfViewerStampSettings StampSettings = new PdfViewerStampSettings { Opacity = 0.3, Author = "Blazor" }; }
Refer to the following output image.
Ink annotations in the Blazor PDF Viewer offer a unique tool that allows users to draw freehand, highlight, underline, or strikethrough text, simulating the experience of writing or drawing directly on a physical document using a digital pen or stylus.
Ink annotations are used for reviewing and editing documents, electronically signing contracts or forms, and providing feedback on shared PDFs.
These annotations can be customized with various colors, thicknesses, and styles, enhancing the clarity and visual impact of the remarks on a PDF. Users can then easily print the annotated document for reference or archival purposes.
Let’s see the steps to add ink annotations using the annotation toolbar:
Refer to the following image.
You can use the following tools to customize the ink annotations:
Refer to the following image.
The properties of ink annotations can be set before creating the control using the InkAnnotationSettings.
@using Syncfusion.Blazor.SfPdfViewer <SfPdfViewer2 @ref="viewer" DocumentPath=@DocumentPath Height="100%" Width="100%" InkAnnotationSettings="@InkAnnotationSettings"> </SfPdfViewer2> @code { SfPdfViewer2 viewer; private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; PdfViewerInkAnnotationSettings InkAnnotationSettings = new PdfViewerInkAnnotationSettings { Author = "Syncfusion", StrokeColor = "green", Thickness = 3, Opacity = 0.6 }; }
Sticky note annotations in Blazor PDF Viewer are a tool for collaborative document review and feedback processes.
Consider a scenario where a project manager shares a complex proposal with multiple team members. Each team member can use sticky notes to highlight specific proposal sections, ask questions, suggest edits, or provide general comments. These digital annotations facilitate a seamless exchange of ideas and feedback, ensuring that all stakeholders can contribute their insights directly to the document.
This makes the review process more efficient and enhances overall collaboration. Sticky notes also provide a clear and organized way to track various suggestions and discussions within the PDF.
Let’s see how to add sticky note annotations using the annotation toolbar:
Refer to the following image.
The properties of sticky note annotations can be set before creating the control using the StickyNoteSettings.
@using Syncfusion.Blazor.SfPdfViewer <SfPdfViewer2 @ref="@viewer" DocumentPath="@DocumentPath" StickyNotesSettings="@StickyNotesSettings" Height="100%" Width="100%"> </SfPdfViewer2> @code { SfPdfViewer2 viewer; private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; PdfViewerStickyNotesSettings StickyNotesSettings = new PdfViewerStickyNotesSettings { Author = "Syncfusion" }; }
Refer to the following output image.
The Comments feature allows you to add, edit, and delete comments for annotations. This support ensures that your PDF can be thoroughly reviewed and collaboratively annotated.
There are three convenient ways to access the comment panel in the Blazor PDF Viewer:
Adding comments to your PDF documents is a breeze with these two simple steps:
Refer to the following image.
The ability to import and export annotations in Blazor PDF Viewer enhances order management efficiency in a small e-commerce business. This process begins when customers place orders via a website, which generates PDF order forms. These forms are subsequently opened in PDF Viewer for customization and confirmation.
Customers save these forms as XFDF files, capturing all the order details and annotations. The website’s PDF Viewer then imports these XFDF files upon submission, extracting the order information for processing. The viewer’s export functionality converts the order data into JSON format, facilitating inventory and shipping systems integration.
Once the orders are processed, the viewer exports status and tracking data as JSON for creating shipping labels. This seamless import and export process enhances order management and customer communication.
To import annotations into a PDF using the Blazor PDF Viewer, please follow these steps:
Refer to the following image.
You can also easily export annotations in JSON/XFDF format by following these steps:
Refer to the following image.
Thanks for reading! We’ve explored the various types of annotations in the Syncfusion Blazor PDF Viewer and their practical applications in a work environment. Your thoughts and feedback are important to us, so we encourage you to try out the steps outlined and share your experiences or any specific requirements in the comments section below.
If you’re not a Syncfusion customer, you can download a free trial of Essential Studio® for Blazor and begin evaluating its controls immediately.
Don’t hesitate to contact us through our support forum, support portal, or feedback portal for assistance. We’re always ready to assist you!