Как разместить пустое пространство поверх каждой страницы печатаемого HTML
Я разработал отчет HTML с несколькими div и таблицами . Теперь мой клиент просит меня помещать повторяющийся заголовок вверху каждой печатной страницы. Насколько мне известно, это невозможно с использованием простого CSS и HTML. Просто в качестве попытки я поместил элемент div заголовка в thead, к которому применил display: table-header-group , чтобы он отображался, и поместил все остальные элементы отчета в виде строк основной таблицы. но безуспешно.
Временное решение - использовать
@print {.header {position: fixed; top: 10px}}по порядку повторять элемент .header вверху каждой страницы. Но для этой работы мы должны помещать пустое место вверху каждой новой страницы; в противном случае фиксированный элемент заголовка смешивается с другими элементами в верхней части таблицы.В качестве другого обходного пути я могу вычислить высоту элементов во время рендеринга и поместить ручные разрывы страниц там, где это необходимо. Поэтому я хочу знать, есть ли какая-либо библиотека Javascript, доступная для выполнения при загрузке страницы, и вычисляет все высоты отрисовки элементов div страницы и помещает элемент div нулевой высоты с помощью
page-break-before: always;перед каждым div, превышающим высоту листа A4. Например, предположим, что следующие div приводят к высоте 14, 10, 8, 9, 6, 13 и 6 сантиметров во время рендеринга. Я хочу, чтобы библиотека помещала фиктивный элемент погружения разрыва страницы в указанные места: