打印html时在页面上打印页码

Question

我已经阅读了很多关于打印页码的网站，但是当我尝试打印它时仍然无法在我的 html 页面上显示它。

所以接下来是 CSS 代码：

 @page {
  margin: 10%;

  @top-center {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2em;
    content: counter(page);
  }
}

我试着把这个页面规则放在里面

@media all {
    *CSS code*
}

在它之外，试图把它放在 @media print ，但没有任何帮助我在我的页面上显示页码。我尝试过使用 FireFox 和 Chrome（如您所知，基于 WebKit）。我认为问题出在我的 html 或 css 代码中。

有人可以给我一个例子来实现这个 @page 包含多个页面的大 html 页面中的规则吗？我只需要 html 页面的代码和 css 文件的代码，就可以了。

PS 我有最新支持的浏览器版本。

原文由 Donvino 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于带有页码的@page 目前在浏览器中不起作用，所以我正在寻找替代方案。

我找到了 Oliver Kohll 发布的 答案。

我会在这里重新发布它，以便每个人都可以更容易地找到它：

对于这个答案，我们 没有使用 @page ，这是一个纯 CSS 答案，但可以在 FireFox 20+ 版本中使用。这是一个例子的 链接。

CSS 是：

 #content {
    display: table;
}

#pageFooter {
    display: table-footer-group;
}

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}

HTML代码是：

 <div id="content">
  <div id="pageFooter">Page </div>
  multi-page content here...
</div>

这样您就可以通过将参数编辑为 #pageFooter 来自定义您的页码。我的例子：

 #pageFooter:after {
    counter-increment: page;
    content:"Page " counter(page);
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 20;
    -moz-border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  }

这个技巧对我很有效。希望它能帮助你。

原文由 Donvino 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

尝试使用 https://www.pagedjs.org/ 。它 为所有主要浏览器 填充页面计数器、页眉/页脚功能。

 @page {
  @bottom-left {
    content: counter(page) ' of ' counter(pages);
  }
}

与 PrinceXML、Antennahouse、WeasyPrince、PDFReactor 等替代品相比，它要舒服得多……

而且它是完全免费的！没有定价或其他任何东西。它真的救了我的命！

原文由 ˈvɔlə 发布，翻译遵循 CC BY-SA 4.0 许可协议