Я предполагаю, что у вас есть контроль над сгенерированным html и вы можете внести в него некоторые изменения. Вам нужно будет эмпирически определить точную высоту и ширину PDF. Вам также необходимо определить максимальное количество страниц PDF, которые будет заполнять HTML-страница.
Основной план состоит в том, чтобы поместить html-контент в свой собственный div и повторять этот div для любого количества страниц, которое вы, возможно, заполните. После этого каждый div будет стилизован и настроен на одну страницу, а переполнение будет скрыто (мы можем рассматривать каждый div как «окно»). У повторяющихся элементов div будет смещение их содержимого, так что другая часть содержимого будет находиться в окне. В следующем примере я предполагаю, что размеры страницы в формате pdf составляют 500 на 500 пикселей (я знаю, что это нереально), максимальное количество страниц, занимаемых содержимым, равно 3, и что ваш html-файл отображается pdf преобразователь в соответствии со стандартами.
<!DOCTYPE html>
<html>
<head>
<title>PDF Pagination Example</title>
<style>
.header {background:blue; height:25px}
.footer {background:green; height:25px}
.window {height:500px; width:500px}
#window1, #window2, #window3 {height:450px; overflow:hidden}
#spacer2 {height:0; margin-top:-450px}
#spacer3 {height:0; margin-top:-900px}
li {font-size:30px; padding:10px}
</style>
</head>
<body>
<div class='window'>
<div class='header'>A header</div>
<div id='window1'>
<ol>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
</ol>
</div>
<div class='footer'>A footer</div>
</div>
<div class='window'>
<div class='header'>A header</div>
<div id='window2'>
<div id='spacer2'></div>
<ol>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
</ol>
</div>
<div class='footer'>A footer</div>
</div>
<div class='window'>
<div class='header'>A header</div>
<div id='window3'>
<div id='spacer3'></div>
<ol>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
<li>Content of variable height that may or may not overflow.</li>
</ol>
</div>
<div class='footer'>A footer</div>
</div>
</body>
</html>
При размере шрифта 30 пикселей контент распределяется между двумя страницами. Если вы увеличите размер шрифта до 50 пикселей, содержимое будет распространяться на все три.
Последний кусочек головоломки - это немного JavaScript. Вам нужно будет написать фрагмент, который вычисляет высоту содержимого и добавляет заполнение к нижней части каждого окна, чтобы вы не получили обрезку, как в примере. Javascript должен также установить окна без содержимого для отображения: нет. Я не уверен, что это даже тот CSS, который вы ищете, поэтому я не буду работать с javascript, но я также уверен, что если вам понадобится помощь, вы можете найти ее здесь на SO:).