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

【问题标题】：Print page numbers on pages when printing html打印html时在页面上打印页码
【发布时间】：2021-05-20 23:58:50
【问题描述】：

我已经阅读了很多关于打印页码的网站，但是当我尝试打印它时，我仍然无法让它显示在我的 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 代码中。
有人可以向我展示一个在包含多个页面的大 html 页面中实现此 @page 规则的示例吗？我只需要html页面的代码和css文件的代码，就可以了。
附言我有最新支持的浏览器版本。

【问题讨论】：

Page numbers with CSS/HTML的可能重复
@James Donnelly 好吧，问题很相似，但我在这里有一个答案，就像我做的那样。
试试这个：How to number print pages?
目前，在这个问题stackoverflow.com/questions/16297619 中手动实现类似 Rul 的东西似乎是唯一可行的方法......

标签： html css printing-web-page

【解决方案1】：

由于带有页码的@page 目前在浏览器中不起作用，我正在寻找替代方案。
我找到了 Oliver Kohll 发布的 answer。
我会在这里重新发布它，以便大家更容易找到它：
对于这个答案，我们不使用@page，这是一个纯 CSS 答案，但可以在 FireFox 20+ 版本中使用。这是link 的一个例子。
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);  
  }

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

【讨论】：

我试过上面的代码。我正在使用 Chrome 54。它只在所有页面中设置 1 个页码（例如，所有页面上的第 1 页）。增量不起作用。我尝试为各种元素（例如 page-break:before、@page 等）设置反增量，但是在所有情况下它只打印 1 个页码（例如所有页面上的第 1 页）。在这里的任何帮助将不胜感激。
当我尝试这个时，我只得到最后一页底部的第 1 页。不能使用 2013 年的 CSS3 标准，真是令人沮丧；天哪。
我怀疑它永远不会真正增加，因为虽然它显示在每一页上，但它仍然是一个相同的元素。
似乎一些主流浏览器开始出现对 CSS Paged Media 的支持。 caniuse.com/#feat=css-paged-media
我将 counter-increment: page 移动到元素的 CSS 选择器，而不是伪元素 :after，并将 content: counter(page) 保留在 :after 选择器中。它适用于 Chrome 71、Safari 12，不确定其他浏览器。

【解决方案2】：

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

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

与 PrinceXML、Antennahouse、WeasyPrince、PDFReactor 等替代品相比，它更加舒适......

而且它是完全免费的！没有定价什么的。它真的救了我的命！

【讨论】：

