Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Header and Footer div on every page in PDF

Header and Footer div on every page in PDF

Problem

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:

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:



    
        Report
This is a header
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body
Body

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?

Problem courtesy of: Paul Peelen

Solution

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/

Solution courtesy of: Paul Peelen

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Header and Footer div on every page in PDF

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×