Question

我试图在每个页面的HTML打印中添加页眉和页脚。我写下面的代码

@page {
  @top-left {
    content: "this is the page header";
  }
}

@page: right {
  @bottom-right {
    content: counter(page) "page";
  }
}

它不起作用。我认为@ bottom-right，@ bottom-left等功能已在最近的CSS更新中删除。这些元素什么也没显示。我已经尝试了以下代码

<style>
@media print {
  .page-header {
    position: fixed;
    top: 0;
    right: 0;
  }

  .page-footer {
    position: fixed;
    bottom: 0;
    right: 0;
  }
}
</style>
<section class='print-me'>
   <div class='row'>
      <div col='6'>..... dynamically generated text, graphs and images about 30 pages long which are difficult to handle manually ....</div>
   </div>
</section>

 <!-- I need this page header and footer in every page -->
 <h5 class="page-header">..... copyright and logo ...../h5>
 <h5 class="page-footer">..... page number: .....</h5>
 <!-- I want to generate page number dynamically -->

由于我大约有30页的HTML内容具有很长的段落，这些段落是动态生成的，因此，如果尝试第二种方法，它将与页眉和页脚重叠。

修改：I found this article on medium。这有助于我以某种方式生成页眉和页脚。但是这种技术也破坏了我在报表中的表格。还有缺少页码生成部分吗？

Answer 1

这是我尚未发布的用于生成简历的项目中的一些技巧...

/* Thanks be to: https://stackoverflow.com/questions/19646835/print-repeating-page-headers-in-chrome/25880258#25880258
   And may allow for repeated headers only in print preview
 */
div[class*="resume-section-experience-"] {
  display: table;
  width: 100%
}
div[class*="resume-section-experience-"] > div {
  display: table-cell;
  overflow: hidden;
}

/* Add further section repetition hiding here */
.resume-section-experience-professional ~ .resume-section-experience-professional > div:before {
  content: "";
  display: block;
  margin-bottom: -3em; // inverse of header height
}
.resume-section-experience-volunteer ~ .resume-section-experience-volunteer > div:before {
  content: "";
  display: block;
  margin-bottom: -3em; /* inverse of header height */
}

.resume-headings {
  height: 3em;
}
div[class*="resume-section-experience-"] > div > div {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}


/**
 * Attempt to keep section headings from displaying at the bottom of pages
 * and discourage page brakes within various content blocks.
 */
@media print {
  h2, h3, h4, ul, .professional-experience {
    page-break-after: avoid;
  }

  pre, blockquote, ul, div[class*="-training"], div[class*="-requirements"], div[class*="-experience"], div[class*="-skills"], div[class*="resume-section-experience-"] {
    page-break-inside: avoid;
  }
}

...您将不得不调整目标对象的元素名称/类，也许在段落之间摆弄一些空格，但是上面的代码具有相似的功能。

话虽如此，如果您知道某些时候段落将在页面之间被打断，那么最好缩小该容器的可用高度，以便有固定位置的页眉和页脚空间。 / p>

如果您要编辑您的问题以包括一些标记（并通知我），我将尝试对该答案进行修改，以更好地解决您的特定用例。

关于上述CSS的另一条注释；对于我的用例，我发现在Web视图和打印视图之间格式化时，重复页眉/页脚数据，然后在不在页面顶部/底部时有选择地隐藏它们是很容易的。

@dhiraj ...主要问题是如何生成页码

如果页码是主要问题，那么应该可以利用 ~~display: table，display: table-footer-group和CSS的反诀窍...~~

print.css

/** * print modifications **must** be within a style sheet */ @media print { /* * Note, forced page breaks are only for testing when content is insufficient */ .page_content__print_break { page-break-after: always; break-after: always; } footer.footer_content { visibility: show; opacity: 1; filter: alpha(opacity=100); position: fixed; bottom: 0; } footer.footer_content::after { counter-increment: page_number; content: "Page:" counter(page_number); } }

index.html

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Table based CSS footer example</title> <style media="screen"> footer.footer_content, .page_content__print_break { visibility: hidden; opacity: 0; filter: alpha(opacity=0); } </style> <link rel="stylesheet" href="print.css"> </head> <body> <section class="page_content"> <div class="page_content__row"> <p>This is where page content should be placed</p> <p> Thanks be to: <a href="https://stackoverflow.com/questions/20050939"> Print page numbers on pages when printing html </a> </p> </div>  <div class="page_content__print_break"></div> <div class="page_content__row"> <p> More example content to perhaps force a second page to be printed... </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </section> <footer class="footer_content" role="contentinfo"></footer> </body> </html>

旁注，在回顾了上述与问答相关的内部链接后，我发现CSS可能无法完全支持您在当前问题中使用的@page，以获得更多的幻想需要PagedJS

也许可以查看有关受支持的@page功能的CSS官方文档。

...但是，经过一些测试，似乎浏览器支持在最近几年已经发生了变化。 Firefox和Chrome在打印时似乎都没有做counter的操作，并且page-break-*已更改为break-*，尽管这两个浏览器现在似乎都忽略了该属性：-|

编辑； @contm的评论指出，将样式表与head元素中的样式链接可能会产生不同的结果X-\

事实上，在查看Mozilla's developer documentation on break-after兼容性表后，Internet Exporter支持此功能

如果我找到解决这些问题的任何方法，那么可以肯定的是，再次编辑此答案会再次弹出。

更新；

根据CSS规范。对于@page，它目前是一个WIP（草稿或进行中的工作），因此，到2020年，预计没有任何供应商可以实施。

fixed 的脚注，而不是重复的，仅在所有增量完成后才计算一次；一个示例，该示例将在每个页面上报告 Page: 2 ，因为有两个 page_content__row s ...

print.css

@media print { :root { counter-reset: page_count; } .page_content__row { counter-increment: page_count; } .page_content__print_break { page-break-after: always; break-after: always; } footer.footer_content { visibility: show; opacity: 1; filter: alpha(opacity=100); position: fixed; bottom: 0; } footer.footer_content::after { content: "Page: " counter(page_count); } }

...除了第三方库，我可以想到的用于自定义页脚信息的唯一其他选择是在动态生成内容时计算分页符，然后注入页脚元素在需要的地方。当然，这样做的缺点是客户端字体/缩放设置会弄乱页脚自定义设置，或者必须忽略它，如果您按照这种方法操作，可能会更简单地在服务器端生成PDF文档并提供下载链接。

如何打印HTML页面的页眉和页脚

1 个答案:

`print.css`

`index.html`

`print.css`