Можно ли при печати печатать номера страниц с помощью CSS3 / 2 в Chrome? - PullRequest
Новая
       2

Можно ли при печати печатать номера страниц с помощью CSS3 / 2 в Chrome?

0 голосов
/ 19 февраля 2019

Я считаю, что я тестировал все решения, доступные в StackOverflow, но ни одно из них не работает в Chrome (72).Я следовал спецификации на W3C, но, похоже, все работает только в FireFox.

Я просто хочу простую вещь - добавить номер страницы, используя счетчик приращений, в напечатанный документ.Я пробовал HTML4 и HTML5 без каких-либо результатов.

Есть ли какое-либо решение?

Версия Chrome: 72.0.3626.81 (Официальная сборка) (64-разрядная версия)

Решение отлично работает в FireFox: 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">

#content {
    display: table;
}

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

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

</style>
<body>


<div id="content">
<div id="pageFooter">Page </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing..A LOT MORE STUFF TO FILL THE PAGES </p>
</div>

</body>
</html>

Другое решение (@page не поддерживается в HTML5): 

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

По состоянию на 03.12.2015,поля для полей, такие как @ bottom-center, не поддерживаются основными браузерами, как показано здесь.Если вы ищете «@ bottom-center», вы увидите много красных «не поддерживаемых» полей.При поиске в Интернете кажется, что они должны работать, но на самом деле они еще не поддерживаются.Некоторые элементы выгружаемого мультимедиа отлично работают, например, разрыв страницы, но не поля для полей.- Джеймс Туми 3 декабря 15 в 20: 40

Похожие темы (старые, без разрешения для Chrome):

  1. Поддержка браузером номеров страниц CSS
  2. Номера страниц с CSS / HTML
  3. Печать номеров страниц на страницах при печати html

проблема с Chromium (счетчик не увеличивается на каждой странице): https://bugs.chromium.org/p/chromium/issues/detail?id=774830

Некоторые браузеры ведут себя одинаково:

Chrome, Edge: Страница: 1 страница: 1

Firefox: Страница: 1 Страница: 2

Safari: Страница: 1 (один раз, в верхней части второй страницы)

1 Ответ

0 голосов
/ 02 апреля 2019

Я много дней искал во всем Интернете решение, но не смог найти.Однажды одна мысль пришла мне в голову, и вот результат (уродливый, хакерский, еще намного лучше, но очень легкий и работающий):: -) 

<html>

<head>
    <style>
        @page {margin: 0; size: A4}

        footer {
            position: absolute; 
            margin-left: 190mm; 
        }
    </style>
</head>

<body>

    <script>
        for (var i = 1; i <= 3; ++i) { 
          document.body.innerHTML+= '<footer style="margin-top: ' + (297*i -10) + 'mm">' + i + '</footer>';
        }
    </script>

    Content

</body>
</html>

Следующая работаХорошее решение:

  • На данный момент вы должны знать, сколько страниц доступно.(макс. страниц = диапазон цикла, мой пример всего 3 страницы)

Мои идеи (но у меня это не получается):

1) Получить вычисленную высоту всех страниц> изменить цикл for на цикл while>, в то время как фактический край нижнего колонтитула <= вычисленная высота </p>

, но я не могу получить реальную высоту, вот мои примеры: 

<script>
alert(window.getComputedStyle(document.body, null).getPropertyValue("height"));
</script>

source Chrome getComputedStyle без решения

2) Создать 999 номеров страниц и убить переполнение после конца тела.Но я не нашел решения убить абсолютные элементы после относительных элементов.

Итак, давайте вместе решим эту задачу, и у нас будет окончательное решение.

PS: На данный момент я неУ меня достаточно точек, чтобы комментировать.Поэтому я не могу обсуждать, но я обновлю свой ответ, если появятся новые решения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...