Selects the text that intersect with a specified area.
DocumentViewerText.prototype.selectText = function()
selectText(): void;
area
location and size of the area to check. This is in pixels and must be in control (client) coordinates, such as directly from a mouse event.
mode
Mode to use for the selection.
This method selects text from all the pages that currently intersects with the selection. When this method returns, the new selected text (if any) can be obtained by GetSelectedTextItems (or GetSelectedText as a simple string).
clearSelection is an empty rectangle or if none of the text intersects with the rectangle.
This method fires Operation with DocumentViewerOperation.TextSelectionChanged and DocumentViewerOperation.PageTextSelectionChanged if the result of the operation changes the state of text selection.
If RenderSelection is true, then the selected text will be highlighted on the view ImageViewer object automatically.
If the text of any of the pages that is checked is not obtained yet, then the value of AutoGetText will be used to determine whether DocumentPage.GetText is called automatically. Therefore, this method might experience a delay while the text is parsed from the document in this mode.
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/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 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/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.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