Add Footer Text in Each Page of Pdf Using CSS

Add Footer to every page of pdf using html css

Whilst it is fairly easy to emulate page breaks headers and footers in HTML they are not natural for a format that is designed for unfettered page widths or lengths.

It is common to describe HTML objects as % of a variable canvas the conversion to the fixed Cartesian pages needed by PDF is prone to rounding errors.

Here as an example, the primary aim was to emulate a PDF layout in Microsoft Edge (Chrome based) but the fiddle factors that work fairly well for view and print in one browser will need adjustments in another.

SEE the inset where the page for exactly the same code and target printer which is perfect in edge print preview, is subject to creep-age in Internet Explore, on the same printer defaults !! That crap-page thus often requires minor tweaking to keep it in sync, leading to two different copies of source !

Sample Image

<!DOCTYPE html>
<html><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Dynamic Styles: NewPage Breaking Headline News</title>

<!--
 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/break-after"></a> 
 Generic break values
 NewPage break values
 Column break values
 Region break values
 Global values
-->

<style type="text/css" media="all">
.body {
    position: absolute;
}
#page {
   break-before: auto;
   margin: 0px;
   width: 736px;
   height: 1103px;
   position: relative;
}
h1 {
    text-align: center;
}

#page-break {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    padding: 20px;
    background-color: red;
    text-align: center;
}
</style>

</head>
<body>
<div id="page">
<div>
<br><h1>Headline on Page 1</h1>
...
 more content on Page 1
...
</div>
<div id="page-break"> Footline on Page 1 </div>
</div>
<div id="page">
<br><h1>Headline on Page 2</h1>
...
 more content on Page 2
...
<div id="page-break"> Footline on Page 2 </div>
</div>
<div id="page">
<br><br><h1>Headline on Page 3</h1>
...
 more content on Page 3
...
<div id="page-break"> Footline on Page 3 </div>
</div>
</body></html>

Creating page headers and footers using CSS for print

Putting an element to the top of each page:

@page {
  @top-center {
    content: element(pageHeader);
  }
}
#pageHeader{
  position: running(pageHeader);
}

See http://www.w3.org/TR/css3-gcpm/#running-elements (works in Flying Saucer)

How do I repeat headers and footers fixed to top and bottom of document with CSS in iText 7 using pdfHTML converter?

pdfHTML 4.0.2 allows you to make a PDF from an HTML file and add headers and footers easily in a completely declarative style (so only using HTML+CSS combination without necessity to write a lot of boilerplate code).

And you can even add page numbers to your output PDF, all with pure CSS instructions that are processed by pdfHTML.

Here is an example of an HTML file:

<!DOCTYPE html>
<html>
<body>

<style>
  #header {
    position: running(header);
  }

  #footer {
    position: running(footer);
  }

  @page {
    margin-top: 100px;
    margin-bottom: 100px;

    @top-center {
      content: element(header);
    }

    @bottom-center {
      content: element(footer);
    }
  }

  #current-page-placeholder::before {
    content: counter(page);
  }


  #total-pages-placeholder::before {
    content: counter(pages);
  }
</style>

<div id="header"><p style="color: green">This is a header</p></div>
<div id="footer"><p style="color: red">This is a footer. Page <span id="current-page-placeholder"></span>/<span id="total-pages-placeholder"></span></p></div>

<h2>An ordered HTML list</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

</body>
</html>

How can I add headers and footers to every page of html content I'm printing from Mobile Safari?

There is a bug in WebKit, that makes it currently impractical in Safari. Here is the link to this issue.

https://bugs.webkit.org/show_bug.cgi?id=17205

Add Footer Text in Each Page of Pdf Using CSS

Add Footer to every page of pdf using html css

Creating page headers and footers using CSS for print

How do I repeat headers and footers fixed to top and bottom of document with CSS in iText 7 using pdfHTML converter?

How can I add headers and footers to every page of html content I'm printing from Mobile Safari?

Related Topics

Leave a reply