Nagłówek wydruku na każdej stronie

Question

Wykonałem już tworzenie raportu, a następnym krokiem jest utworzenie nagłówka, który zostanie wydrukowany na każdej stronie. Próbowałem korzystać z rozwiązań oferowanych w How to use HTML to print header and footer on every printed page of a document? - ale nie wydają się działać dobrze w przeglądarkach webkit.

Masz pomysł na wdrożenie tej opcji w moim raporcie?

Answer 1

Sprawdź to: http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

Answer 2

Drukowanie nagłówków i stopek na każdej stronie jest bardzo trudne zadanie, jeśli używać znaczników DIV. W moim projekcie przeszukałem prawie całą sieć i odkryłem, że do drukowania nagłówków i stopek na każdej stronie trzeba użyć tabel i reguł CSS, bez użycia tabeli i css nie można drukować nagłówków na każdej stronie. Ja zapewniając kod robi tak jak poniżej:

<style> 
    @media screen{thead{display:none;}} 
    @media print{thead{display:table-header-group; margin-bottom:2px;}} 
    @page{margin-top:1cm;margin-left:1cm;margin-right:1cm;margin-bottom:1.5cm;}} 
</style> 

pierwsza reguła CSS sprawiają, że thead tabeli nie będą wyświetlane na ekranie dla użytkownika i druga reguła określa, że ​​podczas drukowania THEAD jest wyświetlany jako Tabeli- grupa-nagłówek, ponieważ ta reguła wyświetlałaby nagłówek na każdej stronie, jeśli pominiesz te nagłówki, nie będzie drukować na każdej stronie, a trzecią zasadą będzie utrzymywanie marginesów strony z nakładania się nagłówka lub stopek, a Twój kod HTML będzie taki jak poniżej:

<table> 
    <thead> 
     <tr> 
      <th> <--- Your header text would be placed here ---> </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <--- Your printing text would be place here ---> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Ostatnią rzeczą, próbowałem kodu rzeczy na IE, Safari, Firefox i Chrome i chciałbym powiedzieć, że na Chrome heade r jest drukowane tylko na pierwszej stronie. Wiele razy zgłosiłem błąd, ale Chrome nie robi nic na temat tego problemu.

Answer 3

Możesz używać elementów iframe, ale nie polecam, nikt ich nie używa.

Jeśli tworzymy raporty dynamicznie, najlepiej będzie dodać nagłówek do utworzonej strony podczas tworzenia. Jest to jednak najczęściej stosowana technika.

Inną opcją może być właściwość css content.

div#main:before { 
    content: "<p>I appear before the div tag</p><hr />" 
} 

Uwaga: IE8 obsługuje tylko the content property jeśli !DOCTYPE jest określona.

Answer 4

dzień dzisiejszy bug na webkit.org nadal nie jest rozwiązany: https://bugs.webkit.org/show_bug.cgi?id=17205

Miałem ten sam problem w pracy z silnikiem WebKit, który konwertuje HTML do PDF. Ten pracował dla mnie:

pierwsze uczynić css dostępne dla wszystkich typów mediów

<style type="text/css" media="all"> 

Upewnij się, że nieruchomość wyświetlacz thead jest ustawiona:

thead { display: table-header-group;} 

ostatni, aby rozwiązać problemy, gdzie rzędy tabeli nakładają się na siebie nagłówki lub wiersze przecięte na pół na łamanie strony

table { page-break-inside:auto } 
tr { page-break-inside:avoid; page-break-after:auto } 
thead tr th{ height: 50px;}