Как правильно изменять страницу перед печатью в Chrome?

Question

[pqgg7nwkd4]

Добрый день.

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

Для этого написал скрипт на основе
window.matchMedia('print').addListener(...).

Изолированный пример тут https://advanty.ru/print/index.html . В примере, при изменении носителя, вся страница разбивается на части (<div class="page"></div>). Каждая часть - это одна страница.

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

В FireFox - все отлично отрабатывает и показывается.

Вопрос: как сделать так, чтобы хром добавлял необходимые страницы при печати?

Comments

[Данил]

Насколько я вижу, вы отслеживаете событие печати и уже потом вносите изменения. Это так?

[pqgg7nwkd4]

Данил: Да, так точно. Это нужно для того, чтобы узнать размеры носителя (бумаги) и определить место, куда вставить дополнительные заголовки таблиц.

Answer 1

[Данил]

Как бы там не было я решал такую задачу так:
1. Создавал кнопку "Печать"
2. При нажатии прятал все на экране кроме блока с печатью
3. Формировал печатный блок
4. Вызывал window.print()
5. Возобновлял исходный вид страницы (например window.location.reload())

Comments

[pqgg7nwkd4]

Спасибо за ответ. Классическое решение. Проблема в том, что на этапе "3. Формировал печатный блок" невозможно узнать размеры печатной области. Вследствие чего невозможно определить место в таблице, где ее необходимо разорвать и вставить заголовок.