使用js把html导出word，单位换算，配置样式和分页，页边距，字体及大小，行距，缩进，@page等等

js导出html为word的方法

getquestion:function(){
            require([\'backend/FileSaver\'], function(){
                require([\'backend/jquery.wordexport\'], function(){
                var sjname=$(\'#sjname\').html()
                $(".jquery-word-export").click(function(event) {
                    $("#pagecontent").wordExport(sjname);
                });})
            
            });
        },

引入FileSaver，再使用jquery.wordexport，html布局如下

<div id="pagecontent">

      <div class="form-group">
        <h2 id="sjname" style="text-align:center">2020年7月29日阜阳市颍泉区幼儿教师招聘</h2>
        <button class="jquery-word-export btn btn-success pull-right" type=\'button\'>导出成word</button>
      </div>

<!--循环题目，我这里应该是循环文章-->
</div>

以上是自己的实现方式，有篇文章总结的也不错。有兴趣的可以看下
1.https://www.cnblogs.com/Ananiah/archive/2019/03/26/10600297.html
2.http://www.jq22.com/jquery-info11368

如何格式化html文档呢？比如页眉页脚，页边距，分页等等

有博主提供了一种思路

关于分页

复制下面的代码，就可以分页了

<span lang="EN-US" style="font-size:10.5pt;mso-bidi-font-size:12.0pt;font-family:" mce_style="font-size:10.5pt;mso-bidi-font-size:12.0pt;font-family:" times="" new="" roman\';mso-fareast-font-family:宋体;mso-font-kerning:1.0pt;mso-ansi-language="" en-us;mso-fareast-language:zh-cn;mso-bidi-language:ar-sa\'=""><br clear="all" style="page-break-before:always" mce_style="page-break-before:always"></span>

关于单位换算

看到模板中的页边距是上下23mm，左右26mm，怎么转化成pt呢？

1点=0.3527毫米
所以，上下23*0.3527=8.11pt，左右26*0.3527=9.17pt

关于页边距

经分析源码，添加如下CSS代码即可：

@page WordSection1
	{size:595.3pt 841.9pt;
	margin:30.0pt 30.0pt 30.0pt 30.0pt;
	mso-header-margin:42.55pt;
	mso-footer-margin:49.6pt;
	mso-paper-source:0;}
div.WordSection1
	{page:WordSection1;}

主要是那个 margin，顺序和CSS一直，上右下左
body 中最外层 div 加 class=WordSection1

另一个大佬的解决方法是这样的，可以学到不少东西

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>print  Geovin Du</title>
<style type="text/css" media="screen">
/*
https://www.w3.org/TR/css-page-3/
https://developer.mozilla.org/en-US/docs/Web/CSS/:first
https://dev.opera.com/articles/
https://www.quackit.com/css/at-rules/css_page_at-rule.cfm
https://developers.google.com/web/tools/chrome-devtools/css/   
涂聚文
注：Firefox,Safari,Internet Explorer,Google Chrome,Opera 是默认的页眉是网页title  页脚：是第几页/共几页. 只有Microsoft Edge没有默认的页眉，页脚 
     
    */
/*应用于Microsoft edge*/
    .heade,.bottom{display:none;}
    </style>
     
<style type="text/css" media="print">
/*每一页 如果没有另外自定义的话 */
@page {margin-left: 50px; margin-top: 100px;}  
/*第一页*/
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}
/*分页标记*/
.geovindu{
  page-break-after: always;
}
.heade {margin-top: 10px;}
    </style>
</head>
 
<body>

<div id="geovindu" class="geovindu">
<div class="heade">页眉：涂家村</div>
<div class="conent"> 
    First Page.
</div>
<div class="bottom">第一页</div>
</div>
     
     
<div id="geovindu" class="geovindu">
<div class="heade">页眉：涂家村</div>
<div class="conent">
    Second Page.
</div>
<div class="bottom">第二页</div>  
</div>
<button>Print!</button>


<script type="text/javascript">
    document.querySelector("button").onclick = function () {
      window.print();
    }
         
        </script>
</body>
</html>

@page是什么意思

https://www.nhooo.com/css-reference/css-page-rule.html

秒客网