Header and Footer div on every page in PDF

StackOverflow https://stackoverflow.com/questions/23634545

  •  21-07-2023
  •  | 
  •  

Domanda

I am building an HTML page to be exported to PDF, in the same sence as printing the page. I would like to have the same header and footer on every page, but whatever I try... it doesn't work.

I am testing everything I have tried on both Chrome 34.0.xxx and Safari 7.0.3... both give the same results.

I have tried the possition: fixed with bottom: 0 and top: 0. I have tried using a table:

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

I have tried using:

.header {
  display: table-header-group;
}

.body {
  display: table-row-group;
}

.footer {
  display: table-footer-group;
}

The only thing I have not tried is the page-break option in CSS, since I do not know the height of the contents of the html page.

This is (for now) my HTML page:

<!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>

The result is that I get the "This is a header" and "This is a footer" on the first page, but not the following pages:

Example

How can I get the footer and header on each page?

È stato utile?

Soluzione

I ended up forking the BNHtmlPdfKit project and adding support for sending in header and footer UIView.

Check it out here: https://github.com/ppeelen/BNHtmlPdfKit/

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top