Manages the text operations in this document viewer.
function lt.Document.Viewer.DocumentViewerText
implements IDisposable
class lt.Document.Viewer.DocumentViewerText()
implements IDisposable
DocumentViewerText can be accessed by the Text property of DocumentViewer. An instance is always available when the control is created and is never null.
This class manages the text operations of the current LEADDocument set in the document viewer. The text is treated as a read-only option and cannot be changed. The operations that can be performed includes selecting characters, words or lines using the mouse or touch, highlighting the selected text of the pages, performing free text search in the document using "find", "find next", and "find previous"; and exporting the text as a simple string or to the clipboard.
The text of a document page is obtained using the DocumentPage.GetText method. This parses any text elements found on a page using SVG or OCR technologies and returns it in a DocumentPageText object containing the character code, location, and size of each text character found in the page.
The DocumentViewerTextItem class contains information about a selected text item on a page. This includes the page number, the bounding rectangle of the selection, as well as the range of the characters selected in the corresponding DocumentPageText.
DocumentViewerText keeps track of the selection state internally in a list of DocumentViewerTextItem items. When the text selection changes, this list is updated to reflect the current state. These items are also used to highlight the current text selection on DocumentViewer.View.ImageViewer.
DocumentViewerSelectTextInteractiveMode uses the methods of DocumentViewerText to perform its main action of selecting text interactively using mouse or touch. The draw designers of the AnnTextReviewObject objects (such as highlight, underline, strikeout, and text redaction), also use the methods of this class to perform their actions if annotations support is used.
Obtaining the text can be a time-consuming operation, especially if OCR is used. Therefore, DocumentViewerText tries to obtain the text only as needed and then stores the DocumentPageText items internally and re-uses them.
The AutoGetText property controls how text is obtained and should be set according to the application's need.
DocumentViewerText uses the Operation event to inform the user when text is obtained from the document and if the text selection changes. Refer to Document Viewer Operations for more information.
In addition to the methods of this class, the application can use the commands system to interact with the text. Refer to the Text section in Document Viewer Commands for more information.
In this example, clicking the example button will call for the text for page 2. When the page's text is retrieved, the text for the upper half of the page will be selected and shown in the browser dialog.
Start with the example from DocumentViewer and replace all the code inside the example function (search for the "// TODO: add example code here" comment) with the following code:
import { ViewerInitializer } from "../utilities/ViewerInitializer";
export class DocumentViewerTextTSExample {
public run = () => {
new ViewerInitializer(this.textExample);
}
textExample = (documentViewer: lt.Document.Viewer.DocumentViewer) => {
const pageNumber = 2;
documentViewer.gotoPage(pageNumber);
// Get the current document
const doc = documentViewer.document;
// Get the page and the current view item
const page = doc.pages.item(pageNumber - 1);
const selectText = () => {
// Create a rectangle that is the first half of the page
let bounds = lt.LeadRectD.create(0, 0, page.size.width, page.size.height / 2);
// SelectText requires the rectangle to be in control pixel coordinates, so convert. First to pixels...
bounds = doc.rectToPixels(bounds);
// And then using the image viewer in the view to control. The item is the one at page number - 1
const imageViewer = documentViewer.view.imageViewer;
bounds = imageViewer.convertRect(imageViewer.items.item(pageNumber - 1), lt.Controls.ImageViewerCoordinateType.image, lt.Controls.ImageViewerCoordinateType.control, bounds);
// Select it, all lines
documentViewer.text.selectText(bounds, lt.Document.Viewer.DocumentViewerSelectTextMode.line);
// Now, check if we have any text selected
if (documentViewer.text.hasSelectedText(pageNumber)) {
// yes, show it
const value = documentViewer.text.getSelectedText(pageNumber);
alert(value);
}
}
if (documentViewer.text.hasDocumentPageText(pageNumber)) {
selectText();
}
else {
documentViewer.operation.add((sender, e) => {
if (e.operation === lt.Document.Viewer.DocumentViewerOperation.getText && e.isPostOperation) {
selectText();
}
});
documentViewer.text.getDocumentPageText(pageNumber);
}
}
}
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/v200/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 DocumentViewerTextJSExample {
run = () => {
new ViewerInitializer(this.textExample);
}
textExample = (documentViewer) => {
const pageNumber = 2;
documentViewer.gotoPage(pageNumber);
// Get the current document
const doc = documentViewer.document;
// Get the page and the current view item
const page = doc.pages.item(pageNumber - 1);
const selectText = () => {
// Create a rectangle that is the first half of the page
let bounds = lt.LeadRectD.create(0, 0, page.size.width, page.size.height / 2);
// SelectText requires the rectangle to be in control pixel coordinates, so convert. First to pixels...
bounds = doc.rectToPixels(bounds);
// And then using the image viewer in the view to control. The item is the one at page number - 1
const imageViewer = documentViewer.view.imageViewer;
bounds = imageViewer.convertRect(imageViewer.items.item(pageNumber - 1), lt.Controls.ImageViewerCoordinateType.image, lt.Controls.ImageViewerCoordinateType.control, bounds);
// Select it, all lines
documentViewer.text.selectText(bounds, lt.Document.Viewer.DocumentViewerSelectTextMode.line);
// Now, check if we have any text selected
if (documentViewer.text.hasSelectedText(pageNumber)) {
// yes, show it
const value = documentViewer.text.getSelectedText(pageNumber);
alert(value);
}
}
if (documentViewer.text.hasDocumentPageText(pageNumber)) {
selectText();
}
else {
documentViewer.operation.add((sender, e) => {
if (e.operation === lt.Document.Viewer.DocumentViewerOperation.getText && e.isPostOperation) {
selectText();
}
});
documentViewer.text.getDocumentPageText(pageNumber);
}
}
}
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/v200/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.DocumentviewerTextExample();
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.