Text Search in Blazor SfPdfViewer Component
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.
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.
@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 current and other occurrences; adjust these to align with application theme 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";
}
Text Search Events
The following events are available for text search in the SfPdfViewer component.
| Name | Description |
|---|---|
| OnTextSearchStart | Triggers when a text search starts. |
| OnTextSearchComplete | Triggers when a text search is completed. |
| OnTextSearchHighlight | Triggers when searched text is highlighted. |
OnTextSearchStart Event
The OnTextSearchStart event triggers when the text search is started.
Event Arguments
See TextSearchStartEventArgs for details such as matchcase, search text.
The following example illustrates how to handle the TextSearchStart 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 the text search is completed.
Event Arguments
TextSearchCompleteEventArgs triggers when the text search is completed.
The following example illustrates how to handle the TextSearchComplete 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 the text search text is highlighted.
Event Arguments
TextSearchHighlightEventArgs for details such as bounds, pagenumber of the highlighted text.
The following example illustrates how to handle the TextSearchHighlight 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}");
}
}