logo标签列表

在打印 HTML 时，在页面上打印页码

htmlcssprinting-web-page
99

我已经阅读了很多关于打印页面页码的网站，但是当我尝试打印我的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文件的代码。
附言：我使用的是浏览器的最新支持版本。

可能是CSS/HTML页面编号的重复问题。 - James Donnelly
@James Donnelly 嗯，这些问题很相似，但我在这里有我的问题的答案，因为我已经解决了它。 - Donvino
试试这个：如何打印页码？ - Leon Freire
目前，手动实现类似于此问题https://dev59.com/1GQo5IYBdhLWcg3wI8ZV中所做的Rul似乎是唯一可行的方法... - phil294
10个回答
81

由于在浏览器中 @page 带页码的功能目前无法使用，我正在寻找替代方案。
我找到了一个由 Oliver Kohll 发布的 答案。
为了这个答案，我们不使用 @page，而是在 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);  
  }

这个技巧对我很有效，希望它也可以帮助您。

77
我尝试了上述代码。我使用的是Chrome 54浏览器。它只设置了一个页面编号，适用于所有页面（例如，在所有页面上都显示为第1页）。该增量不起作用。我尝试在各种元素（例如，page-break:before、@page等）中放置counter-increment，但在所有情况下它只打印一个页面编号（例如，在所有页面上都显示为第1页）。任何帮助将不胜感激。 - Sonal
16
当我尝试这个时，只在最后一页底部得到第一页。真让人沮丧，不能使用2013年的CSS3标准，天啊。 - Furbeenator
13
我怀疑它从未真正增加，因为虽然它在每个页面上都显示，但它仍然是同一个元素。 - Ytrog
2
看起来一些主要的浏览器开始支持CSS分页媒体了。https://caniuse.com/#feat=css-paged-media - Dylan Kinnett
6
我将counter-increment: page从伪元素:after的CSS选择器中移动到元素的CSS选择器中，并将content: counter(page)保留在:after选择器中。在Chrome 71和Safari 12中运行良好，其他浏览器不确定。 - Kansha
显示剩余7条评论
45

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

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

与其他替代方案如PrinceXML、Antennahouse、WeasyPrince、PDFReactor等相比，它更加舒适......

而且它完全免费！没有定价或任何其他费用。它确实拯救了我的生命！

3
这太棒了，我花了很长时间才让它工作，而且这是最轻量级的东西，不知道为什么它没有在答案列表中更靠前！所有其他东西似乎都被主流浏览器弃用了:( - Ed the Coder
2
哇，我刚刚添加了脚本链接和示例CSS，它已经给我比以前尝试过的任何东西都更好的结果。绝对值得一试！ - WtFudgE
1
唯一的问题是它始终应用您的@media打印样式，即使在打印CSS上下文之外也是如此。如果您想为打印和常规浏览器查看设置不同的视图，则可能不希望这样。 - Ganondorfz
@Ganondorfz 也许你可以尝试不在常规浏览器查看中包含pagedjs？ - ˈvɔlə
4
你需要将window.PagedConfig = { auto: false };放在一个脚本标签里。当你想要打印时，你需要调用await window.PagedPolyfill.preview(); window.print();。我已经在这里放了一个演示代码https://dev59.com/dmwMtIcB2Jgan1zn6TpA#70054545。 - the Hutt
24

这段JavaScript代码将在页面右下角添加带有页码的绝对定位的

元素，并且适用于所有浏览器。

A4纸的高度为297毫米= 1123像素（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，你能给我你的模板吗？ - madz
3
我使用了这个解决方案，并且它非常有效。我做的一个小改变是使用 window.onbeforeprint 而不是 window.onload 来获得打印时的页码，但其他情况下不获取。 - boxed
2
还要记得在打印后清理，通过添加一个函数并触发window onafterprint来实现：window.onafterprint = removePageNumbers; - Michael Dimmitt
目前只有在 Angular 13 中工作的解决方案适用于我。感谢迄今为止的帮助！ - Mar Tin
非常感谢您的出色工作。我将尝试修改此函数以适用于表头，因为thead标签将在每个页面上重复出现，而您的函数基于页面大小工作，因此需要额外的工作 :)。 - Mohamed Elkashef
显示剩余4条评论
6
45
主流浏览器已不再支持此功能 :( - philk
@Krish R，看起来你可以帮我。看这个：http://stackoverflow.com/questions/43950603/how-can-i-not-display-page-number-1-in-pdf-hmtl-css - samuel toh
4
刚刚发现，如果样式表是通过 href 连接的话，它可以正常工作，但如果我在 HTML 头部声明一个代码为 style 的标签，它就不能正常工作。这对我来说真的很奇怪，希望这能帮到别人。 - contmp
3
我使用WeasyPrint（PDF生成工具）可以实现这一功能。 - damd
6
截至2019年，在CSS3中仍然无法实现这一点。这不是一个解决方案！ - Andrew Gray
1
我不知道是否还有人需要答案，尝试这个方法，它可能对你有用。在你的HTML文件中加入一个div元素，像这样：

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

"并且像这样编写您的CSS："
.page-number:before {
content: "Page: " counter(page);}

希望它对你有用。
2
对于最新版本的Chrome，即使在打印屏幕中，页面编号始终为“0”。 - Mar Tin
您正在尝试结合使用CSS的两个不同功能来实现OP所要求的内容。不幸的是，正如@Mar Tin指出的那样，要使其工作，还有很多工作要做，具体来说，您必须进行初始化并递增计数器。您只是检索了它，但没有操作它。然后还有一个问题，就是将其定位到您想要的页面位置，这也不是一件微不足道的事情。我将构建一个可行的答案，但感谢您指引我实现它所需的一些工具。 - Ted Cohen
0
如果你想在Chrome/Chromium下打印时添加页面编号，一个简单的解决方案是使用Paged.js。
这个JS库将你的HTML/CSS切成页面，准备好作为一本书打印，你可以在浏览器中预览。它使得@page和大多数CSS3规范在Chrome中工作。
解决方案1（简单）如果你愿意将你的视图切成页面，准备好打印，只需在你的页面的标签中添加他们的CDN即可。
<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执行以下操作：

  1. 将CDN添加到页面
  2. 然后执行window.print();来启动浏览器的打印提示
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-restmod/1.1.11/plugins/paged.js"></script> 因为似乎没有人能够提及该网址。 - toddmo
您应该参考Paged.js网站（请参见上面答案中的超链接），并使用如何入门的文档。那里提到的CDN不是您在此处粘贴的CDN => 请参见https://pagedjs.org/documentation/2-getting-started-with-paged.js/。 - clemoun
1
那个网站的可读性就像泥一样。如果我能弄清楚如何使用pagedjs，我会发布详细的逐步操作说明，包括页码，因为没有人关心过这个问题，期望人们学习相当于一本小书的内容只是为了得到页码是荒谬的。这只是页码而已，天哪。 - toddmo
0

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

是的，这需要两个步骤而不是一个，但尽管搜索了几个小时，我仍然找不到任何CSS选项。非常遗憾，所有浏览器都删除了以前允许的功能。

-1

我使用CSS样式的页码来生成PDF文档，它可以正常工作：

@page {
    size: A4 portrait;
    margin-top: 1.2cm;
    margin-bottom: 1.2cm;
    margin-left: 1.2cm;
    margin-right: 1.2cm;
    background-image: url('../../images/logo_small.png');
    background-repeat: no-repeat;
    background-position: 40px 10px;
    @bottom-center {
        content: counter(page);
    }
}

-2
   **@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 >**
2
它在浏览器中从何时开始工作？根据这个表格，Margin boxes根本不被支持。https://en.wikipedia.org/wiki/Comparison_of_browser_engines_(CSS_support)#Grammar_and_rules - user3568719
你可以在嵌入 pagedjs 后使其工作 :) - ˈvɔlə
-2

这就是你想要的：

@page {
   @bottom-right {
    content: counter(page) " of " counter(pages);
   }
}
9
为什么我的counter(pages)总是返回0？有什么提示吗？ - iamtoc
14
目前来看，很遗憾地，任何主流浏览器似乎都不支持这一功能。 - markcheeky
2
使用 WeasyPrint==0.42.2 将 HTML 表格打印成 PDF 对我很有效。 - chidimo
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接