Text Search in PDF Viewer component
11 Oct 202411 minutes to read
The Text Search option in PDF Viewer is used to find and highlight the text content from the document. You can enable/disable the text search using the following code snippet.
<div style="width:100%;height:600px">
<ejs-pdfviewer id="pdfviewer"
style="height:600px"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
enableTextSearch="true">
</ejs-pdfviewer>
</div><div style="width:100%;height:600px">
<ejs-pdfviewer id="pdfviewer"
style="height:600px"
serviceUrl="/api/PdfViewer"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
enableTextSearch="true">
</ejs-pdfviewer>
</div>
Real time search suggestion while typing
Entering text into the search input dynamically displays search suggestions based on the provided input. The suggestions are updated in real-time as text is typed, offering relevant matches from the available content. This feature enhances the search experience by allowing quick access to potential results while typing.
Selecting Search Suggestions from the Popup
Entering text into the search input triggers a popup displaying relevant suggestions based on the input. Selecting a suggestion from the popup enables direct navigation to its occurrences in the document.
Search Text with enabling ‘Match Case’ checkbox
By enabling the ‘Match Case’ option and entering text into the search input, only the exact case-sensitive matches in the document are highlighted. This feature allows navigation through each occurrence of the exact text match within the document.
Search Text without enabling ‘Match Case’ checkbox
When text is entered into the search input without enabling the ‘Match Case’ option, all instances of the text, regardless of case, are highlighted in the document. This allows easy navigation through every occurrence of the search term.
Search list of text by enabling ‘Match Any Word’ checkbox
When the ‘Match Any Word’ option is enabled, the entered text in the search input is split into individual words based on spaces. As the text is typed, the popup dynamically displays search suggestions for each word in real time, highlighting potential matches within the document.
Find text method
Searches for the specified text or 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. If a specific page index is provided, it returns the bounding rectangles for these search strings on that page; otherwise, it returns the bounding rectangles for all pages in the document where the strings were found.
Find and get the bounds of a text
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 below code snippet shows how to get the bounds of the given text:
<button type="button" onclick="findTextBounds()">FindTextBounds</button>
<div style="width:100%;height:600px">
<ejs-pdfviewer id="pdfviewer"
style="height:600px"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
resourceUrl="https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib">
</ejs-pdfviewer>
</div>
<script>
function findTextBounds() {
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
console.log(viewer.textSearch.findText('pdf', false));
}
</script><button type="button" onclick="findTextBounds()">FindTextBounds</button>
<div style="width:100%;height:600px">
<ejs-pdfviewer id="pdfviewer"
style="height:600px"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
serviceUrl="/api/PdfViewer">
</ejs-pdfviewer>
</div>
<script>
function findTextBounds() {
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
console.log(viewer.textSearch.findText('pdf', false));
}
</script>Find and get the bounds of a text on the desired page
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 below code snippet shows how to get the bounds of the given text from the desired page:
<button type="button" onclick="findTextBounds()">FindTextBounds</button>
<div style="width:100%;height:600px">
<ejs-pdfviewer id="pdfviewer"
style="height:600px"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
resourceUrl="https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib">
</ejs-pdfviewer>
</div>
<script>
function findTextBounds() {
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
console.log(viewer.textSearch.findText('pdf', false, 7));
}
</script><button type="button" onclick="findTextBounds()">FindTextBounds</button>
<div style="width:100%;height:600px">
<ejs-pdfviewer id="pdfviewer"
style="height:600px"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
serviceUrl="/api/PdfViewer">
</ejs-pdfviewer>
</div>
<script>
function findTextBounds() {
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
console.log(viewer.textSearch.findText('pdf', false, 7));
}
</script>Find and get the bounds of the list of text
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.
<button type="button" onclick="findTextBounds()">FindTextBounds</button>
<div style="width:100%;height:600px">
<ejs-pdfviewer id="pdfviewer"
style="height:600px"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
resourceUrl="https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib">
</ejs-pdfviewer>
</div>
<script>
function findTextBounds() {
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
console.log(viewer.textSearch.findText(['pdf', 'adobe'], false));
}
</script><button type="button" onclick="findTextBounds()">FindTextBounds</button>
<div style="width:100%;height:600px">
<ejs-pdfviewer id="pdfviewer"
style="height:600px"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
serviceUrl="/api/PdfViewer">
</ejs-pdfviewer>
</div>
<script>
function findTextBounds() {
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
console.log(viewer.textSearch.findText(['pdf', 'adobe'], false));
}
</script>Find and get the bounds of the list of text on desired page
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.
<button type="button" onclick="findTextBounds()">FindTextBounds</button>
<div style="width:100%;height:600px">
<ejs-pdfviewer id="pdfviewer"
style="height:600px"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
resourceUrl="https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib">
</ejs-pdfviewer>
</div>
<script>
function findTextBounds() {
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
console.log(viewer.textSearch.findText(['pdf', 'adobe'], false, 7));
}
</script><button type="button" onclick="findTextBounds()">FindTextBounds</button>
<div style="width:100%;height:600px">
<ejs-pdfviewer id="pdfviewer"
style="height:600px"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
serviceUrl="/api/PdfViewer">
</ejs-pdfviewer>
</div>
<script>
function findTextBounds() {
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
console.log(viewer.textSearch.findText(['pdf', 'adobe'], false, 7));
}
</script>