Есть ли способ напечатать верхний / нижний колонтитул веб-страницы на каждой странице? - PullRequest
Новая
       46

Есть ли способ напечатать верхний / нижний колонтитул веб-страницы на каждой странице?

38 голосов
/ 12 ноября 2009

Судя по моим исследованиям, кажется, что то, что я хочу сделать, невозможно, но в случае, если что-то изменилось, я хотел проверить, не нашел ли кто-нибудь способ сделать это.

У меня есть веб-приложение, которое генерирует отчеты для печати на основе выбора пользователя в окне браузера. У меня есть собственный верхний и нижний колонтитулы, которые при печати отчета из браузера должны повторяться на каждой распечатанной странице. Мне нужны не заголовки и колонтитулы браузера, а пользовательские, которые я генерирую. Кроме того, я не думаю, что это проблема CSS и типов медиа, но я не эксперт CSS. У меня нет проблем с получением верхнего и нижнего колонтитула для печати один раз, но я не могу заставить их печатать на каждой странице. Я читал, что, возможно, если я заново создаю страницы своего отчета, используя таблицы, а затем использую теги заголовков таблиц и CSS, это может сработать, по крайней мере, для получения заголовка на каждой странице. Я еще не добился успеха с этим, но я попробую еще раз, если это единственный вариант. Коллега предложил мне посчитать строки в моем php и вручную вывести колонтитулы по мере необходимости. Я думаю, что это вариант, но просто кажется, что должен быть способ сделать это, который не настолько "грубая сила"!

Другое предостережение в том, что я должен поддерживать IE 6, поэтому я подозреваю, что некоторые из вещей, которые я пробовал, просто не поддерживаются.

Если кто-нибудь знает, как это сделать, это было бы здорово! Если нет, мне придется переосмыслить свой подход.

Заранее спасибо!

ОБНОВЛЕНИЕ (14 декабря 2011 г.)

Я добился значительного прогресса в этом вопросе, и, используя некоторую информацию из ответов, я подготовил отчеты, которые были полезны, но никогда не были так хороши или профессиональны, как мне хотелось. Нижние колонтитулы, как правило, располагаются недостаточно близко к нижней части страницы, мне пришлось много работать с догадками и «хрупкими» вычислениями о том, каким будет большой текст, чтобы принять решение о вставке разрывов страниц, я мог поддерживать только ограниченную набор форматов страниц и любые изменения в отчетах привели к каскаду изменений кода и еще более хрупким вычислениям. Всегда был сценарий, который нарушал какую-то часть какого-то отчета. Мы пересмотрели требования и теперь создаем отчеты в формате PDF с использованием TCPDF . Документация немного непрозрачна и требует некоторых экспериментов, но результаты намного лучше, и теперь отчеты отображаются так, как должны. Я бы сказал всем, кто пытается создавать HTML-отчеты из браузера, если они не очень просты, избавьте себя от разочарования (как мне говорили другие) и отправляйтесь с PDF-файлами или чем-то подобным.

Ответы [ 4 ]

33 голосов
/ 12 ноября 2009

Это можно сделать с помощью таблиц - и я знаю, что рискну понизить рейтинг, предложив использовать таблицы для разметки, - но мы говорим здесь о IE6, который не известен своей фантастической поддержкой CSS: -)

Если вы установили стиль CSS следующим образом: 

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

Затем, когда вы создаете свой HTML, визуализируйте ваше тело как: 

<body>
<table>
   <thead><tr><td>Your header goes here</td></tr></thead>
   <tfoot><tr><td>Your footer goes here</td></tr></tfoot>
   <tbody>
     <tr><td>
     Page body in here -- as long as it needs to be
     </td></tr>
   </tbody>
</table>
</body>

Да, это не хорошо (таблицы против CSS), это не идеально, но (что важно для вас) работает на IE6. Я не могу комментировать Firefox, так как я не тестировал его там, но он должен делать свою работу. Это также будет обрабатывать страницы разного размера, разного размера шрифта и т. Д., Поэтому оно должно «просто работать».

Если вы хотите, чтобы верхний и нижний колонтитулы отображались только на печатных носителях, используйте параметры @media для правильного выполнения: 

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

Примечание
По состоянию на июль 2015 года это все еще будет работать только в Firefox и IE. Браузеры на основе Webkit (см. Chrome, Safari) имеют давние ошибки в своих трекерах, если кто-то чувствует себя достаточно решительно, чтобы проголосовать за них:

Комментарии ниже этого вопроса говорят мне, что это теперь решено в Chrome. Я не проверил себя: -)

Исходные ошибки в Chrome (для справки):

5 голосов
/ 12 ноября 2009

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

----------
ROW1    HEADER
----------
ROW2   
 Insert dynamic contents here
ROW N-1
----------
ROW N Footer
5 голосов
/ 12 ноября 2009

Это будет работать в некоторых браузерах, но не во всех. Я не думаю, что есть элегантное кросс-браузерное решение

Включите нижний колонтитул печати / заголовок, который вы хотите в divs на странице (в этом примере div id = 'printableFooter')

В файле css на экране поставить: 

#printableFooter {display: none;}

В файле печати css: 

#printableFooter {display: block; position: fixed; bottom: 0;}
3 голосов
/ 12 ноября 2009

попытайтесь сгенерировать (rtf | pdf) документ для печати

...