html docx js 空白 docx 問題

Question

我正在嘗試使用 github 項目HTML-DOCX-JS創建 docx 文件，但由於我想在本地執行此過程，因此我已下載該項目並發現它存在一些問題。 我可以在 tinymce 編輯器中進行編輯，當我按下轉換時，我確實得到了 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>

文件結構是這樣的： http : //i.stack.imgur.com/qBgGW.png

Answer 1

NPM 庫html-docx-js使用“ altChunk ”標記將原始 HTML 文檔嵌入到 Docx 文件中。

不幸的是，這在 MacOS 或 Google Drive 上不受支持，這就是為什么您看到的是空白文檔。 在 Windows 上的 Word 中打開它（甚至在 Office365 上在線）以使其工作。

Answer 2

在微型mce編輯器中獲取內容后，您必須構建一個完整的html文檔，然后將其發送到htmlDocx.asBlob（）函數，否則該文檔將顯示為空白。

您的代碼應如下所示：

var content = tinymce.get('content').getContent();
var orientation = document.querySelector('.page-orientation input:checked').value;

//Build a full html document including doctype
var html_document = '<!DOCTYPE html><html><head><title></title>';
html_document  += '</head><body>' + content + '</body></html>';
var converted = htmlDocx.asBlob(html_document, {orientation: orientation});
saveAs(converted, 'test.docx');

希望這可以幫助。

html docx js 空白 docx 問題

問題描述

1 個解決方案

解決方案1
1 2019-10-15 10:39:08

解決方案2
-1 2015-10-22 00:25:47

html docx js 空白 docx 問題

問題描述

1 個解決方案

解決方案1 1 2019-10-15 10:39:08

解決方案2 -1 2015-10-22 00:25:47

解決方案1
1 2019-10-15 10:39:08

解決方案2
-1 2015-10-22 00:25:47