javascript - css: numbering printed pages in Chrome - Stack Overflow

admin 管理员组

文章数量: 1086019

The browser that I have to support is Chrome (using electron for my project), so using any other browser is not an option.

I've looked for the solution to this problem for a while, it doesn't seem to have an answer to it. I've tried using this form of approach (copied from CSS page x of y for @media print):

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>

The approach above works on FF but not on Chrome. It seems like thead/tfoot of chrome repeats on every printed page on print preview, but it doesn't results in any counter increment. The same counter value is printed on every printed page.

I also tried approaches that involve @page, but this seems to stop working a couple of years ago.

Example (copied from Browser Support for CSS Page Numbers):

@page {
    counter-increment: page;
    counter-reset: page 1;
    @top-right {
        content: "Page " counter(page) " of " counter(pages);
    }
}

Does anyone know a workaround for this problem? Or Am I dead in the water? Any javasript/nodejs solution is wele.

The browser that I have to support is Chrome (using electron for my project), so using any other browser is not an option.

I've looked for the solution to this problem for a while, it doesn't seem to have an answer to it. I've tried using this form of approach (copied from CSS page x of y for @media print):

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>

The approach above works on FF but not on Chrome. It seems like thead/tfoot of chrome repeats on every printed page on print preview, but it doesn't results in any counter increment. The same counter value is printed on every printed page.

I also tried approaches that involve @page, but this seems to stop working a couple of years ago.

Example (copied from Browser Support for CSS Page Numbers):

@page {
    counter-increment: page;
    counter-reset: page 1;
    @top-right {
        content: "Page " counter(page) " of " counter(pages);
    }
}

Does anyone know a workaround for this problem? Or Am I dead in the water? Any javasript/nodejs solution is wele.

• javascript
• html
• css
• node.js
• google-chrome

Share Improve this question Follow asked Aug 25, 2018 at 16:31 TSPTSP 11111 gold badge22 silver badges88 bronze badges 4

• Have a look here. – Davide Cenedese Commented Aug 25, 2018 at 16:39
• 2 I think I should have mentioned it, that link use methods that involve hard coding page number. The content that I have to print is dynamic, so it's impossible to figure out where to place the page number beforehand. – TSP Commented Aug 25, 2018 at 20:34
• Take a look here: stackoverflow./questions/20050939/… Seems very similar issue. – Mrchief Commented Oct 9, 2018 at 3:02
• I answered here: stackoverflow./questions/20050939/… its working. – Kalyan Halder Commented Sep 23, 2019 at 9:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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 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 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 :

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

本文标签： javascriptcss numbering printed pages in ChromeStack Overflow