我正在构建一个要导出为 PDF 的 HTML 页面，就像打印页面一样。我想在每一页上都使用相同的页眉和页脚，但无论我尝试什么……都行不通。
我正在测试我在 Chrome 34.0.xxx 和 Safari 7.0.3 上尝试过的所有内容...都给出了相同的结果。
我已经尝试了 position: 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>
结果是我在第一页上得到了“This is a header”和“This is a footer”，但后面的页面却没有:
如何获取每页的页脚和页眉？
最佳答案
我最终 fork 了 BNHtmlPdfKit元素并添加对发送页眉和页脚 UIView 的支持。
关于html - PDF 中每一页的页眉和页脚 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23634545/