Страница css pdf - заголовок перекрывается содержимым

введите здесь описание изображения

Как видно из изображения, мой контент перекрывается с изображением заголовка, и это код, который у меня есть:

    <style type="text/css" media="print">
        @page {
            /*size:landscape;*/

            @top-center {
                content: element(header);
            }
            @bottom-left {
                content: element(footer);
            }
        }
        div.header {
            padding: 10px;
            position: running(header);
        }
        div.footer {
            display: block;
            padding: 5px;
            position: running(footer);
        }
        .pagenumber:before {
            content: counter(page);
        }
        .pagecount:before {
            content: counter(pages);
        }
    </style>
</head>
<div class="header">
    <img src="logo.png" title="logo" width="200px"/>
</div>
<div class="content">

</div>

P.S.: Пожалуйста, не закрывайте этот вопрос как дубликат, так как я уже просмотрел все вопросы, связанные с одним и тем же, но мой выглядит иначе, поскольку задействован PDF.


pdf html css flying-saucer
person javanoob    schedule 16.07.2015    source источник

Ответы (2)


arrow_upward
10
arrow_downward

Верхние и нижние колонтитулы устанавливаются в пределах полей страницы.

Таким образом, решение состоит в том, чтобы увеличить верхнее поле страницы, например:

@page {
        margin-top: 50mm; 
}
person obourgain    schedule 17.07.2015

arrow_upward
0
arrow_downward

Метод правильной реализации нижнего колонтитула в PDF

Найдя в Интернете много разных решений и обходных путей, я наконец делюсь способом, который работает для меня.

Пожалуйста, добавьте эти стили в контейнер отчета (div, в котором отображается отчет).

<div #scrollingContainer class="col-xxs-9 content-container" style="overflow-x: hidden;width:100%;">
</div>

// Свойства Div могут отличаться

Оберните компонент Doc в структуру таблицы с помощью thead и tfoot в соответствии с размером вашего верхнего и нижнего колонтитула (таблица заключена в div).

<div style="width: 100%;">
    <table style="table-layout: fixed; width: 100%;"> // Add this css to make main table fixed, child tables will still scroll
        <thead class="page-break-before">
            <tr>
                <td>
                    <div style="height: 80px;"></div> // space for the respective header
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div> Your Data Goes Here........</div>
                </td>
            </tr>
        </tbody>
        <tfoot class="show-in-print page-break-after">
            <tr>
                <td>
                    <div style="height: 130px;"></div> // space for the respective footer
                </td>
            </tr>
        </tfoot>
    </table>
</div>

Образец верхнего и нижнего колонтитула

<div class="page-break-before">
    <div>A long header content...</div>
</div>

<div class=" page-break-after">
    <p> A long footer content...</p>
</div>
person Abhishek Saxena    schedule 24.06.2020