Syncfusion Blazor Pdf Viewer

Syncfusion Blazor Pdfviewer – UI Sample

NuGet: Syncfusion.Blazor.SfPdfViewer + Syncfusion.Blazor.Themes Namespace: Syncfusion.Blazor.SfPdfViewer

Generate C# Code for the User's Project (default)

Trigger keywords: "how to", "add pdfviewer", "code sample", "show me", "example", "snippet", "integrate", "component", "create sample".

Purpose: Generate minimal, copy-pasteable C# and Razor code that the user can integrate directly into their Blazor project.

Workflow:

⚠️ CRITICAL — Feature Support Policy (STRICT MODE):

FUNDAMENTAL RULE: Only generate code using APIs and properties that are EXPLICITLY listed in the reference files. ANY deviation is a VIOLATION.

• MANDATORY CHECKS BEFORE GENERATING ANY CODE:

1. Search the reference files for the exact API/property name 2. Verify it appears in the Method Reference, Properties, or Events tables 3. If NOT found in ANY reference file, STOP immediately 4. Do NOT generate or suggest undocumented APIs under any circumstances

• STRICT ENFORCEMENT - ZERO TOLERANCE:
• NO custom properties - Only use properties from reference file tables
• NO invented methods - Only use methods from reference file tables
• NO workarounds with undefined APIs - Forbidden
• NO assumptions about undocumented behavior - Forbidden
• NO alternative implementations using guess-work - Forbidden
• NO pretending support exists - Forbidden

• MANDATORY RESPONSE FOR UNSUPPORTED FEATURES:
• If a requested scenario/feature/API is NOT listed in any reference file, you MUST respond with:

    "This feature is not supported in the current Syncfusion Blazor PDF Viewer implementation."

• Then list what IS supported from the appropriate reference file
• Never suggest alternatives unless explicitly documented in reference files

• REFERENCE FILE HIERARCHY:
• Each reference file contains complete, authoritative documentation for its domain
• The tables (Method Reference, Properties, Events) are the SOURCE OF TRUTH
• Content outside these tables in reference files is explanatory only
• Do NOT extend beyond what appears in the reference file tables

• AUDIT YOUR GENERATION:
• Before providing any code, verify EVERY API used appears in a reference file table
• Document which reference file each API comes from
• If you cannot cite a reference file table entry, DELETE that code

• This is a CRITICAL REQUIREMENT. Violations compromise the skill's integrity and reliability.

Step 1 — Detect the Application Type (REQUIRED - DO NOT SKIP)

• Use file_search and read_file tools to inspect workspace project files:
• .csproj file (project configuration)
• Program.cs (startup configuration)
• _Imports.razor (namespace imports)
• App.razor (root component)
• Any existing .razor files in Components/Pages
• Output: Confirm the detected application type (e.g., "Blazor WebApp" or "Blazor Server") before proceeding.

Step 2 — Generate Code from Reference Files Only (REQUIRED)

