【发布时间】：2014-05-28 02:01:49
【问题描述】：
我正在构建一个要导出为 PDF 的 HTML 页面，与打印页面的意义相同。我想在每一页上都有相同的页眉和页脚，但无论我尝试什么......它都不起作用。
我正在测试我在 Chrome 34.0.xxx 和 Safari 7.0.3 上尝试过的所有内容......都给出了相同的结果。
我已经尝试了possition: fixed 与bottom: 0 和top: 0。
我尝试过使用表格：
<table>
<thead>
<!-- Will print at the top of every page -->
</thead>
<tbody>
<!-- Page content -->
</tbody>
<tfoot>
<!-- Will print at the bottom of every page -->
</tfoot>
</table>
我尝试过使用：
.header {
display: table-header-group;
}
.body {
display: table-row-group;
}
.footer {
display: table-footer-group;
}
我唯一没有尝试过的是 CSS 中的分页选项，因为我不知道 html 页面内容的高度。
这是（目前）我的 HTML 页面：
<!DOCTYPE HTML>
<html>
<head>
<title>Report</title>
<style type="text/css">
body, html {
font-family: "Helvetica","Arial";
font-size: 12px;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.body {
width: 100%;
background-color: blue;
margin: 50px 0 50px 0;
}
.header, .footer {
width: 100%;
height: 50px;
position: fixed;
}
.header {
top: 0;
background-color: red;
}
.footer {
bottom: 0;
background-color: green;
}
</style>
</head>
<body>
<div class="header">
This is a header
</div>
<div class="body">
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
Body<br/>
</div>
<div class="footer">
This is the footer
</div>
</body>
</html>
结果是我在第一页上得到了“这是页眉”和“这是页脚”，但后面的页面却没有：
如何获取每页的页脚和页眉？
【问题讨论】：
-
你用什么将 HTML 导出为 PDF？
-
对正文内容部分使用 iframe，并使用 javascript 在同一 iframe 中加载链接。
-
@Waymond 不，这对我来说是完全相同的结果。 （将其复制到 JSFiddle 以在新标签中进行测试：jsfiddle.net/Ue62G/2/show）
-
@KevinCittadini 我在 iOS 上使用 BNHtmlPdfKit 库。
标签： html css pagination