使用Docx.js在JavaScript中生成Word文檔？

Question

我正在嘗試使用docx.js生成Word文檔，但我似乎無法讓它工作。

在修改第247行以修復“'textAlign'未定義錯誤”后，我將原始代碼復制到Google Chrome控制台中

if (inNode.style && inNode.style.textAlign){..}

這使得函數convertContent可用。 其結果是Object，例如

JSON.stringify( convertContent($('<p>Word!</p>)[0]) )

結果是 -

"{"string":
      "<w:body>
            <w:p>
                <w:r>
                    <w:t xml:space=\"preserve\">Word!</w:t>
                </w:r>
            </w:p>
       </w:body>"
 ,"charSpaceCount":5
 ,"charCount":5,
 "pCount":1}"

我復制了

<w:body>
    <w:p>
        <w:r>
            <w:t xml:space="preserve">Word!</w:t>
        </w:r>
    </w:p>
</w:body>

進入Notepad ++並將其保存為擴展名為“docx”的文件，但是當我在MS Word中打開它但是它說“由於內容存在問題而無法打開”。

我錯過了一些屬性或XML標簽或其他什么？

Answer 1

您可以使用docxtemplater （我創建的庫）從模板生成Docx文檔。

它可以用它們的值替換標簽（比如模板引擎），也可以替換付費版本中的圖像。

以下是模板引擎的演示： https ： //docxtemplater.com/demo/

Answer 2

由於ajaxCalls到本地文件（ blank文件夾中的所有內容），此代碼無法在JSFiddle上運行，或者您應該以ByteArray格式輸入所有文件並使用jsFiddle echo API： http：//doc.jsfiddle。網絡/應用/ echo.html

Answer 3

您可能會發現此鏈接很有用，

http://evidenceprime.github.io/html-docx-js/

在線演示：

http://evidenceprime.github.io/html-docx-js/test/sample.html

Answer 4

我知道這是一個較老的問題，你已經有了答案，但我努力讓這一天工作，所以我想我會分享我的結果。

像你一樣，我必須通過將行更改為此來修復textAlign錯誤：

if (inNode.style && inNode.style.textAlign)

此外，它沒有處理HTML注釋。 所以，我必須在for循環的檢查上面添加以下行：#text“節點：

if (inNodeChild.nodeName === '#comment') continue;

創建docx很棘手，因為到目前為止還沒有關於這個東西的文檔。 但仔細查看代碼，我發現它希望HTML位於File對象中。 出於我的目的，我想使用我呈現的HTML，而不是用戶必須選擇上傳的某些HTML文件。 所以我不得不通過使用它所尋找的相同屬性創建我自己的對象並將其傳入來欺騙它。為了將其保存到客戶端，我使用FileSaver.js ，這需要一個blob。 我包含了這個將base64轉換為blob的函數 。 所以我實現它的代碼是這樣的：

var result = docx({ DOM: $('#myDiv')[0] });
var blob = b64toBlob(result.base64, "application/vnd.openxmlformats-officedocument.wordprocessingml.document");
saveAs(blob, "test.docx");

最后，這適用於簡單的Word文檔，但對於其他任何內容都不是很復雜。 我無法渲染任何樣式，甚至沒有嘗試讓圖像正常工作。 我已經放棄了這種方法，現在正在研究DocxgenJS或一些服務器端解決方案。

Answer 5

您正在以代碼方式執行正確的操作，但您的文件不是有效的docx文件。 如果你查看docx.js中的docx()函數，你會發現docx文件實際上是一個包含幾個xml文件的zip文件。

Answer 6

我正在使用Open Xml SDK for JavaScript。

http://ericwhite.com/blog/open-xml-sdk-for-javascript/

基本上，在Web服務器上，我有一個空的docx文件作為新模板。 當用戶在瀏覽器中單擊新的docx文件時，我將檢索空的docx文件作為模板，將其轉換為BASE64並將其作為Ajax響應返回。

在客戶端腳本中，將BASE64字符串轉換為字節數組，並使用openxmlsdk.js將字節數組作為javascript OpenXmlPackage對象加載。

加載包后，可以使用常規OpenXmlPart創建真實文檔。 （插入圖像，創建表/行）。

最后一步是將其作為文檔流式傳輸給最終用戶。 這部分與安全有關。 在我的代碼中，我將其發送回網絡服務器並暫時保存。 並准備一個http響應通知最終用戶下載它。

檢查上面的URL，有一些在JavaScript中執行此操作的有用示例。