In this example, clicking the example button will add a callback for the render of each document page to draw the page number over the document page image.
import { ViewerInitializer } from "../utilities/ViewerInitializer";
export class ViewTSExample {
public run = () => {
new ViewerInitializer(this.addViewHook);
}
addViewHook = (documentViewer: lt.Document.Viewer.DocumentViewer) => {
// Get the view
const view = documentViewer.view;
// Get its image viewer
const imageViewer = view.imageViewer;
// Hook to the PostRender
imageViewer.postRenderItem.add((sender, e) => {
// Get the image viewer item for the page
const item = e.item;
// Build the text we want. The page number is the item index + 1
const pageNumber = imageViewer.items.indexOf(item) + 1;
const text = "Page " + pageNumber;
// Get the image transformation for this item
const transform = imageViewer.getItemImageTransform(e.item);
// Apply it to the context
const ctx = e.context;
ctx.save();
ctx.transform(transform.m11, transform.m12, transform.m21, transform.m22, transform.offsetX, transform.offsetY);
// Render the text
ctx.fillStyle = "red";
ctx.font = "60pt bold Times New Roman";
ctx.fillText(text, 70, 70);
ctx.restore();
});
// Invalidate so our changes take effect the first time
view.invalidate(lt.LeadRectD.empty);
}
}
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 ViewJSExample {
constructor() { }
run = () => {
new ViewerInitializer(this.addViewHook);
}
addViewHook = (documentViewer) => {
// Get the view
const view = documentViewer.view;
// Get its image viewer
const imageViewer = view.imageViewer;
// Hook to the PostRender
imageViewer.postRenderItem.add(function (sender, e) {
// Get the image viewer item for the page
const item = e.item;
// Build the text we want. The page number is the item index + 1
const pageNumber = imageViewer.items.indexOf(item) + 1;
const text = "Page " + pageNumber;
// Get the image transformation for this item
const transform = imageViewer.getItemImageTransform(e.item);
// Apply it to the context
const ctx = e.context;
ctx.save();
ctx.transform(transform.m11, transform.m12, transform.m21, transform.m22, transform.offsetX, transform.offsetY);
// Render the text
ctx.fillStyle = "red";
ctx.font = "60pt bold Times New Roman";
ctx.fillText(text, 70, 70);
ctx.restore();
});
// Invalidate so our changes take effect the first time
view.invalidate(lt.LeadRectD.empty);
}
}
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.ViewExample();
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;
}
