Clears the internal list of rendered results from previous calls to Find.
DocumentViewerText.prototype.clearRenderedFoundText = function() clearRenderedFoundText(): void; When DocumentViewerFindText.RenderResults is true and Find completes successfully, the results (if any) of the search will be added to the internal list of results in DocumentViewerText. All results in the internal list will be drawn to the screen with FoundTextFill after ImageViewer.PostRenderItem is called on the ImageViewerItem for each [DocumentViewerPage].
_By default, results are not cleared between calls to Find_, to support multiple find text operations with different bounds and options. For this reason, it is best to call ClearRenderedFoundText before each find text operation if you wish to render only that set of results.
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 caseconst options = new lt.Document.Viewer.DocumentViewerFindText();// The textoptions.text = "LEAD";// Ignore caseoptions.matchCase = false;// Any word that contains the phraseoptions.wholeWordsOnly = false;// Find all results in the bounds, not just the firstoptions.findAll = true;// Highlight the results in the Viewoptions.renderResults = true;// Optionally, change the highlight colorlt.Document.Viewer.DocumentViewerText.foundTextFill = "rgba(255, 255, 0, .4)";// Set direction - this value could be decided from a set of "next" and "previous" buttonsconst 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 pageconst 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);elseoptions.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, asynchronouslytext.find(options, function (results) {const resultsCount = !!results ? results.length : 0;let resultText;if (resultsCount > 0)resultText = "Found " + resultsCount + " results for '" + options.text + "'.";elseresultText = "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 interfaceconst 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 panelsconst createOptions = new lt.Document.Viewer.DocumentViewerCreateOptions();// We are not going to use elements mode in this examplecreateOptions.viewCreateOptions.useElements = false;createOptions.thumbnailsCreateOptions.useElements = false;// The middle panel for the viewcreateOptions.viewContainer = document.getElementById('viewer');// The left panel for the thumbnailscreateOptions.thumbnailsContainer = document.getElementById('thumbnails');// The right panel is for bookmarkscreateOptions.bookmarksContainer = document.getElementById('bookmarks');createOptions.useAnnotations = true;// Create the document viewerdocumentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions);// We prefer SVG viewingdocumentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg;// Create html5 rendering enginedocumentViewer.annotations.automationManager.renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine();// Initialize documentViewer annotationsdocumentViewer.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 documentconst 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);elseready();}).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 caseconst options = new lt.Document.Viewer.DocumentViewerFindText();// The textoptions.text = "LEAD";// Ignore caseoptions.matchCase = false;// Any word that contains the phraseoptions.wholeWordsOnly = false;// Find all results in the bounds, not just the firstoptions.findAll = true;// Highlight the results in the Viewoptions.renderResults = true;// Optionally, change the highlight colorlt.Document.Viewer.DocumentViewerText.foundTextFill = "rgba(255, 255, 0, .4)";// Set direction - this value could be decided from a set of "next" and "previous" buttonsconst 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 pageconst 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);elseoptions.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, asynchronouslytext.find(options, function (results) {const resultsCount = !!results ? results.length : 0;let resultText;if (resultsCount > 0)resultText = "Found " + resultsCount + " results for '" + options.text + "'.";elseresultText = "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 interfaceconst 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 panelsconst createOptions = new lt.Document.Viewer.DocumentViewerCreateOptions();// We are not going to use elements mode in this examplecreateOptions.viewCreateOptions.useElements = false;createOptions.thumbnailsCreateOptions.useElements = false;// The middle panel for the viewcreateOptions.viewContainer = document.getElementById("viewer");// The left panel for the thumbnailscreateOptions.thumbnailsContainer = document.getElementById("thumbnails");// The right panel is for bookmarkscreateOptions.bookmarksContainer = document.getElementById("bookmarks");createOptions.useAnnotations = true;// Create the document viewerdocumentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions);// We prefer SVG viewingdocumentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg;// Create html5 rendering enginedocumentViewer.annotations.automationManager.renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine();// Initialize documentViewer annotationsdocumentViewer.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 optionannotationsSelect.value = sender.currentObjectId;});this.loadDefaultDoc(documentViewer, interactiveSelect)}loadDefaultDoc = (viewer, interactiveSelect) => {// Load a PDF documentconst 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);elseready();}).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
