Html - How to print header and footer on every printed page of a document?

inhQuytSolidWorks
November 15, 2023
148 views
0 votes
2 Answers

Is it possible to print HTML pages with custom headers and footers on each printed page?

I’d like to add the word "UNCLASSIFIED" in Red, Arial, size 16pt to the top and bottom of every printed page, regardless of the content.

To clarify, if the document was printed onto 5 pages, each page should have the custom header and footer.

Does anybody know if this is possible using HTML/CSS?

CSS

<style>
      .empty-header {
        height: 0px
      }

      .empty-footer {
        height: 0px
      }

      @media print {
        .empty-header {
          height: 100px
        }

        .empty-footer {
          height: 20px
        }
      }

      header {
        width: 100%;
        height: 50px;
      }

      footer {
        width: 100%;
        height: 20px;
      }

      @media print {

        header,
        footer {
          position: fixed;
          color: #777;
        }

        footer {
          bottom: 0;
        }
      }
</style>

HTML

<header>
      <h3>Header Example</h3>
      <li>This is an example of a header.</li>
    </header>
    <table class=paging>
      <thead class="empty-header"></thead>
      <tbody>
        <tr>
          <td>
            <ol>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
            </ol>
          </td>
        </tr>
      </tbody>
      <tfoot class="empty-footer"></tfoot>
    </table>
    <footer>(repeated footer)</footer>
    </body>

Tags: html

Answers

Yes, it’s possible to print HTML pages with custom headers and footers on each printed page using CSS. You can use the @page rule to specify the margins for the page box, and then you can use ::before and ::after pseudo-elements content in the margin area.

Here’s an example of how you can do that:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
    crossorigin="anonymous"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        @page {
        margin: 100px 0;
        @top-center {
            content: "UNCLASSIFIED";
            color: red;
            font-family: Arial, sans-serif;
            font-size: 16pt;
        }
        @bottom-center {
            content: "UNCLASSIFIED";
            color: red;
            font-family: Arial, sans-serif;
            font-size: 16pt;
        }
        }
        h1::before {
        content: "Header Start -";
        }
        h1::after {
        content: " - Header End";
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>
    This is some sample text. If you print this page, you will see
    "UNCLASSIFIED" in red, Arial, size 16pt at the top and bottom of every
    printed page.
    </p>
    <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
    crossorigin="anonymous"
    ></script>
</body>
</html>

This will add "UNCLASSIFIED" in red, Arial, size 16pt to the top and bottom center of every printed page.

Note: This code is using Bootstrap by CDN (Content Delivery Network) link.

The web standard which has been proposed for managing paged media has unfortunately not been fully implemented yet by the major browsers.

In the meantime, suggest you use the excellent Javascript library Paged.js to accomplish this. It works as a polyfill, allowing you to use the web standard to specify your headers and footers, and then interpreting that in a way that current browsers can understand. The way I am using it here in this snippet will display the paginated results both on screen and when printed, but if you need it to display paginated results in print view only, that is possible.

@page {
  size: A4;
  @top-center {
    content: "UNCLASSIFIED";
    color: red;
  }
  @bottom-center {
    content: "UNCLASSIFIED";
    color: red;
  }
}

<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<h1>This is the title of the document</h1>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<p>This is the main content of the document.</p>
<h4><br>** This is the end of the document. **</h4>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to print header and footer on every printed page of a document?

Answers