JSFiddle - React, Tailwind, and code Playground

by txtextcontrol

HTML

<!doctype html>
<html>

  <head>
    <script src="https://backend.textcontrol.com/widget/scripts/txtextcontrol.web.js"></script>
  </head>

  <body>

    <input type="button" onclick="loadDocument()" value="Load Document">
    <input type="button" onclick="savePDF()" value="Save as PDF">

    <div id="myTextControlContainer"></div>

  </body>

</html>

CSS

body {
  margin: 0;
  padding: 20px;
}

#myTextControlContainer {
  width: 100%;
  height: 600px;
  margin-top: 20px;
}

JavaScript

var textControl1;

// sample document to load
var htmlDocument = "<h1>Welcome to Text Control</h1>";

window.onload = function() {
  // initialize Text Control
  textControl1 = new TXTextControlWeb("myTextControlContainer");
}

// this function loads a document as HTML
function loadDocument() {
  textControl1.loadDocument(
    TXTextControl.StreamType.HTMLFormat,
    btoa(htmlDocument));
}

// this function saves the document as PDF
function savePDF() {
  textControl1.saveDocument(TXTextControl.StreamType.AdobePDF, function(e) {
    // create temporary link to download document
    var element = document.createElement('a');
    element.setAttribute('href', 'data:application/octet-stream;base64,' + e.data);
    element.setAttribute('download', "test.pdf");

    element.style.display = 'none';
    document.body.appendChild(element);

    // simulate click
    element.click();

    // remove the link
    document.body.removeChild(element);
  });
}