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

【问题标题】：Generate a Word document in JavaScript with Docx.js?使用 Docx.js 在 JavaScript 中生成 Word 文档？
【发布时间】：2019-02-19 01:30:40
【问题描述】：

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

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

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

【问题讨论】：

你试过使用 M4rio 的 Github repo 吗？它有一个使用示例：github.com/MrRio/DOCX.js
运行示例代码后出现此错误 - TypeError: Object function bound(var_args) { return func.apply(thisObject, args.concat(slice(arguments))); } has no method 'ajax'
你加载了 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>
是的，我做到了。我正在尝试设置一个 JSFiddle，但我不确定它是否是一个合适的环境 jsfiddle.net/iampeterbanjo/srK2u/6
你是对的，文件夹blank包含一个空文档的数据，Javascript通过ajax加载这个空白文档来创建新文档

标签： javascript ms-word docx

【解决方案1】：

您可以使用 docxtemplater（我创建的库）从模板生成 Docx 文档。

它可以用标签的值替换标签（如模板引擎），还可以替换付费版本中的图像。

这是模板引擎的演示：https://docxtemplater.com/demo/

【讨论】：

The module to work with images appears to be paid-only

【解决方案2】：

由于 ajaxCalls 对本地文件（blank文件夹中的所有内容），此代码无法在 JSFiddle 上运行，或者您应该以 ByteArray 格式输入所有文件并使用 jsFiddle echo API：@ 987654321@

【讨论】：

谢谢。我决定使用一个名为docx.codeplex.com 的库来做这个服务器端使用JavaScript 来做这件事会很酷，但是很好。 :-)
如果您想要一个仅使用 javascript 的解决方案来从 docx 模板生成 docx，请查看我创建的库：github.com/edi9999/docxgenjs
哇。这真的很酷。你可以使用 base64 图像或画布元素吗？你有演示页面或 hello_word.docx 示例吗？
抱歉，我刚刚找到你的一个例子 - github.com/edi9999/docxgenjs/blob/master/examples/…
是的，在线示例可以在这里找到：javascript-ninja.fr/docxgenjs/examples/simpleTagging.html#

【解决方案3】：

我知道这是一个较老的问题，并且您已经有了答案，但是我为此努力了一天，所以我想我会分享我的结果。

和你一样，我必须通过将行更改为以下内容来修复 textAlign 错误：

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

此外，它不处理 HTML cmets。因此，我必须在for 循环中的“#text”节点检查上方添加以下行：

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

创建 docx 很棘手，因为目前还没有关于这件事的文档。但是查看代码，我看到它期望 HTML 位于 File 对象中。出于我的目的，我想使用我呈现的 HTML，而不是用户必须选择上传的一些 HTML 文件。所以我不得不通过使用它正在寻找的相同属性创建我自己的对象并将其传入来欺骗它。为了将它保存到客户端，我使用FileSaver.js，这需要一个blob。我 included this function 将 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 或一些服务器端解决方案。

【讨论】：

【解决方案4】：

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

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

这里有一个在线演示：

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

【讨论】：

谢谢！我能够将图像保存到 docx！我需要npm install 以下内容：html-docx-js、brfs、coffeeify、coffeescript、file-saver (for saveAs)
@WordsLikeJared 如何在没有tinymce 的情况下保存图像？我认为不需要tinymce，对吗？

【解决方案5】：

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

【讨论】：

谢谢。如何将这些 zip/xml 文件转换为有效的 docx 格式？
我认为您可以将完整的 html 文件传递给 docx() 函数的文件参数。它将返回结果。

【解决方案6】：

我正在使用 Open Xml SDK for JavaScript。

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

基本上，在网络服务器上，我有一个空的 docx 文件作为新模板。当用户在浏览器中单击新的 docx 文件时，我将检索空的 docx 文件作为模板，将其转换为 BASE64 并作为 Ajax 响应返回。

在客户端脚本中，您将 BASE64 字符串转换为字节数组，并使用 openxmlsdk.js 将字节数组加载为 javascript OpenXmlPackage 对象。

一旦你加载了包，你就可以使用常规的 OpenXmlPart 创建一个真实的文档。（插入图像，创建表/行）。

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

检查上面的 URL，有一些有用的 JavaScript 示例。

【讨论】：