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>