Печать номеров страниц на страницах при печати HTML

Я читал много веб-сайтов о печати номеров страниц, но все же не смог отобразить их для моей 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 У меня есть последние поддерживаемые версии браузеров.

Источник

10 ответов

Решение

Поскольку @page с номерами страниц не работают в браузерах, я искал альтернативы.
Я нашел ответ, опубликованный Оливером Коллом.
Я опубликую это здесь, чтобы каждый мог найти это легче:
Для этого ответа мы не используем @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: 20px;
    -moz-border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222;  
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  }

Этот трюк работал для меня нормально. Надеюсь, это поможет вам.

Источник

Попробуйте использовать https://www.pagedjs.org/. Он заполняет счетчик страниц, функциональность верхнего / нижнего колонтитула для всех основных браузеров.

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

Это намного удобнее по сравнению с такими альтернативами, как PrinceXML, Antennahouse, WeasyPrince, PDFReactor и т. Д.

Источник

Этот javascript добавит блоки div с абсолютным позиционированием и номерами страниц в правом нижнем углу и работает во всех браузерах.

Высота A4 = 297 мм = 1123 пикселей (96 точек на дюйм)

<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.marginTop = "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>
Источник

Можете ли вы попробовать это, вы можете использовать content: counter(page);

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

Ссылка: http://www.w3.org/TR/CSS21/generate.html

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

Источник

Это то, что вы хотите:

@page {
   @bottom-right {
    content: counter(page) " of " counter(pages);
   }
}
Источник

Если вы хотите добавить номера страниц при печати в 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 (сложнее), если вы хотите отображать числа (и разрывы страниц) только при печати

В этом случае вам нужно применять CDN Paged.js только при печати документа. Один из способов, который я могу придумать, - это добавить print me кнопка, запускающая Javascript для:

  1. добавить CDN на страницу
  2. а затем выполнить window.print(); для запуска подсказки печати навигатора
Источник

Я не знаю, нужен ли кому-то еще ответ, попробуйте это, это может сработать для вас в вашем html файле, поместите элемент div в свой html следующим образом

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

и сделай свой css вот так

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

надеюсь, это сработает для вас

Источник

Я использую номера страниц, стилизованные в CSS, для создания PDF-документов, и это работает:

Источник

Я знаю, что это не ответ на кодирование, но это то, чего хотел OP и чего я потратил полдня, пытаясь достичь - распечатать с веб-страницы с номерами страниц.

Да, это два шага вместо одного, но я не смог найти ни одной опции CSS, несмотря на несколько часов поиска. Настоящий позор: все браузеры удалили функции, которые позволяли это делать.

Источник 
   **@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 >**
Источник
Другие вопросы по тегам