使用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>
