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

Question

我正在尝试使用docx.js生成Word文档，但似乎无法使其正常工作。

在修复“'textAlign'未定义错误”后，我将原始代码复制到Google Chrome控制台中的第247行。

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

这使得函数convertContent可用。其结果是一个对象，例如：

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标签之类的东西？

- Peter

---

你尝试过使用 M4rio 的 Github 代码库吗？它有一个使用示例：https://github.com/MrRio/DOCX.js - edi9999

运行示例代码后，我得到了这个错误 - TypeError: Object function bound(var_args) { return func.apply(thisObject, args.concat(slice(arguments))); } has no method 'ajax'。 - Peter

你是否已经加载了jQuery？依赖项如下：<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="./libs/base64.js"></script> <script type="text/javascript" src="./libs/jszip/jszip.js"></script> - edi9999

是的，我做了。我正在尝试设置一个JSFiddle，但我不确定它是否是一个合适的环境。http://jsfiddle.net/iampeterbanjo/srK2u/6/ - Peter

你是对的，问题在于blank文件夹包含了一个空文档的数据，而Javascript通过ajax加载这个空文档来创建新文档。 - edi9999

Answer 1

您可以使用我创建的库 docxtemplater 从模板生成 Docx 文档。它可以像模板引擎一样替换标签为对应值，并在付费版本中更换图片。以下是模板引擎的演示: https://docxtemplater.com/demo/。请注意，html标签已被保留。

- edi9999

---

似乎只有付费用户才能使用处理图片的模块。 - Jesus is Lord

免费版本已经看起来很棒了。 - Juan Salvador

Answer 2

这段代码无法在 JSFiddle 上运行，因为它会调用本地文件（位于 blank 文件夹中的所有内容）。或者你可以将所有文件转换成 ByteArray 格式，并使用 jsFiddle 的 echo API：http://doc.jsfiddle.net/use/echo.html

- edi9999

---

谢谢。我决定使用一个叫做https://docx.codeplex.com/的库在服务器端完成这个任务。用JavaScript实现也很酷，但没关系。 :-) - Peter

如果您想要一个仅使用JavaScript的解决方案来生成docx模板，可以看一下我创建的库：https://github.com/edi9999/docxgenjs - edi9999

抱歉，我刚刚找到了你的一个示例 - https://github.com/edi9999/docxgenjs/blob/master/examples/textTagging.html - Peter

是的，在这里可以找到在线示例：http://javascript-ninja.fr/docxgenjs/examples/simpleTagging.html# - edi9999

太棒了！如果你能把它发布为答案，我会很高兴接受它。谢谢。 - Peter

Answer 3

我知道这是一个较旧的问题，你已经得到了答案，但我花了一天时间才解决这个问题，所以我想分享一下我的结果。

和你一样，我必须通过更改代码行来修复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或某些服务器端解决方案。

- adam0101

Answer 4

您可能会发现这个链接很有用，

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

这里有一个在线演示：

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

- user9869932

---

谢谢！我已经成功将图片保存到 docx 文件中了！我需要运行 npm install 安装以下依赖：html-docx-js、brfs、coffeeify、coffeescript，以及 file-saver（用于 saveAs）。 - Jesus is Lord

@WordsLikeJared，你怎么在没有tinymce的情况下保存图片？我觉得不需要tinymce，对吧？ - sg552

Answer 5

你在编码方面做得很正确，但你的文件不是有效的docx文件。如果你查看docx.js中的docx()函数，你会发现docx文件实际上是一个包含几个xml文件的zip文件。

- Joshua Smith

---

谢谢。如何将这些zip/xml文件转换为有效的docx格式？ - Peter

我认为你可以将完整的HTML文件传递给docx()函数的文件参数。它会返回结果。 - Joshua Smith

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来创建真正的文档。(插入图像、创建表/行)。

最后一步是将它作为文档流输出给最终用户。这部分与安全有关。在我的代码中，我将其发送回Web服务器并暂时保存。并准备一个HTTP响应通知最终用户下载它。

请检查上面的URL，其中有在JavaScript中执行此操作的有用示例。

- Victor Xie