Создание PDF-файла с верхним, нижним колонтитулом и содержимым таблицы в отдельных разделах с помощью PDFKit ⇐ CSS

[Гость]

В настоящее время я использую PDFKit для создания PDF-документа, содержащего три отдельных раздела: заголовок, таблицу в центре и нижний колонтитул. Заголовок содержит заголовок, а нижний колонтитул представляет собой таблицу с минимальным количеством данных. Моя проблема возникает, когда таблица в центре превышает 10 строк; Я стремлюсь начать новую страницу, сохранив компоненты верхнего и нижнего колонтитула. Несмотря на попытки использовать различные методы, в том числе подход, описанный в этом ресурсе, я столкнулся с проблемами. В частности, реализация нижнего колонтитула, как описано в ресурсе, приводит к тому, что он становится частью контента и нарушает макет, особенно при настройке высоты нижнего колонтитула до 500 пикселей. Кроме того, мне нужен совет, как обеспечить привязку нижнего колонтитула к последней странице контента. Будем очень признательны за любые идеи или альтернативные подходы.
И я подумал, что если я смогу это сделать в формате html во время печати, то, возможно, я смогу это сделать и в pdfkit.
Что я пробовал в своем html .

Код: Выделить всё

I'm The Header


PRINT ME!


I'm The Footer
















PAGE 1
PAGE 2

In my CSS:

Код: Выделить всё

/* Styles go here */

.page-header, .page-header-space {
height: 100px;
}

.page-footer, .page-footer-space {
height: 50px;

}

.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black; /* for demo */
background: yellow; /* for demo */
}

.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black; /* for demo */
background: yellow; /* for demo */
}

.page {
page-break-after: always;
}

@page {
margin: 20mm
}

@media print {
thead {display: table-header-group;}
tfoot {display: table-footer-group;}

button {display: none;}

body {margin: 0;}
}

Источник: https://stackoverflow.com/questions/781 ... ions-using