Import, Edit, and Save Documents with the Document Editor - HTML5 JavaScript

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

Required Knowledge

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.

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.

Set up and Configure the Demo with the Document Service

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 tutorial.

Create a Project folder and Add LEADTOOLS References

Create a new folder and add the following files to it:

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:

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.

Write the HTML File

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> 

Write the CSS File

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; 
} 

Write the JS File

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 to lt.Document.Writer.DocumentFormat.docx or lt.Document.Writer.DocumentFormat.txt

Run the Project

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 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.

Document importing

Then after it is loaded, click the Export as PDF to see it being saved to the desired location as a .pdf file type.

Document Exporting

Wrap-Up

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.

See Also

Help Version 22.0.2021.10.18
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2021 LEAD Technologies, Inc. All Rights Reserved.

Products | Support | Contact Us | Intellectual Property Notices
© 1991-2021 LEAD Technologies, Inc. All Rights Reserved.