Syncfusion AI Assistant

How can I help you?

Text Search in Blazor SfPdfViewer Component

12 Feb 20264 minutes to read

Use the built-in toolbar to find text in a PDF document. When a search is initiated, the viewer highlights all matches across pages and supports navigation between occurrences with next and previous controls.

Blazor SfPdfViewer text search

Enable or disable the text search UI using the EnableTextSearch property. When disabled, search commands are unavailable.

@using Syncfusion.Blazor.SfPdfViewer

<SfPdfViewer2 Height="100%" Width="100%" DocumentPath="@DocumentPath" EnableTextSearch="true" />

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

Text search can also be performed programmatically using the following APIs: SearchTextAsync, SearchNextAsync, SearchPreviousAsync, and CancelTextSearchAsync. These APIs enable programmatic control of search initiation, navigation, and cancellation.

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

<div style="display:inline-block">
    <SfButton OnClick="OnSearchClick">Search Text</SfButton>
</div>

<div style="display:inline-block">
    <SfButton OnClick="OnSearchNext">Search Next</SfButton>
</div>

<div style="display:inline-block">
    <SfButton OnClick="OnSearchPrevious">Search Previous</SfButton>
</div>

<div style="display:inline-block">
    <SfButton OnClick="OnCancelSearch">Cancel Search</SfButton>
</div>

<SfPdfViewer2 Height="100%" Width="100%" DocumentPath="@DocumentPath" @ref="@Viewer" />

@code {
    SfPdfViewer2 Viewer;
    public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf";

    public async void OnSearchClick(MouseEventArgs args)
    {
        //Here PDF is to be serached from the loaded document
        await Viewer.SearchTextAsync("pdf", false);
    }

    public async void OnSearchNext(MouseEventArgs args)
    {
        await Viewer.SearchNextAsync();
    }

    public async void OnSearchPrevious(MouseEventArgs args)
    {
        await Viewer.SearchPreviousAsync();
    }

    public async void OnCancelSearch(MouseEventArgs args)
    {
        await Viewer.CancelTextSearchAsync();
    }

}

Customize text search highlight colors

Use the PdfViewerTextSearchColorSettings to customize the highlight appearance used for search results. Configure SearchColor for other matches and SearchHighlightColor for the current match. By default, distinct colors are applied for the current occurrence and other matches; adjust these to align with application theme and accessibility contrast requirements.

@using Syncfusion.Blazor.SfPdfViewer

<SfPdfViewer2 Height="100%" Width="100%" DocumentPath="@DocumentPath">
    <PdfViewerTextSearchColorSettings SearchColor="blue" SearchHighlightColor="red"></PdfViewerTextSearchColorSettings>
</SfPdfViewer2>

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

Blazor SfPdfViewer text search highlight color customization

Text search events

The following events are available for text search in the SfPdfViewer component.

Name Description
OnTextSearchStart Triggers when a text search begins.
OnTextSearchComplete Triggers when a text search completes.
OnTextSearchHighlight Triggers when search results are highlighted.

OnTextSearchStart event

The OnTextSearchStart event triggers when a text search begins.

Event arguments

See TextSearchStartEventArgs for details such as SearchText and MatchCase.

The following example illustrates how to handle the OnTextSearchStart event.

@using Syncfusion.Blazor.SfPdfViewer 
<SfPdfViewer2 DocumentPath="@DocumentPath" Height="100%" Width="100%"> 
    <PdfViewerEvents OnTextSearchStart="@TextSearchStart"></PdfViewerEvents>
</SfPdfViewer2>
@code{ 
    private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succintly.pdf"; 
    public async Task TextSearchStart(TextSearchStartEventArgs args) 
    {
        Console.WriteLine($"Text search word: {args.SearchText}");
    }	 
}

OnTextSearchComplete event

The OnTextSearchComplete event triggers when a text search completes.

Event arguments

See TextSearchCompleteEventArgs for details such as total match counts and summary information.

The following example illustrates how to handle the OnTextSearchComplete event.

@using Syncfusion.Blazor.SfPdfViewer 
<SfPdfViewer2 DocumentPath="@DocumentPath" Height="100%" Width="100%"> 
    <PdfViewerEvents OnTextSearchComplete="@TextSearchComplete"></PdfViewerEvents>
</SfPdfViewer2>
@code{ 
    private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succintly.pdf"; 
    public async Task TextSearchComplete(TextSearchCompleteEventArgs args) 
    {
        Console.WriteLine("Text search completed");
    }	 
}

OnTextSearchHighlight event

The OnTextSearchHighlight event triggers when search results are highlighted on the page.

Event arguments

See TextSearchHighlightEventArgs for details such as highlight bounds and PageNumber.

The following example illustrates how to handle the OnTextSearchHighlight event.

@using Syncfusion.Blazor.SfPdfViewer 
<SfPdfViewer2 DocumentPath="@DocumentPath" Height="100%" Width="100%"> 
    <PdfViewerEvents OnTextSearchHighlight="@TextSearchHighlight"></PdfViewerEvents>
</SfPdfViewer2>
@code{ 
    private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succintly.pdf"; 
    public async Task TextSearchHighlight(TextSearchHighlightEventArgs args) 
    {
        Console.WriteLine($"Highlighted word pagenumber : {args.PageNumber}");
    }	 
}

See Also