这太棒了，花了很长时间试图让它工作，这是最轻量级的东西，不知道为什么这不在答案列表中！这些天来，所有其他的东西似乎都被主流浏览器弃用了:(
哦，哇，我刚刚添加了脚本链接 + 示例 css，它已经给了我比我以前尝试过的任何方法更好的结果。绝对值得研究！
唯一的问题是它始终应用您的@media 打印样式 - 即使在打印 css 上下文之外。如果您希望一个视图用于打印，另一个视图用于常规浏览器查看，这可能是不可取的。
@Ganondorfz 也许您可以尝试不包含 pagedjs 以进行常规浏览器查看？
@Ganondorfz 您需要将window.PagedConfig = { auto: false }; 放入脚本标签中。当您想打印时，您需要致电await window.PagedPolyfill.preview(); window.print();。我在这里放了一个演示代码stackoverflow.com/a/70054545/15273968

【解决方案3】：

此 javascript 将在右下角添加带有页码的绝对定位 div，并适用于所有浏览器。

A4 高度 = 297mm = 1123px(96dpi)

<html>
    <head>
        <style type="text/css">
            @page {
              size: A4;
              margin: 0; 
            }

            body {
              margin: 0;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript">
          window.onload = addPageNumbers;

          function addPageNumbers() {
            var totalPages = Math.ceil(document.body.scrollHeight / 1123);  //842px A4 pageheight for 72dpi, 1123px A4 pageheight for 96dpi, 
            for (var i = 1; i <= totalPages; i++) {
              var pageNumberDiv = document.createElement("div");
              var pageNumber = document.createTextNode("Page " + i + " of " + totalPages);
              pageNumberDiv.style.position = "absolute";
              pageNumberDiv.style.top = "calc((" + i + " * (297mm - 0.5px)) - 40px)"; //297mm A4 pageheight; 0,5px unknown needed necessary correction value; additional wanted 40px margin from bottom(own element height included)
              pageNumberDiv.style.height = "16px";
              pageNumberDiv.appendChild(pageNumber);
              document.body.insertBefore(pageNumberDiv, document.getElementById("content"));
              pageNumberDiv.style.left = "calc(100% - (" + pageNumberDiv.offsetWidth + "px + 20px))";
            }
          }
        </script>
        <div id="content">
            Lorem ipsum....
        </div>
    </body>
</html>

【讨论】：

嗨@Ousama你能提供你的模板吗？
打印时删除浏览器添加的默认边距。
我使用了这个解决方案，效果很好。我做的一个小改动是使用window.onbeforeprint 而不是window.onload 来获取打印页码，但不是其他方式。
还记得在打印后通过添加一个功能并使用 window onafterprint 触发进行清理：window.onafterprint = removePageNumbers;
对我来说只有 angular 13 的工作解决方案。到目前为止谢谢！

【解决方案4】：

你可以试试这个，你可以使用content: counter(page);

     @page {
       @bottom-left {
            content: counter(page) "/" counter(pages);
        }
     }

参考：http://www.w3.org/TR/CSS21/generate.html#counters

http://www.princexml.com/doc/9.0/page-numbers/

【讨论】：

主流浏览器不再支持这个:(
@Krish R，看来你可以帮助我。看看这个：stackoverflow.com/questions/43950603/…
刚刚发现，如果样式表是通过 href 链接的，这对我有用，如果我在 html 标头中将这样的代码声明为样式标记，则不会。真的很适合我，希望它可以帮助某人
这适用于我使用 WeasyPrint（PDF 生成工具）。
截至 2019 年，此仍然在 CSS3 中不起作用。 这不是解决方案！

【解决方案5】：

如果您希望在 Chrome/Chromium 下打印时添加页码，一个简单的解决方案是使用 Paged.js。

这个 JS 库获取您的 HTML/CSS 并将其切割成页面，准备作为一本书打印，您将在浏览器中预览。它使 @page 和大多数 CSS3 规范适用于 Chrome。

解决方案 1（简单）如果您可以将视图切割成页面，准备打印

只需将他们的 CDN 添加到您页面的 head 标记中即可：

<link href="path/to/file/interface.css" rel="stylesheet" type="text/css">

然后您可以使用自动计数器page 添加页码。示例：

HTML 放在任何你想显示当前页码的地方：

<div class="page-number"></div>

CSS 让数字出现在 div 中：

.page-number{
  content: counter(page)
}

该库还允许轻松管理页边距、页脚、页眉等。

如果您只想在打印时显示数字（和分页符），则解决方案 2（更复杂）

在这种情况下，您只需要在打印文档时应用 Paged.js CDN。我能想到的一种方法是添加一个触发 Javascript 的print me 按钮：

将 CDN 添加到页面
然后执行 window.print();启动导航器的打印提示

【讨论】：

【解决方案6】：

我不知道是否还有人需要答案，试试这个，它可能对你有用在你的 html 文件中放一个 div 元素你的 html 像这样

<div class="page-number"></div>

像这样做你的CSS

.page-number:before {
content: "Page: " counter(page);}

希望对你有用

【讨论】：

对于最新版本的 chrome，即使在打印屏幕中，页码也始终为 0。

【解决方案7】：

我知道这不是一个编码答案，但它是 OP 想要的，也是我花了半天时间试图实现的 - 从带有页码的网页打印。

打印为不带数字的 pdf
在这里通过 ilovepdf https://www.ilovepdf.com/add_pdf_page_number 运行它，它会添加页码

是的，这是两个步骤而不是一个步骤，但是尽管搜索了几个小时，但我还是找不到任何 CSS 选项。真可惜，所有浏览器都删除了曾经允许它的功能。

【讨论】：

【解决方案8】：

这就是你想要的：

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

【讨论】：

counter(pages) 总是为我返回 0，有什么线索吗？
很遗憾，目前任何主流浏览器似乎都不支持此功能。
帮助我使用WeasyPrint==0.42.2将html表格打印成pdf

【解决方案9】：

   **@page {
            margin-top:21% !important; 
            @top-left{
            content: element(header);

            }

            @bottom-left {
            content: element(footer
 }
 div.header {

            position: running(header);

            }
            div.footer {

            position: running(footer);
            border-bottom: 2px solid black;


            }
           .pagenumber:before {
            content: counter(page);
            }
            .pagecount:before {
            content: counter(pages);
            }      
 <div class="footer" style="font-size:12pt; font-family: Arial; font-family: Arial;">
                <span>Page <span class="pagenumber"/> of <span class="pagecount"/></span>
            </div >**

【讨论】：

从什么时候开始在浏览器中工作？ en.wikipedia.org/wiki/… 根据这张表Margin boxes 根本不支持
嵌入pagedjs之后就可以让它工作了:)