CSS header - body - footer печатать на отдельных страницах - PullRequest
Новая
       21

CSS header - body - footer печатать на отдельных страницах

0 голосов
/ 18 октября 2018

Я пытаюсь создать HTML-отчет, который после печати будет иметь собственный заголовок на каждой странице с содержимым тела в форме таблицы.Нижний колонтитул не является обязательным.

После осмотра я получил верхний и нижний колонтитул, отлично работающие с помощью 

@media print{
    div.divFooter {
        position: fixed;
        bottom: 0;
    }
    div.divHeader {
        position: fixed;
        top: 0;
    }
    /* Fix overflow of headers and content */
    body {
        margin-top: 185px;
    }   
}

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

Я пробовал использовать поля @page, но они влияют на верхний и нижний колонтитулы, поэтому в итоге возникает одна и та же проблема.

Содержимое всегдаверхний колонтитул, таблица и нижний колонтитул.Есть ли надежный способ напечатать это так, как я описал?

1 Ответ

0 голосов
/ 22 октября 2018

Для тех, кто ищет ответ на этот вопрос, я в итоге вручную генерировал разрывы страниц в строке html на стороне сервера каждые x строк.

В двух словах: 

// this string inserts a page break in html
private const string PAGE_BREAK = "<p style=\"page-break-after: always;\">&nbsp;</p><p style=\"page-break-before: always;\">&nbsp;</p>";

if (lineCount % x == 0){
   htmlString.insert("</table>"); // close the table, otherwise the page break does nothing
   htmlString.insert(PAGE_BREAK);
   htmlString.insert("<table class='whatever-you-want-'>");
}

Не точно, но в этом суть.

Просматривая многочисленные статьи, сообщения в блогах и вопросы переполнения стека, похоже, что то, что я пытался достичь, в настоящее время невозможно с помощью только HTMLи CSS.Если кто-то знает иначе, я был бы рад услышать это.

...