[英]Generate a Word document in JavaScript with Docx.js?
I am trying to use docx.js to generate a Word document but I can't seem to get it to work. 我正在尝试使用docx.js生成Word文档,但我似乎无法让它工作。
I copied the raw code into the Google Chrome console after amending line 247 to fix a "'textAlign' undefined error" 在修改第247行以修复“'textAlign'未定义错误”后,我将原始代码复制到Google Chrome控制台中
if (inNode.style && inNode.style.textAlign){..}
Which makes the function convertContent
available. 这使得函数
convertContent
可用。 The result of which is an Object eg 其结果是Object,例如
JSON.stringify( convertContent($('<p>Word!</p>)[0]) )
Results in - 结果是 -
"{"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}"
I copied 我复制了
<w:body>
<w:p>
<w:r>
<w:t xml:space="preserve">Word!</w:t>
</w:r>
</w:p>
</w:body>
into Notepad++ and saved it as a file with an extension of 'docx' but when I open it in MS Word but it says 'cannot be opened because there is a problem with the contents'. 进入Notepad ++并将其保存为扩展名为“docx”的文件,但是当我在MS Word中打开它但是它说“由于内容存在问题而无法打开”。
Am I missing some attribute or XML tags or something? 我错过了一些属性或XML标签或其他什么?
You can generate a Docx Document from a template using docxtemplater (library I have created). 您可以使用docxtemplater (我创建的库)从模板生成Docx文档。
It can replace tags by their values (like a template engine), and also replace images in a paid version. 它可以用它们的值替换标签(比如模板引擎),也可以替换付费版本中的图像。
Here is a demo of the templating engine: https://docxtemplater.com/demo/ 以下是模板引擎的演示: https : //docxtemplater.com/demo/
由于ajaxCalls到本地文件( blank
文件夹中的所有内容),此代码无法在JSFiddle上运行,或者您应该以ByteArray格式输入所有文件并使用jsFiddle
echo API: http://doc.jsfiddle。网络/应用/ echo.html
You may find this link useful, 您可能会发现此链接很有用,
http://evidenceprime.github.io/html-docx-js/
http://evidenceprime.github.io/html-docx-js/
An online demo here: 在线演示:
http://evidenceprime.github.io/html-docx-js/test/sample.html
http://evidenceprime.github.io/html-docx-js/test/sample.html
I know this is an older question and you already have an answer, but I struggled getting this to work for a day, so I thought I'd share my results. 我知道这是一个较老的问题,你已经有了答案,但我努力让这一天工作,所以我想我会分享我的结果。
Like you, I had to fix the textAlign
bug by changing the line to this: 像你一样,我必须通过将行更改为此来修复
textAlign
错误:
if (inNode.style && inNode.style.textAlign)
Also, it didn't handle HTML comments. 此外,它没有处理HTML注释。 So, I had to add the following line above the check for a "#text" node in the
for
loop: 所以,我必须在
for
循环的检查上面添加以下行:#text“节点:
if (inNodeChild.nodeName === '#comment') continue;
To create the docx was tricky since there is absolutely no documentation on this thing as of yet. 创建docx很棘手,因为到目前为止还没有关于这个东西的文档。 But looking through the code, I see that it is expecting the HTML to be in a File object.
但仔细查看代码,我发现它希望HTML位于File对象中。 For my purposes, I wanted to use the HTML I rendered, not some HTML file the user has to select to upload.
出于我的目的,我想使用我呈现的HTML,而不是用户必须选择上传的某些HTML文件。 So I had to trick it by making my own object with the same property that it was looking for and pass it in. To save it to the client, I use FileSaver.js , which requires a blob.
所以我不得不通过使用它所寻找的相同属性创建我自己的对象并将其传入来欺骗它。为了将其保存到客户端,我使用FileSaver.js ,这需要一个blob。 I included this function that converts base64 into a blob.
我包含了这个将base64转换为blob的函数 。 So my code to implement it is this:
所以我实现它的代码是这样的:
var result = docx({ DOM: $('#myDiv')[0] });
var blob = b64toBlob(result.base64, "application/vnd.openxmlformats-officedocument.wordprocessingml.document");
saveAs(blob, "test.docx");
In the end, this would work for simple Word documents, but isn't nearly sophisticated for anything more. 最后,这适用于简单的Word文档,但对于其他任何内容都不是很复杂。 I couldn't get any of my styles to render and I didn't even attempt to get images working.
我无法渲染任何样式,甚至没有尝试让图像正常工作。 I've since abandoned this approach and am now researching DocxgenJS or some server-side solution.
我已经放弃了这种方法,现在正在研究DocxgenJS或一些服务器端解决方案。
You are doing the correct thing codewise, but your file is not a valid docx file. 您正在以代码方式执行正确的操作,但您的文件不是有效的docx文件。 If you look through the
docx()
function in docx.js, you will see that a docx file is actually a zip containing several xml files. 如果你查看docx.js中的
docx()
函数,你会发现docx文件实际上是一个包含几个xml文件的zip文件。
I am using Open Xml SDK for JavaScript. 我正在使用Open Xml SDK for JavaScript。
http://ericwhite.com/blog/open-xml-sdk-for-javascript/ http://ericwhite.com/blog/open-xml-sdk-for-javascript/
Basically, on web server, I have a empty docx file as new template. 基本上,在Web服务器上,我有一个空的docx文件作为新模板。 when user in browser click new docx file, I will retrieve the empty docx file as template, convert it to BASE64 and return it as Ajax response.
当用户在浏览器中单击新的docx文件时,我将检索空的docx文件作为模板,将其转换为BASE64并将其作为Ajax响应返回。
in client scripts, you convert the BASE64 string to byte array and using openxmlsdk.js to load the byte array as an javascript OpenXmlPackage object. 在客户端脚本中,将BASE64字符串转换为字节数组,并使用openxmlsdk.js将字节数组作为javascript OpenXmlPackage对象加载。
once you have the package loaded, you can use regular OpenXmlPart to create a real document. 加载包后,可以使用常规OpenXmlPart创建真实文档。 (inserting image, creating table/row ).
(插入图像,创建表/行)。
the last step is stream it out to end user as a document. 最后一步是将其作为文档流式传输给最终用户。 this part is security related.
这部分与安全有关。 in my code I send it back to webserver and gets saved temporarily.
在我的代码中,我将其发送回网络服务器并暂时保存。 and prepare a http response to notify end user to download it.
并准备一个http响应通知最终用户下载它。
Check the URL above, there are useful samples of doing this in JavaScript. 检查上面的URL,有一些在JavaScript中执行此操作的有用示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.