test/sample.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML-DOCX test</title>
  <script src="http://tinymce.cachefly.net/4.1/tinymce.min.js"></script>
  <script src="vendor/FileSaver.js"></script>
  <script src="../build/html-docx.js"></script>
</head>
<body>
  <p>Enter/paste your document here:</p>
  <textarea id="content" cols="60" rows="10">
    <p>We all live in a yellow submarine, yellow submarine, yellow submarine, yellow submarine</p>
    <p>Images can also be exported if you source them as base64 DATA URI.</p>
    <img src="cat.jpg">
  </textarea>
  <div class="page-orientation">
    <span>Page orientation:</span>
    <label><input type="radio" name="orientation" value="portrait" checked>Portrait</label>
    <label><input type="radio" name="orientation" value="landscape">Landscape</label>
  </div>
  <button id="convert">Convert</button>
  <div id="download-area"></div>

  <script>
    tinymce.init({
      selector: '#content',
      plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen fullpage",
        "insertdatetime media table contextmenu paste"
      ],
      toolbar: "insertfile undo redo | styleselect | bold italic | " +
        "alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | " +
        "link image"
    });
    document.getElementById('convert').addEventListener('click', function(e) {
      e.preventDefault();
      convertImagesToBase64()
      // for demo purposes only we are using below workaround with getDoc() and manual
      // HTML string preparation instead of simple calling the .getContent(). Becasue
      // .getContent() returns HTML string of the original document and not a modified
      // one whereas getDoc() returns realtime document - exactly what we need.
      var contentDocument = tinymce.get('content').getDoc();
      var content = '<!DOCTYPE html>' + contentDocument.documentElement.outerHTML;
      var orientation = document.querySelector('.page-orientation input:checked').value;
      var converted = htmlDocx.asBlob(content, {orientation: orientation});

      saveAs(converted, 'test.docx');

      var link = document.createElement('a');
      link.href = URL.createObjectURL(converted);
      link.download = 'document.docx';
      link.appendChild(
        document.createTextNode('Click here if your download has not started automatically'));
      var downloadArea = document.getElementById('download-area');
      downloadArea.innerHTML = '';
      downloadArea.appendChild(link);
    });

    function convertImagesToBase64 () {
      contentDocument = tinymce.get('content').getDoc();
      var regularImages = contentDocument.querySelectorAll("img");
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      [].forEach.call(regularImages, function (imgElement) {
        // preparing canvas for drawing
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        canvas.width = imgElement.width;
        canvas.height = imgElement.height;

        ctx.drawImage(imgElement, 0, 0);
        // by default toDataURL() produces png image, but you can also export to jpeg
        // checkout function's documentation for more details
        var dataURL = canvas.toDataURL();
        imgElement.setAttribute('src', dataURL);
      })
      canvas.remove();
    }
  </script>
</body>
</html>