• Before generating: Confirm that Steps 1 are complete
• Read the relevant references/*.md file(s) for the requested feature
• Cross-reference EVERY API, property, and method against these tables
• DECLARATIVE-ONLY APPROACH (MANDATORY - NO LIFECYCLE METHODS):
• Use ONLY property binding in Razor markup similar lifecycle methods.
• Configure all PDF Viewer properties directly as component attributes
• MANDATORY: Before generating ANY code, verify that reference files exist and are accessible
• Read the appropriate reference file(s) for the requested feature:
• Use read_file tool on relevant references/*.md files
• Confirm file contains Methods/Properties/Events tables
• Verify tables are complete and readable
• If reference file is missing or cannot be read:
• STOP code generation
• Respond: "Reference file for this feature is not available. Please ensure all reference files are present in the references/ directory."
• List the missing reference file name
• This is a BLOCKER step: Cannot proceed without reference file validation
• If an API/property does NOT appear in the reference file table, DO NOT USE IT
• Do NOT invent, guess, or suggest any API, method, property, class, or namespace not explicitly present in the reference files

Code References

All templates and operation snippets live in references/*.md. Each file is a focused snippet or template the agent will combine when generating samples.

Flow: Always start with getting-started.md, then merge matched features into its anchors (PROPS, EVENTS, UI_BUTTONS, HANDLERS). If no keyword matches, return only the basic sample.

Quick Start Example

@page "/pdfviewer-sample"
@using Syncfusion.Blazor
@using Syncfusion.Blazor.SfPdfViewer
@using Syncfusion.Blazor.Buttons

<!-- BASE_PATCH:UI_BUTTONS -->
<!-- Buttons from feature files will be inserted here -->

<SfPdfViewer2 @ref="_pdfviewer"
               DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
               Height="100%"
               Width="100%">
               <!-- "PROPERTY" should be placed here -->
               <!-- "EVENTS" should be placed here-->
</SfPdfViewer2>

@code {
    private SfPdfViewer2 _pdfviewer { get; set; }
}

---

Syncfusion Blazor PDF Viewer Skills

Create Blazor application by integrating Syncfusion Blazor PDF Viewer control for viewing and editing PDF documents.

See [SKILL.md](SKILL.md) for the full intent-routing guide and rules.

---

Two Modes

Generate C# Code for the User's Project (default)

Produces production-ready C# code and adds it directly into the user's project files.

Trigger keywords: "code", "snippet", "how to write", "Program.cs", "show me", "sample", "example code", "generate code for".

---

Quick Start

Prerequisites and Setup Requirements

Before using the Blazor PDF Viewer component, ensure the following setup is complete:

1. NuGet Package Installation

Required packages in your .csproj file:

dotnet add package Syncfusion.Blazor.SfPdfViewer
dotnet add package Syncfusion.Blazor.Themes

• If the project were Web Assembly the install the below package too

dotnet add package SkiaSharp.Views.Blazor

2. Program.cs Configuration

For Blazor Web App (Server mode) & Auto:

using Syncfusion.Blazor;

.....

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

// Configure SignalR for large file uploads
builder.Services.AddSignalR(o => { o.MaximumReceiveMessageSize = 102400000; });

// Add memory cache
builder.Services.AddMemoryCache();

.......

For Blazor WebAssembly:

using Syncfusion.Blazor;

.....

builder.Services.AddMemoryCache();
//Add Syncfusion Blazor service to the container
builder.Services.AddSyncfusionBlazor();

.....

For Blazor WebAssembly or Auto mode, register the service in both the server and client Program.cs files.

3. _Imports.razor Configuration

Add these namespaces to Components/_Imports.razor (Web App) or _Imports.razor (WebAssembly):

@using Syncfusion.Blazor
@using Syncfusion.Blazor.SfPdfViewer

4. App.razor Configuration

Add the Syncfusion stylesheet and script references in Components/App.razor:

<head>
    <!-- Other head content -->
    <!-- Syncfusion Blazor PDF Viewer control's theme style sheet -->
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>

<body>
    <!-- Other body content -->
    <!-- Syncfusion Blazor PDF Viewer control's scripts -->
    <script src="_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js" type="text/javascript"></script>
</body>

---

Code References

All templates and snippets used by the skill are in the references/ folder:

Example Prompts

Mode 1 / Code-Generation Prompts (C# snippets for your project)

Use these when you want C# code to embed in your project (e.g., Program.cs).

Examples:

• "Show me the C# code to create a Pdfviewer with the hide the default toolbar."
• "Generate a C# snippet to add the annotations programmatically for Pdfviewer."
• "Provide C# code to customize the UI for the search functionalities for Pdfviewer."
• "Show me how to set the formfieldsettings for the Pdfviewer"

License

Syncfusion .NET PDF library requires a commercial license for production use. A free community license is available for qualifying organizations.

DynamicStampItem

SignStampItem

StandardBusinessStampItem

PdfViewerCustomStamp

PdfViewerSignatureDialogSettings

DisplayMode

CalibrationUnit

Annotation Events in Blazor SfPdfViewer Component

Table of Contents

• Overview
• When to Use Annotation Events
• Complete Event List

Overview

Annotation events notify your application when users interact with annotations—adding, selecting, moving, resizing, modifying, or removing them. Use these events to track annotation changes, implement custom workflows, validate modifications, or synchronize annotation state with your application data.

When to Use Annotation Events

Guide users to subscribe to annotation events when they need to:

• It allowing users to handle interactions, changes, and actions performed within the viewer for annotation (Except Signature Annotation).
• When we do such action while annotation interaction process, the we can use the annotation events to handle to acheive those scenaios.

Complete Event List

Below is the comprehensive reference of all annotation events, their arguments, and properties. Use this as a lookup when you know which event you need.

AnnotationAdded

Triggers when an annotation is added to a page in the PDF document.

Value

EventCallback<AnnotationAddEventArgs>

AnnotationAdded Events Arguments

Code Example

<SfPdfViewer2>
    <PdfViewerEvents AnnotationAdded="AnnotationAdded"></PdfViewerEvents>
</SfPdfViewer2>
@code {
    private void AnnotationAdded(AnnotationAddEventArgs args) {
        // customize your code in based on the requirements and check above table for event argument details
    }
}

AnnotationMouseover

Triggers when the mouse pointer moves over an annotation object.

Value

EventCallback<AnnotationMouseoverEventArgs>

AnnotationMouseover Events Arguments

Code Example

<SfPdfViewer2>
    <PdfViewerEvents AnnotationMouseover="AnnotationMouseovered"></PdfViewerEvents>
</SfPdfViewer2>
@code {
    private void AnnotationMouseOvered(AnnotationMouseoverEventArgs args) {
        // customize your code in based on the requirements and check above table for event argument details
    }
}

AnnotationMoved

Triggers when an annotation is moved on a page in the PDF document.

Value

EventCallback<AnnotationMoveEventArgs>

AnnotationMoved Events Arguments

Code Example

<SfPdfViewer2>
    <PdfViewerEvents AnnotationMoved="AnnotationMove"></PdfViewerEvents>
</SfPdfViewer2>
@code {
    private void AnnotationMove(AnnotationMoveEventArgs args) {
        // customize your code in based on the requirements and check above table for event argument details
    }
}

AnnotationPropertiesChanged

Triggers when annotation properties are modified on a PDF page.

Value

EventCallback<AnnotationPropertiesChangeEventArgs>

AnnotationPropertiesChanged Events Arguments

Code Example

<SfPdfViewer2>
    <PdfViewerEvents AnnotationPropertiesChanged="AnnotationModified"></PdfViewerEvents>
</SfPdfViewer2>
@code {
    private void AnnotationModified(AnnotationPropertiesChangeEventArgs args) {
        // customize your code in based on the requirements and check above table for event argument details
    }
}

AnnotationRemoved

Triggers when an annotation is removed / deleted from a page in the PDF document.

Value

EventCallback<AnnotationRemoveEventArgs>

AnnotationRemoved Events Arguments

Code Example

<SfPdfViewer2>
    <PdfViewerEvents AnnotationRemoved="AnnotationDeleted"></PdfViewerEvents>
</SfPdfViewer2>
@code {
    private void AnnotationDeleted(AnnotationRemoveEventArgs args) {
        // customize your code in based on the requirements and check above table for event argument details
    }
}

AnnotationResized

Triggers when an annotation is resized on a page in the PDF document.

Value

EventCallback<AnnotationResizeEventArgs>

AnnotationResized Events Arguments

Code Example

<SfPdfViewer2>
    <PdfViewerEvents AnnotationResized="AnnotationResized"></PdfViewerEvents>
</SfPdfViewer2>
@code {
    private void AnnotationResized(AnnotationResizeEventArgs args) {
        // customize your code in based on the requirements and check above table for event argument details
    }
}

AnnotationSelected

Triggers when an annotation is selected on a page in the PDF document.

Value

EventCallback<AnnotationSelectEventArgs>

AnnotationSelected Events Arguments

Code Example

<SfPdfViewer2>
    <PdfViewerEvents AnnotationSelected="AnnotationSelected"></PdfViewerEvents>
</SfPdfViewer2>
@code {
    private void AnnotationSelected(AnnotationSelectEventArgs args) {
        // customize your code in based on the requirements and check above table for event argument details
    }
}

AnnotationUnselected

Triggers when an annotation is unselected on a page in the PDF document.

Value

EventCallback<AnnotationUnselectEventArgs>

AnnotationUnselected Events Arguments

Code Example

<SfPdfViewer2>
    <PdfViewerEvents AnnotationUnselected="AnnotationUnselected"></PdfViewerEvents>
</SfPdfViewer2>
@code {
    private void AnnotationUnselected(AnnotationUnselectEventArgs args) {
        // customize your code in based on the requirements and check above table for event argument details
    }
}

OnAnnotationDoubleClick

Triggers when an annotation is double-clicked.

Value

EventCallback<AnnotationDoubleClickEventArgs>

OnAnnotationDoubleClick Events Arguments

Code Example

<SfPdfViewer2>
    <PdfViewerEvents OnAnnotationDoubleClick="OnAnnotationDoubleClicked"></PdfViewerEvents>
</SfPdfViewer2>
@code {
    private void OnAnnotationDoubleClicked(AnnotationDoubleClickEventArgs args) {
        // customize your code in based on the requirements and check above table for event argument details
    }
}

ExportStarted

Triggers when exporting annotations starts in the SfPdfViewer. | ExportStartEventArgs | No Properties | Show loading indicators or prevent UI interactions during export |

Value

EventCallback<ExportStartEventArgs>

ExportStarted Events Arguments

Code Example

<SfPdfViewer2>
    <PdfViewerEvents ExportStarted="ExportStarted"></PdfViewerEvents>
</SfPdfViewer2>
@code {
    private void ExportStarted(ExportStartEventArgs args) {
        // customize your code in based on the requirements and check above table for event argument details
    }
}

ExportSucceed

Triggers when exporting annotations succeeds in the SfPdfViewer.

Value

EventCallback<ExportSuccessEventArgs>

ExportSucceed Events Arguments

Code Example

<SfPdfViewer2>
    <PdfViewerEvents ExportSucceed="ExportSucceed"></PdfViewerEvents>
</SfPdfViewer2>
@code {
    private void ExportSucceed(ExportSuccessEventArgs args) {
        // customize your code in based on the requirements and check above table for event argument details
    }
}

ExportFailed

Triggers when exporting annotations fails in the SfPdfViewer.

Value

EventCallback<ExportFailureEventArgs>

ExportFailed Events Arguments

Code Example

<SfPdfViewer2>
    <PdfViewerEvents ExportFailed="ExportFailed"></PdfViewerEvents>
</SfPdfViewer2>
@code {
    private void ExportFailed(ExportFailureEventArgs args) {
        // customize your code in based on the requirements and check above table for event argument details
    }
}

ImportStarted

Triggers when importing annotations starts in the PDF document. | | No Properties | Show loading indicators or prevent UI interactions during import |

Value

EventCallback<ImportStartEventArgs>

ImportStarted Events Arguments

Code Example

<SfPdfViewer2>
    <PdfViewerEvents ImportStarted="ImportStarted"></PdfViewerEvents>
</SfPdfViewer2>
@code {
    private void ImportStarted(ImportStartEventArgs args) {
        // customize your code in based on the requirements and check above table for event argument details
    }
}

ImportSucceed

Triggers when importing annotations succeeds in the PDF document.

Value

EventCallback<ImportSuccessEventArgs>

ImportSucceed Events Arguments

Code Example

<SfPdfViewer2>
    <PdfViewerEvents ImportSucceed="ImportSucceed"></PdfViewerEvents>
</SfPdfViewer2>
@code {
    private void ImportSucceed(ImportSuccessEventArgs args) {
        // customize your code in based on the requirements and check above table for event argument details
    }
}

ImportFailed

Triggers when importing annotations fails in the PDF document.

Value

EventCallback<ImportFailureEventArgs>

ImportFailed Events Arguments

Code Example

<SfPdfViewer2>
    <PdfViewerEvents ImportFailed="ImportFailed"></PdfViewerEvents>
</SfPdfViewer2>
@code {
    private void ImportFailed(ImportFailureEventArgs args) {
        // customize your code in based on the requirements and check above table for event argument details
    }
}

Bound

PdfAnnotationProperties

FontStyle

PdfViewerShapeLabelSettings

LineHeadStyle

TextAlignment

AnnotationType

Syncfusion Blazor PDF Viewer - Annotation Methods

Table of Contents

• Overview
• Methods List

Overview

The Syncfusion Blazor PDF Viewer offers powerful APIs to programmatically control annotation interactions within a PDF document. Using these APIs, you can enable or modify annotation behavior without direct user toolbar interaction, making them especially useful for custom UI workflows, automated annotation scenarios, and advanced PDF interaction logic.

Methods List

The following APIs provide access to annotation-related methods available in the Syncfusion Blazor PDF Viewer.

SetAnnotationModeAsync

Set annotation type to be added in next user interaction of the loaded PDF Document in the PDF Viewer. We can customize the annotation based on the user need. It will set annotation interaction thorugh the method.

Parameters

• AnnotationType

Return Type

• Task

Code Example

    // We can bind the method for click action based the user requirement.
    await viewer.SetAnnotationModeAsync(AnnotationType.Highlight);

SetAnnotationModeAsync (Only for stamp annotation)

Switch on the annotation mode for stamp annotations. By the methods overloading of the SetAnnotationModeAsync, we can able to set the annotation type that we need to add the types(DynamicStampItem, SignStampItem, StandardBusinessStampItem) | Task | When we need annotation interatcion for stamp annotation programmatically |

Parameters

• AnnotationType
• DynamicStampItem?
• SignStampItem?
• StandardBusinessStampItem?

Note - ? is means to be optional paramter.

Return Type

• Task

Code Example

    // We can bind the method for click action based the user requirement.

    // We need to add dynamic stamp annotation, set the second paramter alone as needed type.
    await viewer.SetAnnotationModeAsync(AnnotationType.Stamp, DynamicStampItem.Approved);

    // We need to add sign here stamp annotation, set the second parameter as null and thrid parameter with needed type.
    await viewer.SetAnnotationModeAsync(AnnotationType.Stamp, null, SignStampItem.Accepted);

    // We need to add standard business stamp annotation, set the second and third parameter as null and fourth parameter with needed type.
    await viewer.SetAnnotationModeAsync(AnnotationType.Stamp, null, null, StandardBusinessStampItem.Approved);

UpdateMeasurementSettingsAsync

Update measure settings for existing measure annotations | - | Task | When we want to update the measure annotation settings | Programmatically |

Parameters

No Paramters

Return Type

• Task

Code Example

    // We can bind the method for click action based the user requirement.
    await viewer.UpdateMeasurementSettingsAsync();

Syncfusion Blazor PDF Viewer - Annotation Properties

Table of Contents

• Overview
• Properties List

Overview

The Syncfusion Blazor PDF Viewer provides comprehensive annotation support that allows users to interact with PDF documents through various annotation tools. The annotation properties control which annotation features are enabled or disabled, and how they behave within the PDF Viewer component.

Properties List

The following APIs provides the annotation-related properties available in the Syncfusion Blazor PDF Viewer:

EnableAnnotation

If set to false, annotation support in the PDF Viewer will be disabled. By default it is true.

• false - Disabled the annotation module from the PDF viewer and don't get interact with the annotation. It won't hide the annotation button from UI, it disables the button.
• true - Enabled the annotation module from the PDF Viewer and also enables the button in the UI.

Data Type and default value

bool - true(Default)

Code Example

<SfPdfViewer2 EnableAnnotation="true"></SfPdfViewer2>

EnableFreeText

If set to false, the free text annotation tool in the annotation toolbar will be disabled. By default it is true.

• false - Disabled the free text annotation from the PDF viewer and don't get interact with the annotation. It won't hide the free text annotation button from UI, it disables the button.
• true - Enabled the free text annotation from the PDF Viewer and also enables the button in the UI.

Data Type and default value

bool - true(Default)

Code Example

<SfPdfViewer2 EnableFreeText="true"></SfPdfViewer2>

EnableHandwrittenSignature

If set to false, the handwritten signature tool in the annotation toolbar will be disabled. By default it is true.

• false - Disabled the handwritten signature annotation from the PDF viewer and don't get interact with the annotation. It won't hide the handwritten signature annotation button from UI, it disables the button.
• true - Enabled the handwritten signature annotation from the PDF Viewer and also enables the button in the UI.

Data Type and default value

bool - true(Default)

Code Example

<SfPdfViewer2 EnableHandwrittenSignature="true"></SfPdfViewer2>

EnableImportAnnotationMeasurement

Enable or disables the customization of measure values in PdfViewer.

Data Type and default value

bool - true(Default)

Code Example

<SfPdfViewer2 EnableImportAnnotationMeasurement="true"></SfPdfViewer2>

EnableInkAnnotation

If set to false, ink annotation support in the PDF Viewer will be disabled. By default it is true.

• false - Disabled the ink annotation from the PDF viewer and don't get interact with the annotation. It won't hide the ink annotation button from UI, it disables the button.
• true - Enabled the ink annotation from the PDF Viewer and also enables the button in the UI.

Data Type and default value

bool - true(Default)

Code Example

<SfPdfViewer2 EnableInkAnnotation="true"></SfPdfViewer2>

EnableMeasureAnnotation

If set to false, the measurement annotation tool in the annotation toolbar will be disabled. By default it is true.

• false - Disabled the measurement annotation from the PDF viewer and don't get interact with the annotation. It won't hide the measurement annotation button from UI, it disables the button.
• true - Enabled the measurement annotation from the PDF Viewer and also enables the button in the UI.

Data Type and default value

bool - true(Default)

Code Example

<SfPdfViewer2 EnableMeasureAnnotation="true"></SfPdfViewer2>

EnableShapeAnnotation

If set to false, the shape annotation tool in the annotation toolbar will be disabled. By default it is true.

• false - Disabled the shape annotation from the PDF viewer and don't get interact with the annotation. It won't hide the shape annotation button from UI, it disables the button.
• true - Enabled the shape annotation from the PDF Viewer and also enables the button in the UI.

Data Type and default value

bool - true(Default)

Code Example

<SfPdfViewer2 EnableShapeAnnotation="true"></SfPdfViewer2>

EnableStampAnnotations

If set to false, the stamp annotation tool in the annotation toolbar will be disabled. By default it is true.

• false - Disabled the stamp annotation from the PDF viewer and don't get interact with the annotation. It won't hide the stamp annotation button from UI, it disables the button.
• true - Enabled the stamp annotation from the PDF Viewer and also enables the button in the UI.

Data Type and default value

bool - true(Default)

Code Example

<SfPdfViewer2 EnableStampAnnotations="true"></SfPdfViewer2>

EnableStickyNotesAnnotation

If set to false, the sticky notes annotation tool in the toolbar will be disabled. By default it is true.

• false - Disabled the sticky notes annotation from the PDF viewer and don't get interact with the annotation. It won't hide the sticky notes annotation button from UI, it disables the button.
• true - Enabled the sticky notes annotation from the PDF Viewer and also enables the button in the UI.

Data Type and default value

bool - true(Default)

Code Example

<SfPdfViewer2 EnableStickyNotesAnnotation="true"></SfPdfViewer2>

EnableTextMarkupAnnotation

If set to false, the text markup tools (highlight, strikethrough, squiggly and underline) are disabled in annotation toolbar. By default it is true.

• false - Disabled the text markup annotation from the PDF viewer and don't get interact with the annotation. It won't hide the text markup annotation button from UI, it disables the button.
• true - Enabled the text markup annotation from the PDF Viewer and also enables the button in the UI.

Data Type and default value

bool - true(Default)

Code Example

<SfPdfViewer2 EnableTextMarkupAnnotation="true"></SfPdfViewer2>

ExportAnnotationFileName

Gets or sets the file name of annotations to be exported. When we set the file name through this API, it will set the file name for the exported file.

Data Type

string

Code Example

<SfPdfViewer2 ExportAnnotationFileName="ExportFile"></SfPdfViewer2>

IsSignatureEditable

If it is set as true, the signature can editable in the PDF Viewer after saved as ink annotation on download action.

• false - It disables the edit functionalities after saved on the downloaded document.
• true - It enables the edit functionalities after saved on the downloaded document.

Data Type and default value

bool - false(Default)

Code Example

<SfPdfViewer2 IsSignatureEditable="true"></SfPdfViewer2>

ShowDigitalSignatureAppearance

Gets or sets a value that indicates whether to show the digital signature appearance in the document.

Data Type and default value

bool - true(Default)

Code Example

<SfPdfViewer2 ShowDigitalSignatureAppearance="true"></SfPdfViewer2>

Annotation Selector Settings in Blazor SfPdfViewer Component

Table of Contents

• Overview
• Properties List
• Code Example

Overview

Annotation Selector settings allow you to configure default appearance of the selection for all the types of annotations in the PDF Viewer.

When we need to set the selector settings for all the annotations as common, then we can use this properties. Then we can use this settings for common for all the annotation not for individual annotation.

Properties List

Code Example

• We can customize the options, based on the user requirements.

<SfPdfViewer2>
    <PdfViewerAnnotationSelectorSettings ResizerBorderColor="black" ResizerCursorType="CursorType.CrossHair" ResizerFillColor="blue" ResizerLocation="AnnotationResizerLocation.Corners" ResizerShape="AnnotationResizerShape.Circle" ResizerSize="4" SelectionBorderColor="green" SelectionBorderThickness="3" SelectorLineDashArray="[2, 3]"></PdfViewerAnnotationSelectorSettings>
</SfPdfViewer2>

PdfViewerAnnotationSelectorSettings

CursorType

AnnotationResizerLocation

AnnotationResizerShape

PageInfo Class

DocumentInfo Class

PageRotation

FooterButton

Annotation Settings in Blazor SfPdfViewer Component

Table of Contents

• Overview
• Properties List
• Code Example

Overview

Annotation settings allow you to configure default appearance, behavior, and restrictions for all the types of annotations in the PDF Viewer. Use these settings to control properties of the all types of annotations.

When we need to set the settings for all the annotations as common, then we can use this property. Then we can use this settings for common for all the annotation not for individual annotation.

Properties List

Code Example

• We can customize the options, based on the user requirements.

<SfPdfViewer2>
    <PdfViewerAnnotationSettings AllowedInteractions="allowedInteractions" Author="Syncfusion" CustomData="CustomData" IsLock="true" IsPrint="false" MaxHeight="100" MaxWidth="100" MinHeight="50" MinWidth="50" SkipDownload="false" SkipPrint="false"></PdfViewerAnnotationSettings>
</SfPdfViewer2>

@code {
    List<AllowedInteraction> allowedInteractions = new List<AllowedInteraction>() {
        AllowedInteraction.Select,
        AllowedInteraction.Delete
    };
    private object CustomData = new
    {
        Owner = "Syncfusion"
    };
}

Area Settings in Blazor SfPdfViewer Component

Table of Contents

• Overview
• Properties List
• Code Example

Overview

Area settings allow you to configure default appearance, behavior, and restrictions for area annotations in the PDF Viewer. Use these settings to control properties of the area annotation.

Properties List

Code Example

• We can customize the options, based on the user requirements.

<SfPdfViewer2>
    <PdfViewerAreaSettings AllowedInteractions="allowedInteractions" AnnotationSelectorSettings="selectorSettings" Author="Syncfusion" BorderDashArray="[1, 3]" CustomData="CustomData" FillColor="green" IsLock="true" IsPrint="false" MaxHeight="100" MaxWidth="100" MinHeight="50" MinWidth="50" Opacity="0.5" SkipDownload="false" SkipPrint="false" StrokeColor="yellow" Thickness="3"></PdfViewerAreaSettings>
</SfPdfViewer2>

@code {
    List<AllowedInteraction> allowedInteractions = new List<AllowedInteraction>() {
        AllowedInteraction.Select,
        AllowedInteraction.Delete
    };
    PdfViewerAnnotationSelectorSettings selectorSettings = new PdfViewerAnnotationSelectorSettings() {
        SelectionBorderColor = "black", 
        ResizerBorderColor = "blue", 
        ResizerCursorType= CursorType.CrossHair, 
        ResizerFillColor="orange", 
        ResizerLocation=AnnotationResizerLocation.Corners, 
        ResizerShape=AnnotationResizerShape.Circle, 
        ResizerSize=4, 
        SelectionBorderThickness=2, 
        SelectorLineDashArray=[1, 2]  
    };
    private object CustomData = new
    {
        Owner = "Syncfusion"
    };
}

Arrow Settings in Blazor SfPdfViewer Component

Table of Contents

• Overview
• Properties List
• Code Example

Overview

Arrow settings allow you to configure default appearance, behavior, and restrictions for arrow annotations in the PDF Viewer. Use these settings to control properties of the arrow annotation.

Properties List

Code Example

• We can customize the options, based on the user requirements.

<SfPdfViewer2>
    <PdfViewerArrowSettings AllowedInteractions="allowedInteractions" AnnotationSelectorSettings="selectorSettings" Author="Syncfusion" BorderDashArray="[1,3]" CustomData="CustomData" FillColor="green" IsLock="true" IsPrint="false" LineHeadEndStyle="LineHeadStyle.Diamond" LineHeadStartStyle="LineHeadStyle.Diamond" MaxHeight="100" MaxWidth="100" MinHeight="50" MinWidth="50" Opacity="0.5" SkipDownload="false" SkipPrint="false" StrokeColor="yellow" Thickness="3"></PdfViewerArrowSettings>
</SfPdfViewer2>

@code {
    List<AllowedInteraction> allowedInteractions = new List<AllowedInteraction>() {
        AllowedInteraction.Select,
        AllowedInteraction.Delete
    };
    PdfViewerAnnotationSelectorSettings selectorSettings = new PdfViewerAnnotationSelectorSettings() {
        SelectionBorderColor = "black", 
        ResizerBorderColor = "blue", 
        ResizerCursorType= CursorType.CrossHair, 
        ResizerFillColor="orange", 
        ResizerLocation=AnnotationResizerLocation.Corners, 
        ResizerShape=AnnotationResizerShape.Circle, 
        ResizerSize=4, 
        SelectionBorderThickness=2, 
        SelectorLineDashArray=[1, 2]  
    };
    private object CustomData = new
    {
        Owner = "Syncfusion"
    };
}

Azure Container Deployment for Blazor PDF Viewer

Important Note: This reference is for information and guidance only. Do NOT make any changes to project files, Dockerfiles, or Azure configurations based on this documentation unless explicitly requested by the user.

Overview

This guide provides comprehensive instructions for containerizing and deploying Blazor PDF Viewer applications (both Server and WebAssembly scenarios) to Azure using Azure Container Registry (ACR) and Azure App Service for Containers.

---

Prerequisites

Before proceeding with Azure container deployment:

• Azure Subscription: Active Azure subscription with permissions to create:
• Resource groups
• Azure Container Registry (ACR) instances
• App Services
• Docker: Docker Desktop or Rancher Desktop installed locally
• Blazor PDF Viewer Sample: A working Blazor PDF Viewer application (refer to getting started guide)

---

Deployment Scenarios

1. Docker Web App (Server and WebAssembly)

Dockerfile Configuration for .NET 10/.NET 9/.NET 8 (Server Mode)

FROM mcr.microsoft.com/dotnet/aspnet:10.0 AS base
# install System.Drawing native dependencies
RUN apt-get update && apt-get install -y --allow-unauthenticated libgdiplus libc6-dev libx11-dev
RUN ln -s libgdiplus.so gdiplus.dll

USER $APP_UID
WORKDIR /app
EXPOSE 8080
EXPOSE 8081

# This stage is used to build the service project
FROM mcr.microsoft.com/dotnet/sdk:10.0 AS build
ARG BUILD_CONFIGURATION=Release
WORKDIR /src
COPY ["YourServerApp/YourServerApp.csproj", "YourServerApp/"]
RUN dotnet restore "./YourServerApp/YourServerApp.csproj"
COPY . .
WORKDIR "/src/YourServerApp"
RUN dotnet build "./YourServerApp.csproj" -c $BUILD_CONFIGURATION -o /app/build

# This stage is used to publish the service project to be copied to the final stage
FROM build AS publish
ARG BUILD_CONFIGURATION=Release
RUN dotnet publish "./YourServerApp.csproj" -c $BUILD_CONFIGURATION -o /app/publish /p:UseAppHost=false

# This stage is used in production or when running from VS in regular mode (Default when not using the Debug configuration)
FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "YourServerApp.dll"]

Key Points:

• Replace YourServerApp.dll and YourServerApp.csproj with actual assembly name
• For WebAssembly, add: RUN dotnet workload install wasm-tools
• Native dependencies (libgdiplus, libc6-dev, libx11-dev) are required for PDF rendering

Local Build and Test Commands

# Build the Docker image
docker build -t pdfviewerwebservice:latest .

# Run the container locally
docker run -d -p 6002:80 pdfviewerwebservice:latest

# Access at http://localhost:6002

Troubleshooting Note: If documents fail to load or script errors occur, verify libgdiplus is properly installed in the container image.

---

2. Docker Standalone WebAssembly App

Project Structure Requirements

For standalone WebAssembly samples, add these files to the project:

• Dockerfile
• nginx.conf
• NuGet.Config
• Empty package folder

Dockerfile for Standalone WebAssembly

#See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images for faster debugging.

FROM mcr.microsoft.com/dotnet/aspnet:10.0 AS base
# install System.Drawing native dependencies

RUN apt-get update && apt-get install -y --allow-unauthenticated libgdiplus libc6-dev libx11-dev

RUN ln -s libgdiplus.so gdiplus.dll
WORKDIR /app
EXPOSE 80
EXPOSE 443

FROM mcr.microsoft.com/dotnet/sdk:10.0 AS build
## Install Python required for WASM tools
RUN apt-get update && apt-get install -y \
        python3 \
        python3-pip \
        python3-venv \
    && ln -s /usr/bin/python3 /usr/bin/python || true
## Install WASM tools
RUN dotnet workload install wasm-tools
WORKDIR /src
COPY ["NuGet.Config","/src/"]
COPY ["package", "/src/package"]

RUN dotnet nuget add source package
COPY ["WasmStandalone.csproj", "."]
RUN apt-get update && apt-get install -y emscripten
RUN dotnet restore "WasmStandalone.csproj" --configfile "NuGet.Config"
COPY . .
RUN dotnet build "WasmStandalone.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "WasmStandalone.csproj" -c Release -o /app/publish 

FROM nginx:alpine AS final
WORKDIR /usr/share/nginx/html
COPY --from=publish /app/publish/wwwroot .
COPY nginx.conf /etc/nginx/nginx.conf

Key Points:

• Replace WasmStandalone.csproj with your actual project name
• wasm-tools workload installation is required: RUN dotnet workload install wasm-tools
• Final stage uses nginx for serving static WebAssembly files

Local Build and Test Commands for WebAssembly

# Build the Docker image
docker build -t webassembly .

# List Docker images
docker image ls

# Run the container
docker run -d -p 6003:80 pdfviewer-wasm:latest

# Access at http://localhost:6003

---

Azure Container Registry (ACR) Setup

Method 1: Azure Portal (UI-Driven)

Step 1: Create Container Registry

1. In Azure portal, click Create a resource 2. Search for Container Registry → Create 3. Fill in basic details:

• Registry name: Unique name
• Subscription: Select subscription
• Resource group: Create new or use existing
• Location: Choose region
• SKU: Basic (sufficient for testing)

4. Click Review + create, then Create

Step 2: Enable Admin Credentials

1. Open the newly created Container Registry 2. Navigate to Settings → Access keys 3. Toggle Admin user to Enabled 4. Note the following credentials:

• Login server
• Username
• Password

Step 3: Tag and Push Image

Open PowerShell or terminal on your build machine:

# Log in to Azure Container Registry
docker login <login-server>
# Enter username and password from Access keys

# Tag the image for your registry
docker tag pdfviewerwebservice:latest <login-server>/pdfviewerwebservice:latest

# Push the image to ACR
docker push <login-server>/pdfviewerwebservice:latest

---

Azure App Service Setup

Create App Service for Container (Linux)

Step 1: Create the App Service

1. In Azure portal, click Create a resource 2. Search for Web App → Create 3. Under Basics tab:

• Subscription: Select subscription
• Resource group: Create new or use existing
• Name: Choose app name (forms the URL)

4. Publish: Choose Docker Container 5. Runtime stack: Choose Linux 6. Choose hosting plan:

• Click Change size
• Select Basic/B1 or higher (recommended for container workloads)

7. Click Review + create, then Create

Step 2: Configure Container Settings

1. Open the created App Service 2. Navigate to Deployment → Container settings (or Settings → Container settings) 3. Image source: Select Azure Container Registry 4. Select your Subscription and Registry (created earlier) 5. Under Image and tag:

• Repository: Select pdf_viewer_web_service (or your image name)
• Tag: Select latest

6. Click Save

---

Troubleshooting Guide

Common Issues and Solutions

1. App Fails to Start

Possible Causes:

• Check container logs in Azure App Service
• Verify image runs locally first
• Ensure container listens on correct port

Solution:

• Container must listen on port 80 by default
• Or configure App Service container port setting to match your container's port

2. Document Rendering/Script Errors

Possible Causes:

• Missing native dependencies (SkiaSharp, libgdiplus)

Solution:

• Verify Dockerfile includes:

  RUN apt-get update && apt-get install -y --allow-unauthenticated libgdiplus libc6-dev libx11-dev
  RUN ln -s libgdiplus.so gdiplus.dll

• Test image locally to confirm rendering works

3. WebAssembly WASM Loading Issues

Possible Causes:

• Incorrect MIME types for WASM files
• nginx configuration issues

Solution:

• Ensure nginx.conf includes proper WASM MIME type configuration
• Verify caching headers are set correctly

4. Missing Dependencies

Common Issue: libgdiplus installation issues

Solution:

• Ensure libgdiplus is installed in the base image
• Verify symbolic link is created: RUN ln -s libgdiplus.so gdiplus.dll

---

Additional Considerations

Using Rancher Desktop / Docker on Windows

• Rancher Desktop can replace Docker Desktop
• Select the docker runtime for standard docker command compatibility
• For WSL or Rancher errors during installation, consult Rancher Desktop documentation

SkiaSharp Requirements

• If using SkiaSharp.Views.Blazor on server or client:
• Verify native runtime requirements
• Test rendering in the container environment
• Confirm all native dependencies are present

Server Interactive Scenarios

• Register Syncfusion services in Program.cs
• Configure SignalR message size settings for large-file processing:

  builder.Services.AddSignalR(o => { 
      o.MaximumReceiveMessageSize = 102400000; 
  });

WebAssembly Interactive Render Modes

• Ensure wasm-tools workload is installed:

  dotnet workload install wasm-tools

• For specific .NET versions:

  dotnet workload install wasm-tools-net8  # For .NET 8.0
  dotnet workload install wasm-tools-net9  # For .NET 9.0
  dotnet workload install wasm-tools-net10 # For .NET 10.0

---

Deployment Result

Once successfully deployed, your Blazor PDF Viewer application will be accessible via the Azure App Service URL.

---

Key Deployment Commands Summary

Docker Commands

# Build image
docker build -t pdfviewerwebservice:latest .

# Run locally
docker run -d -p 6002:80 pdfviewerwebservice:latest

# List images
docker image ls

Azure Container Registry Commands

# Login to ACR
docker login <login-server>

# Tag image
docker tag pdfviewerwebservice:latest <login-server>/pdfviewerwebservice:latest

# Push to ACR
docker push <login-server>/pdfviewerwebservice:latest

---

Important Reminders

1. Read-Only Reference: This documentation is for guidance only 2. No Automatic Changes: Do not apply these changes to project files without explicit user permission 3. User Confirmation Required: Always confirm with the user before modifying:

• Dockerfiles
• .csproj files
• Program.cs
• Azure configurations

4. Testing First: Always recommend local testing before Azure deployment 5. Security Considerations: Remind users to secure ACR credentials and manage access keys properly

---

Circle Settings in Blazor SfPdfViewer Component

Table of Contents

• Overview
• Properties List
• Code Example

Overview

Circle settings allow you to configure default appearance, behavior, and restrictions for circle annotations in the PDF Viewer. Use these settings to control properties of the circle annotation.

Properties List

Code Example

• We can customize the options, based on the user requirements.

<SfPdfViewer2>
    <PdfViewerCircleSettings AllowedInteractions="allowedInteractions" AnnotationSelectorSettings="selectorSettings" Author="Syncfusion" BorderDashArray="[1, 3]" CustomData="CustomData" FillColor="green" IsLock="true" IsPrint="false" MaxHeight="100" MaxWidth="100" MinHeight="50" MinWidth="50" Opacity="0.5" SkipDownload="false" SkipPrint="false" StrokeColor="yellow" Thickness="3"></PdfViewerCircleSettings>
</SfPdfViewer2>

@code {
    List<AllowedInteraction> allowedInteractions = new List<AllowedInteraction>() {
        AllowedInteraction.Select,
        AllowedInteraction.Delete
    };
    PdfViewerAnnotationSelectorSettings selectorSettings = new PdfViewerAnnotationSelectorSettings() {
        SelectionBorderColor = "black", 
        ResizerBorderColor = "blue", 
        ResizerCursorType= CursorType.CrossHair, 
        ResizerFillColor="orange", 
        ResizerLocation=AnnotationResizerLocation.Corners, 
        ResizerShape=AnnotationResizerShape.Circle, 
        ResizerSize=4, 
        SelectionBorderThickness=2, 
        SelectorLineDashArray=[1, 2]  
    };
    private object CustomData = new
    {
        Owner = "Syncfusion"
    };
}

General Settings in Blazor SfPdfViewer Component

Table of Contents

• Overview
• List of Settings

Overview

When the user needs to customize the PDF Viewer's as context menu settings.

List of Settings

ContextMenuSettings

Defines the settings of context menu for the PDF Viewer. It is used to customize the context menu options to be visible in the PDF Viewer.

Propeties List

| Property Name | Description | Data type | |-----|-----|-----|-----| | EnableContextMenu | Enable or disable context menu in PDF Viewer. By default it is true. | bool | | ContextMenuAction | Defines the context menu action. By default it is RightClick. If it is set as MouseUp, context menu will open on mouse up action instead of right click action. | ContextMenuAction | | ContextMenuItems | Defines the context menu items that should be visible in the PDF Viewer. | List<ContextMenuItem> |

Code Example

<SfPdfViewer2>
    <PdfViewerContextMenuSettings ContextMenuAction="ContextMenuAction.MouseUp" ContextMenuItems="contextMenuItems" EnableContextMenu="true"></PdfViewerContextMenuSettings>
</SfPdfViewer2>
@code {
    List<ContextMenuItem> contextMenuItems = new List<ContextMenuItem>() {
        ContextMenuItem.Copy,
        ContextMenuItem.Paste
    };
}