将HTML导出生成word文档 - PC.aaron(3)_H5之家 - 中国HTML5教程资源分享第一站

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>生成word文档</title> 6 </head> 7 <body lang=ZH-CN> 8 <div> 9 <p>JS导出Word文档</p> 10 </div> 11 <input type="button" value="导出word"> 12 <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script> 13 <script type="text/javascript" src="js/FileSaver.js"></script> 14 <script type="text/javascript" src="js/jquery.wordexport.js"></script> 15 <script> 16 $(function(){ 17 $("input[type='button']").click(function(event) { 18 $(".word").wordExport('生成word文档'); 19 }); 20 }) 21 </script> 22 </body> 23 </html>

直接调用wordExport()接口就可以导出word文档，传的参数为导出的word文件名。

补充：

通过我们常规写的外联样式设置样式是无效的，通过个人的实践发现需要写内联样式才能生效，而单位也需要按照word的配置

单位pt设置。

而jquery.wordexport.js插件是要配置了个style样式让我们补充样式设置的：

但是个人实践了下，设置的样式却无法生效，只能通过内联设置才生效。

截图：

法二：通过百度js模板引擎生成word文档

主要是通过js模板设置对应的标签，然后XDoc.to(baidu.template())导出word，而通过百度js模板引擎的好处是也可以导出PDF文件。

完整demo：

{ , , , 43 }; 44 function renderTemplate(){ ).html(); ,data.title) ,data.img) ,data.content); ).append(html); 50 } 51 renderTemplate(); 52 function gen(type) { ); 54 } );

这里我通过renderTemplate函数叫js模板渲染到HTML中，实现了文本的展示和导出内容的结合。而因为这里导出的word文档是需要特别设置样式的，所以在页面样式展示下我们可以通过添加.class的方式设置。

附部分导出word文档样式设置：

截图：

更多参考：

FileSave.js:https://github.com/eligrey/FileSaver.js

百度导出文档模板：