HTML docx js空白docx问题



我试图使用github项目HTML-DOCX-JS创建docx文件,但由于我想在本地执行此过程,我已经下载了该项目,发现它有一些问题。我能够在编辑器编辑,当我按下转换,我得到docx文件,但它是空白的。我对sample.html文件做了一些更改,因为默认项目甚至没有在单击时给出docx。请检查下面的代码,让我知道是什么原因导致的问题,没有异常从JS以及。

    <!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="../dist/html-docx.js"></script>
</head>
<body>
  <p>Enter/paste your document here:</p>
  <textarea id="content" cols="60" rows="10"></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();
      var content = tinymce.get('content').getContent();
      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);
    });
  </script>
</body>
</html>

文件结构是这样的:https://i.stack.imgur.com/qBgGW.png

NPM库html-docx-js使用"altChunk"标记将原始HTML文档嵌入Docx文件中。

不幸的是,这在MacOS或Google Drive上是不支持的,这就是为什么你会看到一个空白的文档。在Windows的Word中打开它(甚至在Office365中在线打开),使其工作。

最新更新