Как подсчитать разрывы страниц CSS для печатного HTML?

Question

Я создаю отчеты, используя HTML, и я использую CSS для управления разрывами страниц, используя разрыва страниц и т. Д. Я дал пользователю возможность печатать несколько отчетов одновременно, которые я создаю как разделы одногодинамически генерируемый документ HTML.Создание единого документа позволяет сделать это одним заданием на печать, чтобы избежать проблем с печатью.

Моя проблема заключается в следующем: я хотел бы пронумеровать страницы раздела большего динамического HTML в формате «страница x из n».Однако, если я позволю принтеру сделать это, он увидит документ (справедливо) как один документ и пронумерует весь документ.

Можно ли как-то определить, когда произойдут разрывы страниц CSS, чтобы я мог посчитать их для раздела перед печатью и указать собственную нумерацию (например, HTML-элемент) для разделов вдлинный единственный документ?

Кажется, у меня должен быть способ сделать это, но за последние несколько дней решение ускользнуло от меня, поэтому я подумал, что пингую Stackoverflow.

ОБНОВЛЕНИЕ: То, что я закончил делать:

Я принял ответ Кристофера, потому что, хотя я не использовал его точно, он указал мне правильное направление.

В итоге я выполнил вычисления для содержимого с помощью jQuery, основываясь на размере печатаемой бумаги, полях, размере шрифта и т. Д., А затем добавил элементы для разрывов страниц, которые имеют CSS для разрыва страниц.Я отслеживаю, сколько добавленных разделителей страниц добавляется, и затем обновляю html-информацию "page x of n" в каждом элементе разбиения страниц после обработки всего содержимого.Это позволило мне избежать необходимости знать, сколько страниц будет в начале (спасибо jQuery .each).

Очевидно, есть некоторые проблемы с этим решением:

1. Элементы "страница x из n" отображаются не как настоящие нижние колонтитулы, а в нижней части содержимого на каждой странице.В моей ситуации это приемлемый компромисс.

2. Разделение элементов содержимого, которые сами по себе были больше страницы, особенно учитывая, что большая часть содержимого генерируется php, стало немного сложным.Я заставил его работать, но опять же, он требует допущений, которые могут нарушать варианты печати. ​​

3. Расчеты зависят от предположений о размере отпечатанной бумаги, полях, размере шрифта и т. Д. В моемСитуация в интрасети - это снова приемлемый компромисс, потому что я могу контролировать эти параметры.Можно добавить дополнительный код для обработки некоторого количества изменений в будущем (например, размер бумаги).

Это решение, хотя и не идеальное и немного «хрупкое», решает мою проблему, позволяетпечатать несколько отчетов одновременно, избегая таймаутов спулинга принтера, отслеживая и перезапуская нумерацию страниц и избегая генерации PDF-файлов в качестве промежуточного шага для печати. ​​

Мне показалось, что это странно крепкий орешек, поэтомупо-прежнему ценю мнения и отзывы о решении.

Спасибо!

ОБНОВЛЕНИЕ 2: Окончательное решение ... Избегайте головных болей самостоятельно:

Хотя япошли, возможно, дальше, чем я должен был с этим подходом, с некоторыми небольшими успехами, в конце концов, решение действительно не было таким, потому что оно просто оказалось слишком «хрупким» для изменений.Любые изменения в формате отчета, добавление нового контента к существующим отчетам, размер бумаги и т. Д. Нарушали расчеты и заканчивались смехотворной дополнительной работой!

Итак, конечное решение? "Сопротивление бесполезно!"Просто делайте отчеты в формате PDF .Вы можете начать припев «мы вам так сказали», если хотите, я могу его взять ;-)

Я пошел с библиотекой TCPDF , которая была превосходной, хотя и немного трудной для начала. Примеры очень полезны. Теперь у меня есть полная настройка отчета, и все генерируется так, как должно. Множественные отчеты легко создаются в виде одного PDF-файла (исключая проблему спулинга печати) с группами страниц, что позволяет нумерации работать именно так, как мне нужно.

