Deletes the current column in the table.
deleteColumn(): void;
If there is only one column, the whole table will be deleted.
This would be used to remove a column that is not needed from the table.
import {EditorInitializer} from '../utility/EditorInitializer';
import {editor} from '../utility/EditorInitializer';
export class TableEnginesExample {
run = () => {
new EditorInitializer();
this.initTable();
}
initTable =()=>{
//Creates a new table in the document when the example is run
editor.engine.tables.insertTable(3,3);
}
importTable =()=>{
//Allows the user to insert a table by prompting for the rows and columns in a specific format and then inserts that
//table at the cursor location. No more then 10 for either rows or columns.
var input = prompt("How many rows and columns (no more than 10 for either)? Enter numbers as row/column")
var rowCol = input.split('/');
editor.engine.tables.insertTable(rowCol[0],rowCol[1]);
}
removeTable =()=>{
//deletes the table that the cursor is currently inside
editor.engine.tables.deleteTable();
}
addColumn =()=>{
//adds a column to the left of the column that the cursor is in
editor.engine.tables.insertColumn(1);
}
removeColumn =()=>{
//removes the column that the cursor is in
editor.engine.tables.deleteColumn();
}
addRow =()=>{
//adds a row above the row that the cursor is in
editor.engine.tables.insertRow(1)
}
removeRow =()=>{
//removes the row that the cursor is in
editor.engine.tables.deleteRow();
}
reformColumns =()=>{
//adjusts the column sizes to stay with in the default margins if they
editor.engine.tables.distributeColumns();
}
reformRows=()=>{
//adjusts the height of the rows to be uniform across the table
editor.engine.tables.distributeRows();
}
mergeCells=()=>{
//combines the selected rows into one
editor.engine.tables.merge();
}
unmergeCells=()=>{
//splits the merged cell into its original members
editor.engine.tables.unmerge();
}
}
export var editor: any = null;
export class EditorInitializer {
private callback: (editor: any) => void = null;
constructor(callback?: (editor: any) => void) {
this.callback = callback;
this.init();
}
init = () => {
this.setLicense();
this.initFactory();
this.addEditControl();
}
setLicense = () => {
lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", function (setLicenseResult) {
if (setLicenseResult.result) {
console.log("LEADTOOLS client license set successfully");
} else {
var msg = "No LEADTOOLS License\n\nYour license file is missing, invalid or expired. LEADTOOLS will not function. Please contact LEAD Sales for information on obtaining a valid license.";
alert(msg);
var msgParagraph = document.createElement('p');
msgParagraph.innerText = msg;
var parent_1 = document.getElementById("div_container");
while (parent_1.firstElementChild) {
parent_1.removeChild(parent_1.firstElementChild);
}
parent_1.appendChild(msgParagraph);
console.log(msg);
}
});
}
initFactory = () => {
// 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";
// Set local proxy url template (Used in local load mode)
lt.Document.DocumentFactory.localProxyUrlTemplate = "http://localhost:40000/api/CorsProxy/Proxy?{0}";
// Ping the Document service
lt.Document.DocumentFactory.verifyService()
.done(function (response: ResponseType | any) {
var serviceInfo = "Service name: '" + response.serviceName + "'";
serviceInfo += " version: '" + response.serviceVersion + "'";
serviceInfo += " platform: '" + response.servicePlatform + "'";
serviceInfo += " OS: '" + response.serviceOperatingSystem + "'";
lt.LTHelper.log(serviceInfo);
})
.fail(function (jqXHR: string, statusText: string, errorThrown: string) {
var errMsg = "Cannot reach the LEADTOOLS Document Service.\n\nPlease Make sure LEADTOOLS DocumentService is running\n - Examples/Document/JS/DocumentServiceDotNet\n - Examples/Document/JS/DocumentServiceJava\nand verify that the service path is correct, then refresh the application.";
window.alert(errMsg);
console.log(errMsg);
});
}
addEditControl = () => {
//sets up the initial document editor object
var content = document.getElementById('content');
editor = new lt.Document.Editor.DocumentEditor({
root: content
});
this.registerClickEvents();
if (this.callback) {
this.callback(editor);
}
}
registerClickEvents = () => {
//registers the onclick functions for the buttons
const importClick = document.getElementById('importBtn');
importClick.onclick = (e) => {
this.selectAndLoadFile();
}
const exportClick = document.getElementById('exportBtn');
exportClick.onclick = (e) => {
this.exportAsPdf();
}
}
selectAndLoadFile = () => {
//creates an input element on the Import Document button to upload files
//into the document editor
var input = document.createElement('input');
input.type = 'file';
input.style.display = 'none';
input.accept = '.doc, .docx, .pdf, .rtf, .txt';
input.onchange = function (e) {
var files = input.files;
if (!files || !files.length)
return;
var file = files[0];
document.body.style.cursor = 'wait';
var promise = lt.Document.Editor.EditableDocument.fromFile(file);
promise.then(function (doc: HTMLElement) {
editor.setDocument(doc);
});
promise.finally(() => {
document.body.style.cursor = 'default';
});
};
input.click();
}
exportAsPdf = () => {
//exports the current document for saving
var promise = editor.document.toFile("untitled", lt.Document.Writer.DocumentFormat.pdf);
var err = null;
promise.then(function (name: string) { });
promise.catch(function (err: string) {
alert("There was an issue exporting the document. " + err);
});
}
}
import {EditorInitializer} from '../utility/EditorInitializer';
import {editor} from '../utility/EditorInitializer';
export class TableEnginesExample {
run = () => {
new EditorInitializer();
this.initTable();
}
initTable =()=>{
//Creates a new table in the document when the example is run
editor.engine.tables.insertTable(3,3);
}
importTable =()=>{
//Allows the user to insert a table by prompting for the rows and columns in a specific format and then inserts that
//table at the cursor location. No more then 10 for either rows or columns.
var input = prompt("How many rows and columns (no more than 10 for either)? Enter numbers as row/column")
var rowCol = input.split('/');
editor.engine.tables.insertTable(rowCol[0],rowCol[1]);
}
removeTable =()=>{
//deletes the table that the cursor is currently inside
editor.engine.tables.deleteTable();
}
addColumn =()=>{
//adds a column to the left of the column that the cursor is in
editor.engine.tables.insertColumn(1);
}
removeColumn =()=>{
//removes the column that the cursor is in
editor.engine.tables.deleteColumn();
}
addRow =()=>{
//adds a row above the row that the cursor is in
editor.engine.tables.insertRow(1)
}
removeRow =()=>{
//removes the row that the cursor is in
editor.engine.tables.deleteRow();
}
reformColumns =()=>{
//adjusts the column sizes to stay with in the default margins if they
editor.engine.tables.distributeColumns();
}
reformRows=()=>{
//adjusts the height of the rows to be uniform across the table
editor.engine.tables.distributeRows();
}
mergeCells=()=>{
//combines the selected rows into one
editor.engine.tables.merge();
}
unmergeCells=()=>{
//splits the merged cell into its original members
editor.engine.tables.unmerge();
}
}
export let editor = null;
export class EditorInitializer {
constructor(callback) {
this.callback = callback;
this.init();
}
init = () => {
this.setLicense();
this.initFactory();
this.addEditControl();
}
setLicense = () => {
lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", function (setLicenseResult) {
if (setLicenseResult.result) {
console.log("LEADTOOLS client license set successfully");
} else {
var msg = "No LEADTOOLS License\n\nYour license file is missing, invalid or expired. LEADTOOLS will not function. Please contact LEAD Sales for information on obtaining a valid license.";
alert(msg);
var msgParagraph = document.createElement('p');
msgParagraph.innerText = msg;
var parent_1 = document.getElementById("div_container");
while (parent_1.firstElementChild) {
parent_1.removeChild(parent_1.firstElementChild);
}
parent_1.appendChild(msgParagraph);
console.log(msg);
}
});
}
initFactory = () => {
// 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";
// Set local proxy url template (Used in local load mode)
lt.Document.DocumentFactory.localProxyUrlTemplate = "http://localhost:40000/api/CorsProxy/Proxy?{0}";
// Ping the Document service
lt.Document.DocumentFactory.verifyService()
.done(function (response) {
var serviceInfo = "Service name: '" + response.serviceName + "'";
serviceInfo += " version: '" + response.serviceVersion + "'";
serviceInfo += " platform: '" + response.servicePlatform + "'";
serviceInfo += " OS: '" + response.serviceOperatingSystem + "'";
lt.LTHelper.log(serviceInfo);
})
.fail(function (jqXHR, statusText, errorThrown) {
var errMsg = "Cannot reach the LEADTOOLS Document Service.\n\nPlease Make sure LEADTOOLS DocumentService is running\n - Examples/Document/JS/DocumentServiceDotNet\n - Examples/Document/JS/DocumentServiceJava\nand verify that the service path is correct, then refresh the application.";
window.alert(errMsg);
console.log(errMsg);
});
}
addEditControl = () => {
//sets up the initial document editor object
var content = document.getElementById('content');
editor = new lt.Document.Editor.DocumentEditor({
root: content
});
this.registerClickEvents();
if(this.callback){
this.callback(editor);
}
}
registerClickEvents = () => {
//registers the onclick functions for the buttons
const importClick = document.getElementById('importBtn');
importClick.onclick = (e) =>{
this.selectAndLoadFile();
}
const exportClick = document.getElementById('exportBtn');
exportClick.onclick = (e) =>{
this.exportAsPdf();
}
}
selectAndLoadFile = () => {
//creates an input element on the Import Document button to upload files
//into the document editor
var input = document.createElement('input');
input.type = 'file';
input.style.display = 'none';
input.accept = '.doc, .docx, .pdf, .rtf, .txt';
input.onchange = function (e) {
var files = input.files;
if (!files || !files.length)
return;
var file = files[0];
document.body.style.cursor = 'wait';
var promise = lt.Document.Editor.EditableDocument.fromFile(file);
promise.then(function (doc) {
editor.setDocument(doc);
});
promise.finally(()=> {
document.body.style.cursor = 'default';
});
};
input.click();
}
exportAsPdf = () => {
//exports the current document for saving
var promise = editor.document.toFile("untitled", lt.Document.Writer.DocumentFormat.pdf);
var err = null;
promise.then(function (name) { });
promise.catch(function (err) {
alert("There was an issue exporting the document. " + err);
});
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Using the Table Engine in the Document Editor</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="../../lib/Leadtools.js"></script>
<script src="../../lib/Leadtools.Annotations.Engine.js"></script>
<script src="../../lib/Leadtools.Annotations.Automation.js"></script>
<script src="../../lib/Leadtools.Document.js"></script>
<script src="../../lib/Leadtools.Document.Editor.js"></script>
<link rel="stylesheet" type="text/css" href="../css/examples.css">
<script src="../../javascript/bundle.js"></script>
</head>
<body>
<div>
<div id="title">
Using the Table Engine in the Document Editor
</div>
<ul id="menu">
<li><a id="importBtn" class="rightLineBorder">Import Document</a></li>
<li><a id="exportBtn" class="rightLineBorder">Export Document</a></li>
<li><a id="exampleBtn" class="rightLineBorder">Run Example</a></li>
<li><a id="insertTable" class="rightLineBorder" style="display: none;">Add Table</a></li>
<li><a id="removeTBtn" class="rightLineBorder" style="display: none;">Remove Table</a></li>
<li><a id="addColumnBtn" class="rightLineBorder" style="display: none;">Add Column to Table</a></li>
<li><a id="removeColumnBtn" class="rightLineBorder" style="display: none;">Remove Column from Table</a></li>
<li><a id="addRowBtn" class="rightLineBorder" style="display: none;">Add Row to Table</a></li>
<li><a id="removeRowBtn" class="rightLineBorder" style="display: none;">Remove Row from Table</a></li>
<li><a id="reformCBtn" class="rightLineBorder" style="display: none;">Format Columns</a></li>
<li><a id="reformRBtn" class="rightLineBorder" style="display: none;">Format Rows</a></li>
<li><a id="mergeBtn" class="rightLineBorder" style="display: none;">Merge Cells</a></li>
<li><a id="unmergeBtn" class="rightLineBorder" style="display: none;">Unmerge Cells</a></li>
</ul>
</div>
<div id="editorWrapper" oncontextmenu="return false;">
<div class="inner-body" id="content">
</div>
</div>
</body>
<script>
//creates the onclick functions for the buttons and hides/shows them when necessary
window.onload = () => {
const button = document.getElementById('exampleBtn');
const example = new window.examples.TableEnginesExample();
const insertTable = document.getElementById('insertTable');
const removeTBtn = document.getElementById('removeTBtn');
const addColumnBtn = document.getElementById('addColumnBtn');
const removeColumnBtn = document.getElementById('removeColumnBtn');
const addRowBtn = document.getElementById('addRowBtn');
const removeRowBtn = document.getElementById('removeRowBtn');
const reformCBtn = document.getElementById('reformCBtn');
const reformRBtn = document.getElementById('reformRBtn');
const mergeBtn = document.getElementById('mergeBtn');
const unmergeBtn = document.getElementById('unmergeBtn');
button.onclick = () => {
example.run();
button.style.display = "none";
insertTable.style.display = "block";
removeTBtn.style.display = "block";
addColumnBtn.style.display = "block";
removeColumnBtn.style.display = "block";
addRowBtn.style.display = "block";
removeRowBtn.style.display = "block";
reformCBtn.style.display = "block";
reformRBtn.style.display = "block";
mergeBtn.style.display = "block";
unmergeBtn.style.display = "block";
}
reformCBtn.onclick = () => {
example.reformColumns();
}
reformRBtn.onclick = () => {
example.reformRows();
}
insertTable.onclick = () => {
example.importTable();
}
removeTBtn.onclick = () => {
example.removeTable();
}
addColumnBtn.onclick = () => {
example.addColumn();
}
removeColumnBtn.onclick = () => {
example.removeColumn();
}
addRowBtn.onclick = () => {
example.addRow();
}
removeRowBtn.onclick = () => {
example.removeRow();
}
mergeBtn.onclick = () => {
example.mergeCells();
}
unmergeBtn.onclick = () => {
example.unmergeCells();
}
};
</script>
</html>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
#title {
padding: 10px;
font-size: 24px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#editorWrapper {
border-top: 1px solid black;
height: 95%;
}
#content {
height: 100%;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
cursor: pointer;
user-select: none;
font-weight: bold;
}
li:first-child {
margin-left: 5px;
}
.rightLineBorder {
border-right: 1px black solid;
}
li a:hover {
background-color: lightblue;
}
Leadtools.Document.Editor Namespace
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