如何使用html自定义或第三方插件以word格式导出

First method :user-defined

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>导出word文档</title>
</head>
<body>
<%
   String exportToDoc = request.getParameter("exportToDoc");
   String fileName = request.getParameter("fileName")==""?"doc":request.getParameter("fileName");
   if (exportToDoc != null
         && exportToDoc.toString().equalsIgnoreCase("YES")) {
      //设置内容和头文件为word形式
      response.setContentType("application/msword");
      response.setHeader("Content-Disposition","inline; filename="+fileName+".doc");
   }
%>
   <div class="container">
  <p align="center" style="font-size: 36px;font-family:'微软雅黑'">this is my first word folder</p>
   <div class="row">
      <div class="col-md-6" id="word_demo">
         <h3>谷歌Chrome56正式将HTTP页面标记“不安全”</h3>          
         <p>9月8日谷歌宣布,从2017年1月(Chrome56)开始,正式将某些HTTP页面标记“不安全”,比如含密码或信用卡信息传输的HTTP页面,而未来的长期计划是将所有HTTP页面都标为不安全,目的是让用户更加安全的浏览站点。 </p>
         <p>谷歌Chrome目前对HTTP的标记还比较中性,不能很好的反映HTTP的安全性缺失,谷歌的计划是将HTTP页面的不安全性更加清晰准确地标记出来,而这项计划将分阶段实施。 </p>
         <p>2017年开始,Chrome56将把含密码或信用卡信息传输的HTTP页面标记“不安全”,因为它们特殊的敏感性。而后续版本中,谷歌将把HTTP警告进一步延伸,比如更加注重隐私的无痕浏览模式下,将所有HTTP页面标记“不安全”。最终目标是,将所有情况下的HTTP页面都标记为“不安全”并以红色三角形作为警告标识,就像给失效的HTTPS连接的标识一样。</p>
         <p><img src="../static/images/14733867979972.png" width="550" /></p>
         <p>谷歌将在未来的版本中按此计划更新发布,但是建议网站尽快从HTTP转换成HTTPS。HTTPS已经比以往任何时候都更加容易实施,价格也更加便宜了。网络的性能和最新功能对HTTP将更加敏感。了解谷歌的指南,开始入手建立HTTPS加密。</p>
         <p>来源:<a href="http://hoohtml.com/">优码网</a></p>
         <a class="btn btn-default jquery-word-export" href="javascript:void(0)">
               <span class="word-icon">W</span>
               导出为.doc文档
             </a>
      </div>
   </div>
      <%if (exportToDoc == null) {%>
      <p>
      <form action="" method="post">
         <input type="hidden" name="exportToDoc" value="YES">
         <!-- 自定义文件名,没有则默认doc.doc -->
         请输入你要保存为word文档的文件名<input type="text" name="fileName" placeholder="如:doc">
         <input type="submit" value="Export to Doc">
      </form>
      </p>
      <%}%>
</div>
</body>
</html>

如何使用html自定义或第三方插件以word格式导出

缺点:图片不能保存

Second method :jquery.wordexport.js  plug-in

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>导出word文档插件</title>
</head>
<body>
   <div class="container">
  <p align="center" style="font-size: 36px;font-family:'微软雅黑'">this is my first word folder</p>
   <div class="row">
      <div class="col-md-6" id="word_demo">
         <h3>谷歌Chrome56正式将HTTP页面标记“不安全”</h3>          
         <p>9月8日谷歌宣布,从2017年1月(Chrome56)开始,正式将某些HTTP页面标记“不安全”,比如含密码或信用卡信息传输的HTTP页面,而未来的长期计划是将所有HTTP页面都标为不安全,目的是让用户更加安全的浏览站点。 </p>
         <p>谷歌Chrome目前对HTTP的标记还比较中性,不能很好的反映HTTP的安全性缺失,谷歌的计划是将HTTP页面的不安全性更加清晰准确地标记出来,而这项计划将分阶段实施。 </p>
         <p>2017年开始,Chrome56将把含密码或信用卡信息传输的HTTP页面标记“不安全”,因为它们特殊的敏感性。而后续版本中,谷歌将把HTTP警告进一步延伸,比如更加注重隐私的无痕浏览模式下,将所有HTTP页面标记“不安全”。最终目标是,将所有情况下的HTTP页面都标记为“不安全”并以红色三角形作为警告标识,就像给失效的HTTPS连接的标识一样。</p>
         <p><img src="../static/images/14733867979972.png" width="550" /></p>
         <p>谷歌将在未来的版本中按此计划更新发布,但是建议网站尽快从HTTP转换成HTTPS。HTTPS已经比以往任何时候都更加容易实施,价格也更加便宜了。网络的性能和最新功能对HTTP将更加敏感。了解谷歌的指南,开始入手建立HTTPS加密。</p>
         <p>来源:<a href="http://hoohtml.com/">优码网</a></p>
         <a class="btn btn-default jquery-word-export" href="javascript:void(0)">
               <span class="word-icon">W</span>
               导出为.doc文档
             </a>
      </div>
   </div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="../static/js/FileSaver.js"></script>
<script type="text/javascript" src="../static/js/jquery.wordexport.js"></script>
<script type="text/javascript">    
$('.jquery-word-export').click(function(){
   //文件名
   var fileName="JWE";
  $("#word_demo").wordExport(fileName);
});
</script>
</body>
</html>

如何使用html自定义或第三方插件以word格式导出

下载相关插件网址:http://hoohtml.com/jQuery/Tools/2016090927.html

注:在自定义的情况下,不管以哪种格式下载,不知你们有没有发现都需要最关键的两步:

response.setContentType("application/vnd.ms-excel"); //设置内容类型
response.setHeader("Content-Disposition","inline; filename="+fileName+".xls"); //设置头文件

像我上篇所讲的以jsp转换为excel格式也不例外:https://my.oschina.net/u/3378039/blog/1560445

So设置格式类型大全请参照:https://wenku.baidu.com/view/6eda456727d3240c8447efb7.html