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

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() { 
  const licenseUrl = "./Leadtools/LEADTOOLS.lic.txt";  
  const developerKey = "ADD THE CONTENTS OF THE LEADTOOLS.lic.key.txt FILE";  
  lt.RasterSupport.setLicenseUri(licenseUrl, developerKey, function (  
    setLicenseResult  
  ) { 
    if (setLicenseResult.result) { 
      console.log("LEADTOOLS client license set successfully"); 
    } else { 
      const 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); 
      const 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() 
  try{ 
    async (response) => { 
      const serviceInfo = "Service name: '" + response.serviceName + "'"; 
      serviceInfo += " version: '" + response.serviceVersion + "'"; 
      serviceInfo += " platform: '" + response.servicePlatform + "'"; 
      serviceInfo += " OS: '" + response.serviceOperatingSystem + "'"; 
      lt.LTHelper.log(serviceInfo); 
    } 
  } catch { 
    async (jqXHR, statusText, errorThrown) => { 
      const 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(){ 
  try { 
    const input = document.createElement('input'); 
    input.type = 'file'; 
    input.style.display = 'none'; 
    input.accept = '.doc, .docx, .pdf, .rtf, .txt'; 
 
    input.onchange = async (e) => { 
      const files = input.files; 
      if (!files || !files.length) 
        return; 
 
      const file = files[0]; 
      document.body.style.cursor = 'wait'; 
      try { 
        let doc = await lt.Document.Editor.EditableDocument.fromFile(file); 
        editor.setDocument(doc); 
      } finally { 
        document.body.style.cursor = 'default'; 
      } 
    }; 
    input.click(); 
  } catch (error) { 
    console.log(error); 
  } 
} 
 
async function exportAsPdf() { 
  try { 
    let doc = await editor.document.toFile("untitled", lt.Document.Writer.DocumentFormat.pdf); 
    doc.then(name => { }) 
  } catch { 
    console.log("File Exported Successfully") 
  } 
}