Skip to content

Commit 631a6eb

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
996399: Updated Text Search UG
1 parent 163cad4 commit 631a6eb

3 files changed

Lines changed: 425 additions & 0 deletions

File tree

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/find-text.md‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
---
2+
layout: post
3+
title: Find Text in TypeScript PDF Viewer control | Syncfusion
4+
description: Learn how to configure text search using find text and run programmatic searches in the Syncfusion TypeScript PDF Viewer.
5+
platform: document-processing
6+
control: Text search
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Find text method
12+
Use the `findText` method to locate a string or an array of strings and return the bounding rectangles for each match. Optional parameters support case-sensitive comparisons and page scoping so you can retrieve coordinates for a single page or the entire document.
13+
14+
## Find and get the bounds of a text
15+
Searches for the specified text within the document and returns the bounding rectangles of the matched text. The search can be case-sensitive based on the provided parameter. It returns the bounding rectangles for all pages in the document where the text was found. The following code snippet shows how to get the bounds of the specified text:
16+
The following code snippet shows how to get the bounds of the specified text:
17+
18+
```html
19+
<div id="textbounds"><button>FindTextBounds</button></div>
20+
```
21+
22+
{% tabs %}
23+
{% highlight ts tabtitle="Standalone" %}
24+
25+
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
26+
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, PageOrganizer} from "../src/index";
27+
28+
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
29+
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, PageOrganizer);
30+
31+
let viewer: PdfViewer = new PdfViewer();
32+
viewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
33+
document.getElementById('textbounds').addEventListener('click', function() {
34+
console.log(viewer.textSearch.findText('pdf', false));
35+
});
36+
viewer.appendTo("#pdfViewer");
37+
38+
{% endhighlight %}
39+
{% highlight ts tabtitle="Server-backed" %}
40+
41+
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
42+
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, PageOrganizer} from "../src/index";
43+
44+
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
45+
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, PageOrganizer);
46+
47+
let viewer: PdfViewer = new PdfViewer();
48+
viewer.serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
49+
viewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
50+
document.getElementById('textbounds').addEventListener('click', function() {
51+
console.log(viewer.textSearch.findText('pdf', false));
52+
});
53+
viewer.appendTo("#pdfViewer");
54+
55+
{% endhighlight %}
56+
{% endtabs %}
57+
58+
## Find and get the bounds of a text on the desired page
59+
Searches for the specified text within the document and returns the bounding rectangles of the matched text. The search can be case-sensitive based on the provided parameter. It returns the bounding rectangles for that page in the document where the text was found. The following code snippet shows how to retrieve bounds for the specified text on a selected page:
60+
The following code snippet shows how to retrieve bounds for the specified text on a selected page:
61+
62+
```html
63+
<div id="textbounds"><button>FindTextBounds</button></div>
64+
```
65+
66+
{% tabs %}
67+
{% highlight ts tabtitle="Standalone" %}
68+
69+
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
70+
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, PageOrganizer} from "../src/index";
71+
72+
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
73+
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, PageOrganizer);
74+
75+
let viewer: PdfViewer = new PdfViewer();
76+
viewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
77+
document.getElementById('textbounds').addEventListener('click', function() {
78+
console.log(viewer.textSearch.findText('pdf', false, 7));
79+
});
80+
viewer.appendTo("#pdfViewer");
81+
82+
{% endhighlight %}
83+
{% highlight ts tabtitle="Server-backed" %}
84+
85+
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
86+
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, PageOrganizer} from "../src/index";
87+
88+
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
89+
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, PageOrganizer);
90+
91+
let viewer: PdfViewer = new PdfViewer();
92+
viewer.serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
93+
viewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
94+
document.getElementById('textbounds').addEventListener('click', function() {
95+
console.log(viewer.textSearch.findText('pdf', false, 7));
96+
});
97+
viewer.appendTo("#pdfViewer");
98+
99+
{% endhighlight %}
100+
{% endtabs %}
101+
102+
## Find and get the bounds of the list of text
103+
Searches for an array of strings within the document and returns the bounding rectangles for each occurrence. The search can be case-sensitive based on the provided parameters. It returns the bounding rectangles for all pages in the document where the strings were found.
104+
105+
```html
106+
<div id="textbounds"><button>FindTextBounds</button></div>
107+
```
108+
109+
{% tabs %}
110+
{% highlight ts tabtitle="Standalone" %}
111+
112+
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
113+
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, PageOrganizer} from "../src/index";
114+
115+
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
116+
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, PageOrganizer);
117+
118+
let viewer: PdfViewer = new PdfViewer();
119+
viewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
120+
document.getElementById('textbounds').addEventListener('click', function() {
121+
console.log(viewer.textSearch.findText(['adobe', 'pdf'], false));
122+
});
123+
viewer.appendTo("#pdfViewer");
124+
125+
{% endhighlight %}
126+
{% highlight ts tabtitle="Server-backed" %}
127+
128+
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
129+
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, PageOrganizer} from "../src/index";
130+
131+
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
132+
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, PageOrganizer);
133+
134+
let viewer: PdfViewer = new PdfViewer();
135+
viewer.serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
136+
viewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
137+
document.getElementById('listTextbounds').addEventListener('click', function() {
138+
console.log(viewer.textSearch.findText(['adobe', 'pdf'], false));
139+
});
140+
viewer.appendTo("#pdfViewer");
141+
142+
{% endhighlight %}
143+
{% endtabs %}
144+
145+
## Find and get the bounds of the list of text on desired page
146+
Searches for an array of strings within the document and returns the bounding rectangles for each occurrence. The search can be case-sensitive based on the provided parameters. It returns the bounding rectangles for these search strings on that particular page where the strings were found.
147+
148+
```html
149+
<div id="textbounds"><button>FindTextBounds</button></div>
150+
```
151+
152+
{% tabs %}
153+
{% highlight ts tabtitle="Standalone" %}
154+
155+
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
156+
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, PageOrganizer} from "../src/index";
157+
158+
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
159+
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, PageOrganizer);
160+
161+
let viewer: PdfViewer = new PdfViewer();
162+
viewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
163+
document.getElementById('textbounds').addEventListener('click', function() {
164+
console.log(viewer.textSearch.findText(['adobe', 'pdf'], false, 7));
165+
});
166+
viewer.appendTo("#pdfViewer");
167+
168+
{% endhighlight %}
169+
{% highlight ts tabtitle="Server-backed" %}
170+
171+
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
172+
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, PageOrganizer} from "../src/index";
173+
174+
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
175+
TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner, PageOrganizer);
176+
177+
let viewer: PdfViewer = new PdfViewer();
178+
viewer.serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
179+
viewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
180+
document.getElementById('listTextbounds').addEventListener('click', function() {
181+
console.log(viewer.textSearch.findText(['adobe', 'pdf'], false, 7));
182+
});
183+
viewer.appendTo("#pdfViewer");
184+
185+
{% endhighlight %}
186+
{% endtabs %}

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/text-search-events.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
layout: post
3+
title: Text search Events in TypeScript PDF Viewer control | Syncfusion
4+
description: Learn how to handle text search events, and run programmatic searches in the Syncfusion TypeScript PDF Viewer.
5+
platform: document-processing
6+
control: Text search
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Text Search Events
12+
13+
The PDF Viewer triggers events during text search operations, allowing you to customize behavior and respond to different stages of the search process.
14+
15+
## textSearchStart
16+
17+
The [textSearchStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer#textsearchstartevent) event fires as soon as a search begins from the toolbar interface or through the `textSearch.searchText` method. Use it to reset UI state, log analytics, or cancel the default search flow before results are processed.
18+
19+
- Event arguments: [TextSearchStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchStartEventArgs) exposes:
20+
- `searchText`: the term being searched.
21+
- `matchCase`: indicates whether case-sensitive search is enabled.
22+
- `isMatchWholeWord`: indicates whether whole-word matching is enabled.
23+
- `name`: event name.
24+
- `cancel`: set to `true` to stop the default search.
25+
26+
```typescript
27+
const viewer: PdfViewer = new PdfViewer({
28+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
29+
textSearchStart: function (args: any) {
30+
// args.searchText contains the term being searched
31+
// args.cancel can be set to true to stop the default search
32+
console.log(`Text search started for: "${args.searchText}"`);
33+
}
34+
});
35+
viewer.appendTo('#pdfViewer');
36+
```
37+
38+
## textSearchHighlight
39+
40+
The [textSearchHighlight](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer#textsearchhighlightevent) event triggers whenever a search result is brought into view, including navigation between matches. Use it to draw custom overlays or synchronize adjacent UI elements when a match is highlighted.
41+
42+
- Event arguments: [TextSearchHighlightEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchHighlightEventArgs) exposes:
43+
- `bounds`: `RectangleBoundsModel | RectangleBoundsModel[]` representing the highlighted match.
44+
- `pageNumber`: page index where the match is highlighted.
45+
- `searchText`: the active search term.
46+
- `matchCase`: indicates whether case-sensitive search was used.
47+
- `name`: event name.
48+
49+
```typescript
50+
const viewer: PdfViewer = new PdfViewer({
51+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
52+
textSearchHighlight: function (args: any) {
53+
// args.bounds provides the rectangle(s) of the current match
54+
console.log('Highlighted match bounds:', args.bounds);
55+
}
56+
});
57+
viewer.appendTo('#pdfViewer');
58+
```
59+
60+
## textSearchComplete
61+
62+
The [textSearchComplete](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textsearchcompleteevent) event runs after the search engine finishes scanning the document for the current query. Use it to update match counts, toggle navigation controls, or notify users when no results were found.
63+
64+
- Typical uses:
65+
- Update UI with the total number of matches and enable navigation controls.
66+
- Hide loading indicators or show a "no results" message if none were found.
67+
- Record analytics for search effectiveness.
68+
- Event arguments: [TextSearchCompleteEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchCompleteEventArgs/) exposes:
69+
- `totalMatches`: total number of occurrences found.
70+
- `isMatchFound`: indicates whether at least one match was found.
71+
- `searchText`: the searched term.
72+
- `matchCase`: indicates whether case-sensitive search was used.
73+
- `name`: event name.
74+
75+
```typescript
76+
const viewer: PdfViewer = new PdfViewer({
77+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
78+
textSearchComplete: (args: any) => {
79+
// args.totalMatches may indicate how many results were found (when available)
80+
console.log('Text search completed.', args);
81+
}
82+
});
83+
viewer.appendTo('#pdfViewer');
84+
```

0 commit comments

Comments
 (0)