This tutorial shows how to embed the LEADTOOLS Document Editor into an application and use it to import, edit and export documents to PDF.
Overview | |
---|---|
Summary | This tutorial covers how to embed a Document Editor into an application to import documents, edit them, then export to a PDF |
Completion Time | 5-10 minutes |
Platform | HTML5/JS |
IDE | Visual Studio Code/ Visual Studio 2017, 2019 |
Development License | Download LEADTOOLS |
Get familiar with the basic steps of creating a project by reviewing the Add References and Set a License and the Get Started with the Document Editor tutorials.
This tutorial makes use of http-server
, a console command for running a static file server. To install http-server
first install Node.js
and then install http-server
.
https://nodejs.org/en/download/
https://www.npmjs.com/package/http-server
Be sure to download and install the LEADTOOLS SDK, and make sure that your license and key files are located in your <INSTALL_DIR>\LEADTOOLS22\Support\Common\License
directory.
This tutorial relies on a server-side backend service for some of its functionality:
More information on how to setup the Document Service can be found in the Get Started with the Document Editor tutorial.
Create a new folder and add the following files to it:
index.html
style.css
Create a child folder named lib
and add the LEADTOOLS references needed to this folder by copying the following files from <INSTALL_DIR>\LEADTOOLS22\Bin\JS
:
Leadtools.js
Leadtools.Annotations.Automation.js
Leadtools.Annotations.Engine.js
Leadtools.Document.js
Leadtools.Document.Editor.js
For a complete list of which JS files are required for your application, refer to Files to be Included with your Application
In the lib
folder, create a new file named app.js
.
With the project created and libraries added, coding can begin.
Open the index.html
file located in the root folder and add the following HTML code to import the JS files.
Add the title div
and menu list elements which will be used to implement the import and export.
Add two div
elements which will contain the Document Editor control.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Import Edit and Save Documents with the Document Editor </title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></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>
<script src="./lib/app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<div id="title">
Import Edit and Save Documents with the Document Editor
</div>
<ul id="menu">
<li><a id="importBtn">Import Document</a></li>
<li><a id="exportBtn">Export as PDF</a> </li>
</ul>
</div>
<div id="editorWrapper" oncontextmenu="return false;">
<div class="inner-body" id="content">
</div>
</div>
</body>
</html>
Open the style.css
file located in the project folder and add the following styles
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;
margin-right: 10px;
margin-left: 10px;
cursor: pointer;
user-select: none;
font-weight: bold;
}
li:first-child {
border-right: 1px black solid;
}
li a:hover {
background-color: lightblue;
}
Open the app.js
file located in the lib
folder and add the below code to add the core functionality to set a license, create the Document Editor, register the menu click events, and connect to the LEADTOOLS Document Service.
let editor = null;
window.onload = () => {
setLicense();
addEditControl();
registerClickEvents();
initFactory();
};
function addEditControl() {
const content = document.getElementById('content');
editor = new lt.Document.Editor.DocumentEditor({
root: content
});
}
function registerClickEvents() {
document.getElementById('importBtn').onclick = selectAndLoadFile;
document.getElementById('exportBtn').onclick = exportAsPdf;
}
function 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;
const parent = document.getElementById("div_container");
while (parent.firstElementChild) {
parent.removeChild(parent.firstElementChild);
}
parent.appendChild(msgParagraph);
console.log(msg);
}
});
}
function 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((response) => {
var serviceInfo = "Service name: '" + response.serviceName + "'";
serviceInfo += " version: '" + response.serviceVersion + "'";
serviceInfo += " platform: '" + response.servicePlatform + "'";
serviceInfo += " OS: '" + response.serviceOperatingSystem + "'";
lt.LTHelper.log(serviceInfo);
})
.fail((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);
});
}
function selectAndLoadFile() {
const input = document.createElement('input');
input.type = 'file';
input.style.display = 'none';
input.accept = '.doc, .docx, .pdf, .rtf, .txt';
input.onchange = (e) => {
const files = input.files;
if (!files || !files.length)
return;
const file = files[0];
document.body.style.cursor = 'wait';
let promise = lt.Document.Editor.EditableDocument.fromFile(file);
promise.then(doc => {
editor.setDocument(doc);
});
promise.finally(() => {
document.body.style.cursor = 'default';
});
};
input.click();
}
function exportAsPdf() {
let promise = editor.document.toFile("untitled", lt.Document.Writer.DocumentFormat.pdf);
promise.then(name => {})
.catch(err => {
alert(`There was an issue exporting the document. ${err}`);
});
}
Note
To export as DOCX or TXT simply change the second parameter of
document.toFile
tolt.Document.Writer.DocumentFormat.docx
orlt.Document.Writer.DocumentFormat.txt
Before running the application, run the Document Service.
For instructions on how to set up and configure the Document Service, in the three platforms previously listed, refer to the steps in the Get Started with the Document Editor tutorial.
For the purposes of this tutorial, the .NET Framework Document Service is used and it can be found here: <INSTALL_DIR>\LEADTOOLS22\Examples\Document\JS\DocumentServiceDotNet\fx.
Open a terminal at the root folder (CMD, Powershell, or other) and type npm install http-server
. This will add the static file hosting package mentioned earlier.
The server should start and run on http://localhost:8080. A message should appear in the console indicating all the ports that the server is available on.
Browse to the URL in a browser. To test the functionality of the menu, click the Import Document
button and select a document to view in the editor.
Then after it is loaded, click the Export as PDF
to see it being saved to the desired location as a .pdf
file type.
This tutorial showed how to connect and configure the LEADTOOLS Document Editor Demo to the Document Service and how to load, edit, and save documents.