Text search in Blazor PDF Viewer
10 Jun 20263 minutes to read
The text search feature in the Blazor PDF Viewer locates and highlights matching content within a document. Enable or disable this capability with the following configuration.
NOTE
The text search functionality requires setting
EnableTextSearchproperty totrue. Otherwise, the search UI and APIs will not be accessible.
Text search features in UI
Search text with the Match Case option
Enable the Match Case checkbox to limit results to case-sensitive matches. Navigation commands then step through each exact match in sequence.
Search text without Match Case
Leave the Match Case option cleared to highlight every occurrence of the query, regardless of capitalization, and navigate through each result.
Programmatic text Search
The Blazor PDF Viewer provides options to toggle text search feature and APIs to customize the text search behavior programmatically.
Enable or Disable Text Search
Use the following snippet to enable or disable text search features
@using Syncfusion.Blazor.SfPdfViewer
<SfPdfViewer2 EnableTextSearch="true"
DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
Height="100%"
Width="100%">
</SfPdfViewer2>Programmatic text search
While the PDF Viewer toolbar offers an interactive search experience, you can also trigger and customize searches programmatically by calling the following APIs.
SearchTextAsync
Use the SearchTextAsync method to start a search with optional filters that control case sensitivity.
// SearchTextAsync(string searchText, bool isMatchCase)
await pdfViewer.SearchTextAsync("search text", false);Set the isMatchCase parameter to true to perform a case-sensitive search that mirrors the Match Case option in the search panel.
// This will only find instances of "PDF" in uppercase.
await pdfViewer.SearchTextAsync("PDF", true);SearchNextAsync
SearchNextAsync method searches the next occurrence of the current query from the active match.
// SearchNextAsync()
await pdfViewer.SearchNextAsync();SearchPreviousAsync
SearchPreviousAsync method searches the previous occurrence of the current query from the active match.
// SearchPreviousAsync()
await pdfViewer.SearchPreviousAsync();CancelTextSearchAsync
CancelTextSearchAsync method cancels the current text search and removes the highlighted occurrences from the PDF Viewer.
// CancelTextSearchAsync()
await pdfViewer.CancelTextSearchAsync();Complete Example
Use the following code snippet to implement text search using SearchTextAsync API
<button @onclick="SearchText">Search Text</button>
<button @onclick="PreviousSearch">Previous Search</button>
<button @onclick="NextSearch">Next Search</button>
<button @onclick="CancelSearch">Cancel Search</button>
<SfPdfViewer2 @ref="pdfViewer"
DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
Height="100%"
Width="100%">
</SfPdfViewer2>
@code {
private SfPdfViewer2 pdfViewer;
private async Task SearchText()
{
await pdfViewer.SearchTextAsync("pdf", false);
}
private async Task PreviousSearch()
{
await pdfViewer.SearchPreviousAsync();
}
private async Task NextSearch()
{
await pdfViewer.SearchNextAsync();
}
private async Task CancelSearch()
{
await pdfViewer.CancelTextSearchAsync();
}
}Expected result: the viewer highlights occurrences of pdf and navigation commands jump between matches.
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";
}