Indicates whether all matches instead of just the first match should be returned from searching between the provided bounds.
Object.defineProperty(DocumentViewerFindText.prototype, 'findAll',
get: function(),
set: function(value)
)
findAll: boolean;
true to always search through the entire bounds and return all matches, or false to stop searching after finding the first match. The default value is true.
If FindAll is true, DocumentViewerText.Find will always search completely through the BeginPosition and EndPosition bounds (though order may differ due to Start), and all results will be returned. This usually results in a much longer find operation, and if DocumentViewerText.AutoGetText is true then each page without parsed text will need to be parsed as well.
Additionally, if FindAll is true then the value of Loop does not matter.
SelectFirstResult can be used to select the first result and bring it into view automatically.
For more information, refer to DocumentViewerText.Find.
History
import { ViewerInitializer } from "../utilities/ViewerInitializer";
export class TextFindTSExample {
public run = () => {
new ViewerInitializer(this.textExample);
}
textExample = (documentViewer: lt.Document.Viewer.DocumentViewer) => {
const output = document.getElementById('output');
const text = documentViewer.text;
// Make sure we get the page text if necessary (otherwise, results may be empty!)
text.autoGetText = true;
// We will find all matches of "LEAD", ignoring the case
const options = new lt.Document.Viewer.DocumentViewerFindText();
// The text
options.text = "LEAD";
// Ignore case
options.matchCase = false;
// Any word that contains the phrase
options.wholeWordsOnly = false;
// Find all results in the bounds, not just the first
options.findAll = true;
// Highlight the results in the View
options.renderResults = true;
// Optionally, change the highlight color
lt.Document.Viewer.DocumentViewerText.foundTextFill = "rgba(255, 255, 0, .4)";
// Set direction - this value could be decided from a set of "next" and "previous" buttons
const isFindingNext = true;
// Set the bounds
// We set the bounds as the whole document, but below we can specify to start wherever text is selected
// or at the current page
const topOfFirstPage = lt.Document.Viewer.DocumentViewerTextPosition.createBeginOfPage(1);
const bottomOfLastPage = lt.Document.Viewer.DocumentViewerTextPosition.createEndOfPage(documentViewer.pageCount);
if (isFindingNext) {
// Make the beginning bound "higher up" the page so we search "down" the page.
options.beginPosition = topOfFirstPage;
options.endPosition = bottomOfLastPage;
}
else {
// Make the beginning bound "lower down" the page so we search "up" the page.
options.beginPosition = bottomOfLastPage;
options.endPosition = topOfFirstPage;
}
// Select the first result in the View (automatically scrolls View also)
options.selectFirstResult = true;
if (text.hasAnySelectedText) {
// Setting this value to AfterSelection allows us to search forward from the selection, so multiple
// uses of this same options object will cycle us through all the matches!
// (If no selected text actually exists, search will default to beginPosition.)
options.start = lt.Document.Viewer.DocumentViewerFindTextStart.afterSelection;
}
else {
// We could start at the begin position, but it makes more UI sense to start from the user's current page.
// Search will loop back around to the begin position - this just changes the starting point and order of results.
options.start = lt.Document.Viewer.DocumentViewerFindTextStart.manualPosition;
if (isFindingNext)
options.manualStartPosition = lt.Document.Viewer.DocumentViewerTextPosition.createBeginOfPage(documentViewer.currentPageNumber);
else
options.manualStartPosition = lt.Document.Viewer.DocumentViewerTextPosition.createEndOfPage(documentViewer.currentPageNumber);
}
// If we were just looking for the first match, we could use "loop" to loop around
// if we found nothing between the start position and the end bound.
//options.loop = true;
// You will likely want to clear the previous highlighted results
// on the screen so only our new results will show.
text.clearRenderedFoundText();
output.innerHTML = "Searching, please wait...";
// Search, asynchronously
text.find(options, function (results) {
const resultsCount = !!results ? results.length : 0;
let resultText;
if (resultsCount > 0)
resultText = "Found " + resultsCount + " results for '" + options.text + "'.";
else
resultText = "No matches found.";
alert(resultText);
output.innerHTML = resultText;
});
}
}
export class ViewerInitializer {
private callback: (viewer: lt.Document.Viewer.DocumentViewer) => void = null;
constructor(callback?: (viewer: lt.Document.Viewer.DocumentViewer) => void) {
this.callback = callback;
this.init();
}
public static showServiceError = (jqXHR, statusText, errorThrown) => {
alert('Error returned from service. See the console for details.')
const serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown);
console.error(serviceError);
}
private init = () => {
this.initFactory();
this.testConnection();
}
private initFactory = () => {
lt.RasterSupport.setLicenseUri('https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt', 'EVAL', null);
// To communicate with the DocumentsService, it must be running!
// Change these parameters to match the path to the service.
lt.Document.DocumentFactory.serviceHost = 'http://localhost:40000';
lt.Document.DocumentFactory.servicePath = '';
lt.Document.DocumentFactory.serviceApiPath = 'api';
}
private testConnection = () => {
const serviceStatus = document.getElementById('serviceStatus');
serviceStatus.innerHTML = 'Connecting to service: ' + lt.Document.DocumentFactory.serviceUri;
lt.Document.DocumentFactory.verifyService()
.done((serviceData) => {
serviceStatus.innerHTML = 'Service connection verified!';
this.createDocumentViewer();
})
.fail((jqXHR, statusText, errorThrown) => {
serviceStatus.innerHTML = 'Service connection unavailable.';
ViewerInitializer.showServiceError(jqXHR, statusText, errorThrown);
});
}
private createDocumentViewer = () => {
// Initialize the user interface
const interactiveSelect = document.getElementById('interactiveSelect');
const panZoomOption = document.createElement('option');
panZoomOption.innerHTML = 'Pan / Zoom';
panZoomOption.value = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom;
interactiveSelect.appendChild(panZoomOption);
const textOption = document.createElement('option');
textOption.value = lt.Document.Viewer.DocumentViewerCommands.interactiveSelectText;
textOption.innerHTML = 'Select Text';
interactiveSelect.appendChild(textOption);
let documentViewer: lt.Document.Viewer.DocumentViewer = null;
interactiveSelect.onchange = (e) => documentViewer.commands.run((e.target as HTMLSelectElement).value, null);
const annotationsSelect = document.getElementById('annotationsSelect');
const annSelectOption = document.createElement('option');
annSelectOption.innerHTML = 'Select Annotation';
annSelectOption.value = lt.Annotations.Engine.AnnObject.selectObjectId.toString();
annotationsSelect.appendChild(annSelectOption);
const annLineOption = document.createElement('option');
annLineOption.innerHTML = 'Line Object';
annLineOption.value = lt.Annotations.Engine.AnnObject.lineObjectId.toString();
annotationsSelect.appendChild(annLineOption);
const annRectOption = document.createElement('option');
annRectOption.innerHTML = 'Rectangle Object';
annRectOption.value = lt.Annotations.Engine.AnnObject.rectangleObjectId.toString();
annotationsSelect.appendChild(annRectOption);
annotationsSelect.onchange = (e) => {
const value = +(e.currentTarget as HTMLSelectElement).value;
documentViewer.annotations.automationManager.currentObjectId = value;
}
// Init the document viewer, pass along the panels
const createOptions = new lt.Document.Viewer.DocumentViewerCreateOptions();
// We are not going to use elements mode in this example
createOptions.viewCreateOptions.useElements = false;
createOptions.thumbnailsCreateOptions.useElements = false;
// The middle panel for the view
createOptions.viewContainer = document.getElementById('viewer');
// The left panel for the thumbnails
createOptions.thumbnailsContainer = document.getElementById('thumbnails');
// The right panel is for bookmarks
createOptions.bookmarksContainer = document.getElementById('bookmarks');
createOptions.useAnnotations = true;
// Create the document viewer
documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions);
// We prefer SVG viewing
documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg;
// Create html5 rendering engine
documentViewer.annotations.automationManager.renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine();
// Initialize documentViewer annotations
documentViewer.annotations.initialize();
documentViewer.annotations.automationManager.currentObjectIdChanged.add(function (sender, e) {
// When done drawing, the manager will return to the select object; so we need force the annotationsSelect element to return to the select object option
(annotationsSelect as HTMLSelectElement).value = sender.currentObjectId;
});
this.loadDefaultDoc(documentViewer, interactiveSelect as HTMLSelectElement)
}
private loadDefaultDoc = (viewer: lt.Document.Viewer.DocumentViewer, interactiveSelect: HTMLSelectElement) => {
// Load a PDF document
const url = 'https://demo.leadtools.com/images/pdf/leadtools.pdf';
lt.Document.DocumentFactory.loadFromUri(url, null)
.done((doc: lt.Document.LEADDocument) => {
const ready = () => {
viewer.setDocument(doc);
const panZoom = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom;
interactiveSelect.value = panZoom;
viewer.commands.run(panZoom, null);
if(this.callback)
this.callback(viewer);
}
if (doc.isStructureSupported && !doc.structure.isParsed)
doc.structure.parse()
.done(ready)
.fail(ViewerInitializer.showServiceError);
else
ready();
})
.fail(ViewerInitializer.showServiceError);
}
}
import { ViewerInitializer } from "../utilities/ViewerInitializer";
export class TextFindJSExample {
run = () => {
new ViewerInitializer(this.textExample);
}
textExample = (documentViewer) => {
const output = document.getElementById('output');
const text = documentViewer.text;
// Make sure we get the page text if necessary (otherwise, results may be empty!)
text.autoGetText = true;
// We will find all matches of "LEAD", ignoring the case
const options = new lt.Document.Viewer.DocumentViewerFindText();
// The text
options.text = "LEAD";
// Ignore case
options.matchCase = false;
// Any word that contains the phrase
options.wholeWordsOnly = false;
// Find all results in the bounds, not just the first
options.findAll = true;
// Highlight the results in the View
options.renderResults = true;
// Optionally, change the highlight color
lt.Document.Viewer.DocumentViewerText.foundTextFill = "rgba(255, 255, 0, .4)";
// Set direction - this value could be decided from a set of "next" and "previous" buttons
const isFindingNext = true;
// Set the bounds
// We set the bounds as the whole document, but below we can specify to start wherever text is selected
// or at the current page
const topOfFirstPage = lt.Document.Viewer.DocumentViewerTextPosition.createBeginOfPage(1);
const bottomOfLastPage = lt.Document.Viewer.DocumentViewerTextPosition.createEndOfPage(documentViewer.pageCount);
if (isFindingNext) {
// Make the beginning bound "higher up" the page so we search "down" the page.
options.beginPosition = topOfFirstPage;
options.endPosition = bottomOfLastPage;
}
else {
// Make the beginning bound "lower down" the page so we search "up" the page.
options.beginPosition = bottomOfLastPage;
options.endPosition = topOfFirstPage;
}
// Select the first result in the View (automatically scrolls View also)
options.selectFirstResult = true;
if (text.hasAnySelectedText) {
// Setting this value to AfterSelection allows us to search forward from the selection, so multiple
// uses of this same options object will cycle us through all the matches!
// (If no selected text actually exists, search will default to beginPosition.)
options.start = lt.Document.Viewer.DocumentViewerFindTextStart.afterSelection;
}
else {
// We could start at the begin position, but it makes more UI sense to start from the user's current page.
// Search will loop back around to the begin position - this just changes the starting point and order of results.
options.start = lt.Document.Viewer.DocumentViewerFindTextStart.manualPosition;
if (isFindingNext)
options.manualStartPosition = lt.Document.Viewer.DocumentViewerTextPosition.createBeginOfPage(documentViewer.currentPageNumber);
else
options.manualStartPosition = lt.Document.Viewer.DocumentViewerTextPosition.createEndOfPage(documentViewer.currentPageNumber);
}
// If we were just looking for the first match, we could use "loop" to loop around
// if we found nothing between the start position and the end bound.
//options.loop = true;
// You will likely want to clear the previous highlighted results
// on the screen so only our new results will show.
text.clearRenderedFoundText();
output.innerHTML = "Searching, please wait...";
// Search, asynchronously
text.find(options, function (results) {
const resultsCount = !!results ? results.length : 0;
let resultText;
if (resultsCount > 0)
resultText = "Found " + resultsCount + " results for '" + options.text + "'.";
else
resultText = "No matches found.";
alert(resultText);
output.innerHTML = resultText;
});
}
}
export class ViewerInitializer {
constructor(callback) {
this.callback = callback;
this.init();
}
static showServiceError = (jqXHR, statusText, errorThrown) => {
alert("Error returned from service. See the console for details.")
const serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown);
console.error(serviceError);
}
init = () => {
this.initFactory();
this.testConnection();
}
initFactory = () => {
lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null);
// To communicate with the DocumentsService, it must be running!
// Change these parameters to match the path to the service.
lt.Document.DocumentFactory.serviceHost = "http://localhost:40000";
lt.Document.DocumentFactory.servicePath = "";
lt.Document.DocumentFactory.serviceApiPath = "api";
}
testConnection = () => {
const serviceStatus = document.getElementById("serviceStatus");
serviceStatus.innerHTML = "Connecting to service: " + lt.Document.DocumentFactory.serviceUri;
lt.Document.DocumentFactory.verifyService()
.done((serviceData) => {
serviceStatus.innerHTML = "Service connection verified!";
this.createDocumentViewer();
})
.fail((jqXHR, statusText, errorThrown) => {
serviceStatus.innerHTML = "Service connection unavailable.";
ViewerInitializer.showServiceError(jqXHR, statusText, errorThrown);
});
}
createDocumentViewer = () => {
// Initialize the user interface
const interactiveSelect = document.getElementById("interactiveSelect");
const panZoomOption = document.createElement("option");
panZoomOption.innerHTML = "Pan / Zoom";
panZoomOption.value = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom;
interactiveSelect.appendChild(panZoomOption);
const textOption = document.createElement("option");
textOption.value = lt.Document.Viewer.DocumentViewerCommands.interactiveSelectText;
textOption.innerHTML = "Select Text";
interactiveSelect.appendChild(textOption);
let documentViewer = null;
interactiveSelect.onchange = (e) => documentViewer.commands.run(e.target.value, null);
const annotationsSelect = document.getElementById("annotationsSelect");
const annSelectOption = document.createElement("option");
annSelectOption.innerHTML = "Select Annotation";
annSelectOption.value = lt.Annotations.Engine.AnnObject.selectObjectId.toString();
annotationsSelect.appendChild(annSelectOption);
const annLineOption = document.createElement("option");
annLineOption.innerHTML = "Line Object";
annLineOption.value = lt.Annotations.Engine.AnnObject.lineObjectId.toString();
annotationsSelect.appendChild(annLineOption);
const annRectOption = document.createElement("option");
annRectOption.innerHTML = "Rectangle Object";
annRectOption.value = lt.Annotations.Engine.AnnObject.rectangleObjectId.toString();
annotationsSelect.appendChild(annRectOption);
annotationsSelect.onchange = (e) => {
const value = +e.currentTarget.value;
documentViewer.annotations.automationManager.currentObjectId = value;
}
// Init the document viewer, pass along the panels
const createOptions = new lt.Document.Viewer.DocumentViewerCreateOptions();
// We are not going to use elements mode in this example
createOptions.viewCreateOptions.useElements = false;
createOptions.thumbnailsCreateOptions.useElements = false;
// The middle panel for the view
createOptions.viewContainer = document.getElementById("viewer");
// The left panel for the thumbnails
createOptions.thumbnailsContainer = document.getElementById("thumbnails");
// The right panel is for bookmarks
createOptions.bookmarksContainer = document.getElementById("bookmarks");
createOptions.useAnnotations = true;
// Create the document viewer
documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions);
// We prefer SVG viewing
documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg;
// Create html5 rendering engine
documentViewer.annotations.automationManager.renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine();
// Initialize documentViewer annotations
documentViewer.annotations.initialize();
documentViewer.annotations.automationManager.currentObjectIdChanged.add(function (sender, e) {
// When done drawing, the manager will return to the select object; so we need force the annotationsSelect element to return to the select object option
annotationsSelect.value = sender.currentObjectId;
});
this.loadDefaultDoc(documentViewer, interactiveSelect)
}
loadDefaultDoc = (viewer, interactiveSelect) => {
// Load a PDF document
const url = "https://demo.leadtools.com/images/pdf/leadtools.pdf";
lt.Document.DocumentFactory.loadFromUri(url, null)
.done((doc) => {
const ready = () => {
viewer.setDocument(doc);
const panZoom = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom;
interactiveSelect.value = panZoom;
viewer.commands.run(panZoom, null);
if(this.callback)
this.callback(viewer);
}
if (doc.isStructureSupported && !doc.structure.isParsed)
doc.structure.parse()
.done(ready)
.fail(ViewerInitializer.showServiceError);
else
ready();
})
.fail(ViewerInitializer.showServiceError);
}
}
<!doctype html>
<html lang="en">
<title>DocViewer Example | DocumentViewer</title>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="../LT/Leadtools.js"></script>
<script src="../LT/Leadtools.Controls.js"></script>
<script src="../LT/Leadtools.Annotations.Engine.js"></script>
<script src="../LT/Leadtools.Annotations.Designers.js"></script>
<script src="../LT/Leadtools.Annotations.Rendering.Javascript.js"></script>
<script src="../LT/Leadtools.Annotations.Automation.js"></script>
<script src="../LT/Leadtools.ImageProcessing.Main.js"></script>
<script src="../LT/Leadtools.ImageProcessing.Color.js"></script>
<script src="../LT/Leadtools.ImageProcessing.Core.js"></script>
<script src="../LT/Leadtools.ImageProcessing.Effects.js"></script>
<script src="../LT/Leadtools.Document.js"></script>
<script src="../LT/Leadtools.Document.Viewer.js"></script>
<link rel="stylesheet" type="text/css" href="../css/examples.css">
<!-- All demo files are bundled and appended to the window -->
<script src="../bundle.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="toolbar">
<div class="vcenter push-right">
<button type="button" id="exampleButton">Run Example</button>
</div>
<div class="vcenter push-right">
<label for="interactiveSelect">Interactive mode:</label>
<select id="interactiveSelect"></select>
</div>
<div class="vcenter push-right">
<label for="annotationsSelect">Annotations objects:</label>
<select id="annotationsSelect"></select>
</div>
<div id="output" class="vcenter push-right"></div>
<div id="serviceStatus" class="vcenter push-right"></div>
</div>
<div class="docContainer">
<div class="sidepanel" id="thumbnails"></div>
<div class="centerpanel" id="viewer"></div>
<div class="sidepanel" id="bookmarks"></div>
</div>
</div>
</body>
<script>
window.onload = () => {
const button = document.getElementById('exampleButton');
button.onclick = () => {
const example = new window.examples.TextFindExample();
example.run();
}
};
</script>
</html>
/*
Remove default body styling.
Set the body to flex as a column;
*/
body {
margin: 0;
display: flex;
flex-direction: column;
}
.container {
margin: 10px;
width: calc(100% - 20px);
height: calc(100vh - 20px);
}
.toolbar {
height: 5%;
width: 100%;
border-bottom: 2px solid #333;
flex-direction: row;
display: flex;
}
#bookmarks{
overflow: hidden;
}
.vcenter {
margin-top: auto;
margin-bottom: auto;
}
.hcenter{
margin-left: auto;
margin-right: auto;
}
.push-right{
margin-left: 10px;
}
.docContainer{
height: 95%;
width: 100%;
display: flex;
flex-direction: row;
}
.sidepanel{
width: 15%;
height: 100%;
}
.centerpanel{
width:100%;
height:100%;
}
/* Styles for Elements Mode. */
.lt-item, .lt-image-border {
/* Box Shadow (view, item, image border) */
box-shadow: #333 2px 2px 5px 1px;
}
.lt-view,.lt-thumb-item {
/* View */
margin: 5px;
padding: 5px;
}
.lt-item {
/* Item */
border: 2px solid #6ecaab;
background-color: #b2decf;
padding: 10px;
}
.lt-image-border {
/* Image Border */
border: 3px solid #444;
background-color: white;
}
.lt-thumb-item {
/* Thumbnail Item */
border: 2px solid #6ecaab;
background-color: #b2decf;
}
.lt-thumb-item.lt-thumb-item-selected {
/* Selected Thumbnail Item */
border: 2px solid #59b2ba;
background-color: #8ce1e1;
}
.lt-thumb-item-hovered {
/* Hovered Thumbnail Item */
border: 2px solid #52b996;
background-color: #87c7b1;
}
.small-modal {
max-width: 200px;
width: 200px;
}
Help Collections
Raster .NET | C API | C++ Class Library | HTML5 JavaScript
Document .NET | C API | C++ Class Library | HTML5 JavaScript
Medical .NET | C API | C++ Class Library | HTML5 JavaScript
Medical Web Viewer .NET
Multimedia
Direct Show .NET | C API | Filters
Media Foundation .NET | C API | Transforms
Supported Platforms
.NET, Java, Android, and iOS/macOS Assemblies
Imaging, Medical, and Document
C API/C++ Class Libraries
Imaging, Medical, and Document
HTML5 JavaScript Libraries
Imaging, Medical, and Document
Your email has been sent to support! Someone should be in touch! If your matter is urgent please come back into chat.
Chat Hours:
Monday - Friday, 8:30am to 6pm ET
Thank you for your feedback!
Please fill out the form again to start a new chat.
All agents are currently offline.
Chat Hours:
Monday - Friday
8:30AM - 6PM EST
To contact us please fill out this form and we will contact you via email.