верхний и нижний колонтитулы на каждой странице в режиме печати с помощью css

У меня есть веб-приложение, и в нем есть отчет, который может превышать одну страницу, и я хотел бы печатать верхний и нижний колонтитулы на каждой странице. я нашел и попробовал это: Повторение заголовка отчета на каждой странице но у меня это не сработало. Я пробовал Opera, IE9, Firefox, Google Chrome, но... ничего. Page-margin работает нормально, но контент - это то, что я хочу, и он не работает.


css-paged-media
person Masoumeh Karvar    schedule 30.12.2012    source источник
comment
Возможный дубликат Как использовать HTML для печати верхнего и нижнего колонтитула на каждой печатной странице документа?   -  person Quentin    schedule 11.11.2016

Ответы (4)


arrow_upward
21
arrow_downward

Вы можете установить position: fixed; верхний и нижний колонтитулы, чтобы они повторялись на каждой странице.

Например

<header class="onlyprint"><!--Content Goes Here--></header>
<footer class="onlyprint"><!--Content Goes Here--></footer>

@media screen {
    header.onlyprint, footer.onlyprint{
        display: none; /* Hide from screen */
    }
}

@media print {
    header.onlyprint {
        position: fixed; /* Display only on print page (each) */
        top: 0; /* Because it's header */
    }
    footer.onlyprint {
        position: fixed;
        bottom: 0; /* Because it's footer */
    }
}
person Mr. Alien    schedule 30.12.2012
comment
@PauFracés Раньше он не поддерживался, не уверен в текущем статусе, я использовал его для Firefox еще раньше, поэтому подумал, что это может ему помочь. - person Mr. Alien; 30.12.2012
comment
Я имею дело с той же темой, но мне нужно, чтобы она работала на webkit. Я не смог сделать это с помощью html + css, поэтому сейчас я работаю в библиотеке javascirpt, чтобы выполнить свою работу. Отсюда мой интерес - person Pau Fracés; 30.12.2012
comment
Это работает очень хорошо. Но есть ли способ сказать, что мне не нужен заголовок на определенной странице. Например, последняя страница или страница посередине? - person Piotr Kula; 16.09.2016
comment
Есть ли какое-то решение для печати логотипа заголовка только на первой странице, а не на каждой странице? - person Mile Mijatović; 25.04.2017

arrow_upward
6
arrow_downward

Я очень ценю ваш ответ, но я использовал это решение (положение: исправлено) раньше, и содержимое страницы было бы замаскировано заголовком. поэтому я должен использовать «@page», который работает только со свойством «Margin», а «Content» не работает, или, другими словами, я не могу достичь желаемого результата.

person Masoumeh Karvar    schedule 30.12.2012
comment
Он будет работать с position:fixed. Например, если вы установите поле @page:margin-top:2mm, замените html-страницу на html:margin-top:20mm, а фиксированный заголовок на < i>заголовок:поле:0. Это поместит ваш фиксированный заголовок на поле страницы 2 мм, а содержимое страницы будет придерживаться поля html 20 мм. Никаких перекрытий, даже при распечатке. - person frequent; 17.02.2016
comment
поле html — хитрый трюк. Работает шустро. Вы не знаете, могу ли я изменить это для каждой печатной страницы? - person Piotr Kula; 16.09.2016
comment
Я не могу найти комбинацию параметров @page margin и html margin, которые работают для нескольких страниц для Chrome на момент написания. - person Mark; 14.05.2019

arrow_upward
5
arrow_downward

В настоящее время в движке webkit есть ошибка (https://bugs.webkit.org/show_bug.cgi?id=100075), что приводит к совершенно неуместным нижним колонтитулам.

person Markus    schedule 19.02.2013
comment
Эта ошибка была исправлена ​​в 2013 году, и похоже, что она была выпущена примерно в 2014 году (около версии 36). - person Charles L.; 15.02.2019

arrow_upward
2
arrow_downward

Я нашел решение, которое сработало для меня, и только одно, которое работает без проблем.

В html

<table>
        <thead><tr><td>
            <div class="header-space">&nbsp;</div>
        </td></tr></thead>
        <tbody><tr><td>
            <div id="pageHost" class="content"></div>
        </td></tr></tbody>
        <tfoot><tr><td>
            <div class="footer-space">&nbsp;</div>
        </td></tr></tfoot>
    </table>
    <header id="pageHeader">
    </header>
    <footer id="pageFooter">
        Custom Footer
        <div class="numberOfPages">

        </div>
    </footer>

в css

            header, .header-space,
            footer, .footer-space {
                height: 100px;
                font-weight: bold;
                width: 100%;
                padding: 10pt;
                margin: 10pt 0;
            }

            header {
                position: fixed;
                top: 0;
                border-bottom: 1px solid black;
            }

            footer {
                position: fixed;
                bottom: 0;
                border-top: 1px solid black;
            }
person user10810851    schedule 19.12.2018
comment
Да, это работает! :) - person Deepthi; 20.01.2021