|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Text search in Blazor PDF Viewer Component | Syncfusion |
| 4 | +description: Learn how to configure text search and run programmatic searches in the Syncfusion Blazor PDF Viewer. |
| 5 | +platform: document-processing |
| 6 | +control: Text search |
| 7 | +documentation: ug |
| 8 | +domainurl: ##DomainURL## |
| 9 | +--- |
| 10 | + |
| 11 | +# Text search in Blazor PDF Viewer |
| 12 | + |
| 13 | +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. |
| 14 | + |
| 15 | + |
| 16 | + |
| 17 | +N> The text search functionality requires setting [`EnableTextSearch`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableTextSearch) property to `true`. Otherwise, the search UI and APIs will not be accessible. |
| 18 | + |
| 19 | +## Text search features in UI |
| 20 | + |
| 21 | +### Search text with the Match Case option |
| 22 | + |
| 23 | +Enable the Match Case checkbox to limit results to case-sensitive matches. Navigation commands then step through each exact match in sequence. |
| 24 | + |
| 25 | + |
| 26 | + |
| 27 | +### Search text without Match Case |
| 28 | + |
| 29 | +Leave the Match Case option cleared to highlight every occurrence of the query, regardless of capitalization, and navigate through each result. |
| 30 | + |
| 31 | + |
| 32 | + |
| 33 | +## Programmatic text Search |
| 34 | + |
| 35 | +The Blazor PDF Viewer provides options to toggle text search feature and APIs to customize the text search behavior programmatically. |
| 36 | + |
| 37 | +### Enable or Disable Text Search |
| 38 | + |
| 39 | +Use the following snippet to enable or disable text search features |
| 40 | + |
| 41 | +{% tabs %} |
| 42 | +{% highlight razor%} |
| 43 | +@using Syncfusion.Blazor.SfPdfViewer |
| 44 | + |
| 45 | +<SfPdfViewer2 EnableTextSearch="true" |
| 46 | + DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" |
| 47 | + Height="100%" |
| 48 | + Width="100%"> |
| 49 | +</SfPdfViewer2> |
| 50 | +{% endhighlight %} |
| 51 | +{% endtabs %} |
| 52 | + |
| 53 | +### Programmatic text search |
| 54 | + |
| 55 | +While the PDF Viewer toolbar offers an interactive search experience, you can also trigger and customize searches programmatically by calling the following APIs. |
| 56 | + |
| 57 | +#### `SearchTextAsync` |
| 58 | + |
| 59 | +Use the [`SearchTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_SearchTextAsync_System_String_System_Boolean_) method to start a search with optional filters that control case sensitivity. |
| 60 | + |
| 61 | +```cshtml |
| 62 | +// SearchTextAsync(string searchText, bool isMatchCase) |
| 63 | +await pdfViewer.SearchTextAsync("search text", false); |
| 64 | +``` |
| 65 | + |
| 66 | +Set the `isMatchCase` parameter to `true` to perform a case-sensitive search that mirrors the Match Case option in the search panel. |
| 67 | + |
| 68 | +```cshtml |
| 69 | +// This will only find instances of "PDF" in uppercase. |
| 70 | +await pdfViewer.SearchTextAsync("PDF", true); |
| 71 | +``` |
| 72 | + |
| 73 | +#### `SearchNextAsync` |
| 74 | + |
| 75 | +[`SearchNextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_SearchNextAsync) method searches the next occurrence of the current query from the active match. |
| 76 | + |
| 77 | +```cshtml |
| 78 | +// SearchNextAsync() |
| 79 | +await pdfViewer.SearchNextAsync(); |
| 80 | +``` |
| 81 | + |
| 82 | +#### `SearchPreviousAsync` |
| 83 | + |
| 84 | +[`SearchPreviousAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_SearchPreviousAsync) method searches the previous occurrence of the current query from the active match. |
| 85 | + |
| 86 | +```cshtml |
| 87 | +// SearchPreviousAsync() |
| 88 | +await pdfViewer.SearchPreviousAsync(); |
| 89 | +``` |
| 90 | + |
| 91 | +#### `CancelTextSearchAsync` |
| 92 | + |
| 93 | +[`CancelTextSearchAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_CancelTextSearchAsync) method cancels the current text search and removes the highlighted occurrences from the PDF Viewer. |
| 94 | + |
| 95 | +```cshtml |
| 96 | +// CancelTextSearchAsync() |
| 97 | +await pdfViewer.CancelTextSearchAsync(); |
| 98 | +``` |
| 99 | + |
| 100 | +#### Complete Example |
| 101 | + |
| 102 | +Use the following code snippet to implement text search using SearchTextAsync API |
| 103 | + |
| 104 | +{% tabs %} |
| 105 | +{% highlight razor %} |
| 106 | +<button @onclick="SearchText">Search Text</button> |
| 107 | +<button @onclick="PreviousSearch">Previous Search</button> |
| 108 | +<button @onclick="NextSearch">Next Search</button> |
| 109 | +<button @onclick="CancelSearch">Cancel Search</button> |
| 110 | + |
| 111 | +<SfPdfViewer2 @ref="pdfViewer" |
| 112 | + DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" |
| 113 | + Height="100%" |
| 114 | + Width="100%"> |
| 115 | +</SfPdfViewer2> |
| 116 | + |
| 117 | +@code { |
| 118 | + private SfPdfViewer2 pdfViewer; |
| 119 | + |
| 120 | + private async Task SearchText() |
| 121 | + { |
| 122 | + await pdfViewer.SearchTextAsync("pdf", false); |
| 123 | + } |
| 124 | + |
| 125 | + private async Task PreviousSearch() |
| 126 | + { |
| 127 | + await pdfViewer.SearchPreviousAsync(); |
| 128 | + } |
| 129 | + |
| 130 | + private async Task NextSearch() |
| 131 | + { |
| 132 | + await pdfViewer.SearchNextAsync(); |
| 133 | + } |
| 134 | + |
| 135 | + private async Task CancelSearch() |
| 136 | + { |
| 137 | + await pdfViewer.CancelTextSearchAsync(); |
| 138 | + } |
| 139 | +} |
| 140 | +{% endhighlight %} |
| 141 | +{% endtabs %} |
| 142 | + |
| 143 | +**Expected result:** the viewer highlights occurrences of `pdf` and navigation commands jump between matches. |
| 144 | + |
| 145 | +### Customize text search highlight colors |
| 146 | + |
| 147 | +Use the [PdfViewerTextSearchColorSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerTextSearchColorSettings.html) to customize the highlight appearance used for search results. Configure [SearchColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerTextSearchColorSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerTextSearchColorSettings_SearchColor) for other matches and [SearchHighlightColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerTextSearchColorSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerTextSearchColorSettings_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. |
| 148 | + |
| 149 | +{% tabs %} |
| 150 | +{% highlight razor %} |
| 151 | +@using Syncfusion.Blazor.SfPdfViewer |
| 152 | + |
| 153 | +<SfPdfViewer2 Height="100%" Width="100%" DocumentPath="@DocumentPath"> |
| 154 | + <PdfViewerTextSearchColorSettings SearchColor="blue" SearchHighlightColor="red"></PdfViewerTextSearchColorSettings> |
| 155 | +</SfPdfViewer2> |
| 156 | + |
| 157 | +@code{ |
| 158 | + public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf"; |
| 159 | +} |
| 160 | +{% endhighlight %} |
| 161 | +{% endtabs %} |
| 162 | + |
| 163 | + |
| 164 | + |
| 165 | + |
| 166 | +## See also |
| 167 | + |
| 168 | +- [Text Search Events](./text-search-events) |
| 169 | +- [Text Selection](../text-selection/overview) |
0 commit comments