У меня есть большая веб-страница, созданная через многие компоненты Vue. Представленная структура HTML несколько похожа на это:
<header></header>
<element1></element1>
<element2></element2>
<element3></element3>
<table></table>
<element4></element4>
<footer></footer>
Я хочу напечатать это красиво на странице А5, имеющий header и footer повторяется на каждой печатной странице. Я пробовал это с помощью двух подходов:
Преобразование HTML-структуры в контейнеры страниц и разделение элементов на основе всего clientHeight. Что-то вроде
<section class="page">
<header></header>
<element1></element1>
<element2></element2>
<element3></element3>
<footer></footer>
</section>
<section class="page">
<header></header>
<table></table>
<element4></element4>
<footer></footer>
</section>
Или, добавив свойства страницы страницы CSS в header и динамически вставляя их в области переполнения контента. Например
<header></header>
<element1></element1>
<element2></element2>
<element3></element3>
<footer></footer>
<header style="page-break-before: always"></header>
<table></table>
<element4></element4>
<footer></footer>
Обход DOM для поиска точки переполнения выглядит так:
var availHeight = 20; // Height of A5 page - tolerance
var body = document.querySelector('body');
var initialWidth = body.style.width;
body.style.width = '14.85cm';
if (body.clientHeight > availHeight) { // if content exceeds page height
var scrollHeight = 0;
for (var i = 0; i < body.children.length; i++) {
var child = body.children[i];
scrollHeight += child.clientHeight;
if (scrollHeight > availHeight) { // if children traversed till now make up to the height of page
if (child.clientHeight < availHeight) {
child.insertAdjacentHTML('beforebegin', '"page break html here..."');
scrollHeight = 0;
}
}
}
}
body.style.width = initialWidth;
Тем не менее, оба подхода дают неточные результаты при печати.
CSS @page не поддерживается Safari, поэтому не может быть полезным.
display: table-header-group и table-footer-group тоже не работают.
Существует ли другое кросс-браузерное решение для получения красиво напечатанных страниц с повторяющимися верхними и нижними колонтитулами, а не отсечения/перекрытия какого-либо контента или если код обхода DOM может быть улучшен, чтобы быть более общим и стабильным? Могут ли быть исправлены или упрощены?
Заранее спасибо. Я не нашел удовлетворительного решения или решения этой проблемы.