Итак, если вы пытаетесь сделать что-то подобное, я бы порекомендовал вам перейти к поиску, пропустить разочарование отчетами типа HTML / CSS и создавать PDF-файлы.

Answer 1

Это будет отображать номера страниц, но не общее количество страниц:

footer {
    position:fixed;
    bottom:0;
    left:0;
}

body {
    counter-reset: page_number;
}

#page-number:after {
    counter-increment: page_number;
    content: "Page " counter(page_number);
}

Имея что-то вроде

<p id='page-number'></p>

в нижнем колонтитуле.

Браузер: Firefox 19.0.2

Answer 2

Я смог реализовать разрывы страниц при создании PDF-файлов для печати с помощью wkhtmltopdf.хотя я не уверен, что мое решение совместимо с браузерами, не относящимися к webkit, но я уверен, что при необходимости вы можете получить префикс поставщика для всех браузеров.

Вот что я сделал, используя page-break-inside: avoid; & page-break-after: always;

Затем с помощью jquery я вычислил высоту своих разделов и рассчитал (если размер страницы будет a4), сколько раз произошел перерыв, и динамически пронумеровал страницы, используя нижние колонтитулы jquery и pdf (перед созданиемpdf) поэтому, когда пользователь загрузил pdf, он был нумерован правильно.

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

но я не думаю, что это безопасно.

Дайте им PDF для печати, тогда у вас будет больше контроля и вам не придется беспокоиться о таблице стилей для веб-печати, при условии, что ссылка для скачивания PDFзаметно осуждается.

Answer 3

Я предполагаю, что вы ставите разрыв страницы CSS в конце каждого отчета, а не вручную в конце каждой страницы.Таким образом, ваша проблема состоит в том, чтобы знать, когда разрыв страницы произойдет естественным образом в длинном HTML-документе.Ответ - ты не можешь.Даже если вы знаете, сколько строк таблицы умещается на странице (например), вы будете знать это только для данного размера страницы и настроек печати.Если кто-то решит напечатать ваш отчет на юридической бумаге в масштабе 200%, то ваш документ никогда этого не узнает.На мой взгляд, вы можете выбрать 1) угадайте или 2) не беспокойтесь об этом.

Answer 4

Вы не можете сосчитать разрывы страниц, но вы можете подсчитать разрывы столбцов, которые ведут себя очень схожим образом.

Везде, где у вас есть стили разрыва страниц, соедините их с подходящим разрывом столбца:

-webkit-column-break-inside: avoid;
-webkit-break-inside: avoid;

Затем настройте в отчете использование столбцов, которые соответствуют размеру напечатанной страницы:

.page.precalc {
    width: 16800mm;
    height: 257mm;
    -webkit-column-width: 168mm;
    .content {
        width: 168mm;
    }
}

Разрывы столбцов работают очень похоже на разрывы страниц, поэтому вы можете определить номер страницы элемента, просто измеряягоризонтальное положение.

var left = el.getBoundingClientRect().left;
pageNumber = Math.round(left/635) + 1

CSS-столбцы все еще имеют некоторую пятнистую поддержку, поэтому могут печататься неправильно.Однако вы можете удалить стиль .precalc, как только закончите с вычислениями макета, чтобы представление вернулось к исходному вертикальному макету.В зависимости от варианта использования может также работать запрос экрана / печатного носителя.

Вышеприведенное работает для меня, чтобы с помощью phantomjs создать оглавление.Заставить его работать в произвольном браузере, управляемом пользователем, несколько сложнее.

Answer 5

Следующий фрагмент будет производить;разрыв страницы печати перед каждым h2 на странице.

извлекается из здесь

<style type="text/css">
  h2 {
    page-break-before: always;
  }
</style>