Question

我正在构建一个HTML页面，用于导出为PDF，与打印页面相同。我想在每个页面上都有相同的页眉和页脚，但无论我尝试什么......它都不起作用。

我正在测试我在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>

结果是我在第一页上看到“This is a header”和“This is a footer”，但不是以下页面：

Example

如何在每页上获取页脚和页眉？

Answer 1

我最终分配了BNHtmlPdfKit项目并添加了对页眉和页脚UIView发送的支持。

请在此处查看：https://github.com/ppeelen/BNHtmlPdfKit/

PDF格式的每一页上的页眉和页脚div

1 个答案: