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

小开

This is what you want:

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

小开

Can you try this, you can use content: counter(page);

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

Ref: http://www.w3.org/TR/CSS21/generate.html#counters

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

小开

最佳答案

As @page with pagenumbers don't work in browsers for now I was looking for alternatives.
I've found an answer posted by Oliver Kohll.
I'll repost it here so everyone could find it more easily:
For this answer we are not using @page, which is a pure CSS answer, but work in FireFox 20+ versions. Here is the link of an example.
The CSS is:

#content {
display: table;
}


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


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

And the HTML code is:

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

This way you can customize your page number by editing parametrs to #pageFooter. My example:

#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);
}

This trick worked for me fine. Hope it will help you.

小开

   **@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 >**

小开

Try to use https://www.pagedjs.org/. It polyfills page counter, header-/footer-functionality for all major browsers.

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

It's so much more comfortable compared to alternatives like PrinceXML, Antennahouse, WeasyPrince, PDFReactor, etc ...

And it is totally free! No pricing or whatever. It really saved my life!

小开

This javascript will add absolute positioned div's with pagenumbers on the right bottom corner and works in all browsers.

A4 height = 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>

小开

I know this is not a coding answer but it is what the OP wanted and what I have spent half the day trying to achieve - print from a web page with page numbers.

Print to pdf without the numbers
Run it through ilovepdf here https://www.ilovepdf.com/add_pdf_page_number which adds the page numbers

Yes, it is two steps instead of one but I haven't been able to find any CSS option despite several hours of searching. Real shame all the browsers removed the functionality that used to allow it.

小开

If you are looking to add page numbers when printing under Chrome/Chromium, one easy solution is to use Paged.js.

This JS library takes your HTML/CSS and cuts it into pages, ready to print as a book, that you will preview in your browser. It makes the @page and most the CSS3 specifications work for Chrome.

Solution 1 (easy) if you are OK with cutting your view into pages, ready to print

Just add their CDN in the head tag of your page :

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

You can then add page numbers by using the automated counter page. Example :

HTML to put anywhere you want to display the current page number:

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

CSS to make the number appear in the div :

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

The library also allows to easily manage page margins, footers, headers, etc.

Solution 2 (trickier) if you want to show numbers (and page breaks) only when printing

In this case, you need to apply the Paged.js CDN only when printing the document. One way I can think of would be to add a print me button that fires Javascript to :

add the CDN to the page
and then execute window.print(); to launch the printing prompt of the navigator

小开

I don't know if someone still out there needs the answer, try this, it might work for you in your html file put a div element your html like this

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

and do your css like this

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

hope it works for you

小开

I use page numbers styled in CSS to generated PDF documents, and it works:

@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);
}
}