How to use HTML to print header and footer on every printed page of a document?

前端未结

关注

 20  1380

迷失自我

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 t

相关标签:

20条回答

无人共我

2020-11-21 17:08

Try this, for me it's working on Chrome, Firefox and Safari. You will get header and footer fixed to each page without overlapping the page content

CSS

<style>
  @page {
    margin: 10mm;
  }

  body {
    font: 9pt sans-serif;
    line-height: 1.3;

    /* Avoid fixed header and footer to overlap page content */
    margin-top: 100px;
    margin-bottom: 50px;
  }

  #header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100px;
    /* For testing */
    background: yellow; 
    opacity: 0.5;
  }

  #footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    font-size: 6pt;
    color: #777;
    /* For testing */
    background: red; 
    opacity: 0.5;
  }

  /* Print progressive page numbers */
  .page-number:before {
    /* counter-increment: page; */
    content: "Pagina " counter(page);
  }

</style>

HTML

<body>

  <header id="header">Header</header>

  <footer id="footer">footer</footer>

  <div id="content">
    Here your long long content...
    <p style="page-break-inside: avoid;">This text will not be broken between the pages</p>
  </div>

</body>

0 讨论(0)

隐瞒了意图╮

2020-11-21 17:10

Use page breaks to define the styles in CSS:

@media all
  {
  #page-one, .footer, .page-break { display:none; }
  }

@media print
  {
  #page-one, .footer, .page-break   
    { 
    display: block;
    color:red; 
    font-family:Arial; 
    font-size: 16px; 
    text-transform: uppercase; 
    }
  .page-break
    {
    page-break-before:always;
    } 
}

Then add the markup in the document at the appropriate places:

<h2 id="page-one">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>

References

CSS Paged Media: Page Breaks
MDN: page-break-before
MDN: break-before
Multi-column Layout
XHTML Print: Second Edition
Webkit Bug 5097: CSS2 page-break-after does not work
Print HTML FAQ: Will the program respect CSS styles such as page-break-after?
How to deal with page breaks when printing a large HTML table

0 讨论(0)

囚心锁ツ

2020-11-21 17:14

the magic solution is really putting every thing in single table.

thead: this is for the repeated header.
tfoot: the repeated footer.
tbody: the content.

and make a single tr, td and put every thing in a div

CODE::

<table class="report-container">
   <thead class="report-header">
     <tr>
        <th class="report-header-cell">
           <div class="header-info">
            ...
           </div>
         </th>
      </tr>
    </thead>
    <tfoot class="report-footer">
      <tr>
         <td class="report-footer-cell">
           <div class="footer-info">
           ...
           </div>
          </td>
      </tr>
    </tfoot>
    <tbody class="report-content">
      <tr>
         <td class="report-content-cell">
            <div class="main">
            ...
            </div>
          </td>
       </tr>
     </tbody>
</table>

table.report-container {
    page-break-after:always;
}
thead.report-header {
    display:table-header-group;
}
tfoot.report-footer {
    display:table-footer-group;
}

extra: to prevent overlapping with multiple pages. like:

<div class="main">
    <div class="article">
        ...
  </div>
    <div class="article">
        ...
  </div>
    <div class="article">
        ...
  </div>
  ...
  ...
  ...
</div>

which results in overflow that will make things overlap with the header within the page breaks..

so >> use: page-break-inside: avoid !important; with this class article.

table.report-container div.article {
    page-break-inside: avoid;
}

pretty simple, hope this will give you the best result you wishing for.

best regards. ;)

source..

0 讨论(0)

忘掉有多难

2020-11-21 17:14
I'm surprised and unimpressed that Chrome has such terrible CSS print support.

My task required showing a slightly different footer on each page. In the simplest case, just an incrementing chapter and page number. In more complex cases, more text in the footer - for example, several footnotes - which could expand it in size, causing what is on that page's content area to be shrunk and part of it to reflow to the next page.

CSS print cannot solve this, at least not with shoddy browser support today. But stepping outside of print, CSS3 can do a lot of the heavy lifting:

https://jsfiddle.net/b9chris/moctxd2a/29/
```
<div class=page>
  <header></header>
  <div class=content>Content</div>
  <footer></footer>
</div>
```
SCSS:
```
body {
  @media screen {
    width: 7.5in;
    margin: 0 auto;
  }
}

div.page {
  display: flex;
  height: 10in;    
  flex-flow: column nowrap;
  justify-content: space-between;
  align-content: stretch;
}

div.content {
  flex-grow: 1;
}

@media print {
  @page {
    size: letter;  // US 8.5in x 11in
    margin: .5in;
  }

  footer {
    page-break-after: always;
  }
}
```
There's a little more code in the example, including some Cat Ipsum; but the js in use is just there to demonstrate how much the header/footer can vary without breaking pagination. The key really is to take a column-bottom-sticking trick from CSS Flexbox and then apply it to a page of a known, fixed height - in this case, an 8.5"x11" piece of US letter-sized paper, with .5" margins leaving width: 7.5in and height: 10in exactly. Once the CSS flex container is told its exact dimensions (div.page), it's easy to get the header and footer to expand and contract the way they do in conventional typography.

What's left is flowing the content of the page when the footer, for example, grows to 8 footnotes not 3. In my case the content is fixed enough that I don't need to worry about it, but I'm sure there's a way to do it. One approach that leaps to mind, is to turn the header and footer into 100% width floats, then position them with Javascript. The browser will handle the interruptions to regular content flow for you automatically.
0 讨论(0)
发布评论:

提交评论
- 加载中...
你的背包

2020-11-21 17:15
If you take the element that you want to be the footer and set it to be position:fixed and bottom:0, when the page prints it will repeat that element at the bottom of each printed page. The same would work for a header element, just set top:0 instead.

For example:
```
<div class="divFooter">UNCLASSIFIED</div>
```
CSS:
```
@media screen {
  div.divFooter {
    display: none;
  }
}
@media print {
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
庸人自扰

2020-11-21 17:15
I have been searching for years for a solution and found this post on how to print a footer that works on multiple pages without overlapping page content.

My requirement was IE8, so far I have found that this does not work in Chrome. [update]As of 1 March 2018, it works in Chrome as well

This example uses tables and the tfoot element by setting the css style:
```
tfoot {display: table-footer-group;}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...