2011-02-03 4 views
12

Staram się nadać pełne możliwości drukowania nagłówków/stopek HTML w naszym projekcie Mediboard.Możliwości drukowania nagłówka/stopki HTML

Długookresowo, wiem, że moduł CSS3 Page Media spełni moje potrzeby, ale to przynajmniej dwa lub trzy lata.

Starałem się więc, aby działało z funkcjami CSS2, i prawie działa tak, jak widać na tym printable document. Jednak nadal mam ograniczenie dotyczące stopki, w której zawartość drukuje w stopce (patrz strony 3-4 z podglądem wydruku).

Chociaż jestem prawie pewien, że padding-dno div.body wykorzystywane, aby pracować w Firefoksie 2.

Zresztą, czy ktoś ma trudne pojęcia, aby pomóc mi w tym problemie?

EDIT: Aby podać więcej szczegółów, ale aktualnie nie nagłówków i stopek za pomocą elementów umieszczonych z position: fixed z top:0 lub bottom:0 w zależności czy jest to nagłówek lub stopkę. Działa to dobrze, a podczas drukowania elementy te są powtarzane na każdej stronie we właściwej pozycji (patrz przykład "dokumentu do drukowania"). Jedynym problemem jest to, kiedy nastąpi przerwa strona, tekst jest sporządzony za tymi elementami (patrz strona 3/4)

EDIT2: Aktualizacja URL dokumentu

+0

Fabien, czy możesz mi powiedzieć, w których przeglądarkach pracujesz. Właśnie sprawdziłem w Google Chrome 8.0.552.237, a podgląd wydruku wyświetla stopkę na dole tylko ostatniej strony. – DigiKev

+0

Czy możesz opisać swoje rozwiązanie Fabien, byłoby to bardzo cenne! Link do dokumentu jest martwy:/ – einarmagnus

+0

Zaktualizowałem adres URL. Nie znaleźliśmy rozwiązania tego problemu, teraz używamy generatora PDF opartego na konwersji HTML do PDF (w rzeczywistości dompdf lub wkhtmltopdf, w zależności od konfiguracji serwera). –

Odpowiedz

-3

Będziemy chcieli wdrożyć typy nośników najbardziej prawdopodobne. Więcej informacji można znaleźć pod numerem http://www.w3.org/TR/CSS2/media.html. Możesz mieć jeden arkusz CSS, który nie ma pływającej stopki do drukowania, a drugi na ekranie.

<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">

To jest przykład.

Możesz także rozważyć uczynienie stopki niewidocznej na wydrukowanej stronie, jeśli jej nie potrzebujesz.

+0

Używam już stronicowanego CSS mediów, aby uzyskać to, czego potrzebuję –

1

Z mojego doświadczenia wynika, że ​​łamanie strony nie działa w obrębie elementu. Jeśli element taki jak [p] [/ p] obejmuje dwie drukowane strony, kod HTML nie jest świadomy miejsca przerwy między stronami. Dzieje się tak dlatego, że użytkownik może ustawić własne marginesy drukarki na 1 lub 1,75 cala lub inną wartość. Faktycznych marginesów drukarki nie można ustawić za pomocą CSS. CSS może ustawić marginesy i dopełnienie na stronie HTML - na zdefiniowane marginesy "drukarki". Brak informacji o ustawieniach drukarki, takich jak marginesy, jest wysyłane do przeglądarki. To wyjaśnia, dlaczego treść jest objęta gwarancją w nagłówku, ponieważ przeglądarka nie ma pojęcia, kiedy nastąpiło pobranie strony. Najprostszym rozwiązaniem jest posiadanie informacji o nagłówku na pierwszej stronie, ale to nie jest to, czego potrzebujesz. Metoda brute force polega na wstawianiu podziałów strony [br style = "page-break-before: always;" /] w akapicie we właściwym miejscu, ale nie jest to praktyczne w przypadku dużej liczby dokumentów. Ponadto subtelne różnice między drukarkami, w tym tymi pochodzącymi od tego samego producenta, różnią się nieznacznie - na przykład jeden druk może drukować zawartość tylko na jednej stronie, kolejna drukarka może mieć ostatni wiersz na następnej stronie, nawet jeśli obie drukarki mają ten sam margines ustawienia. Jednak w przypadku informacji tabelarycznych ([table] [/ table]) przypisanie takiego CSS staje się łatwe do trzymania tabel razem. Spekuluję, że można policzyć znaki na stronie i dynamicznie wstawiać podziały strony za pomocą javascript (łatwe, jeśli używałeś JQuery) do przybliżenia podejścia typu brute force.

3

Jest ładna odpowiedź here, która dotyczy tabel. Robi dokładnie to, co chcesz i prawdopodobnie działa nawet w IE6.

3

Wygląda CSS2 ma reguły @Page w którym można zdefiniować rozmiar i margines:

@page { size:8.5in 11in; margin: 6em 1em 2em } 

-lub-

@page { size:auto; margin: 6em 1em 2em } 

Niestety nie mam czasu przetestuj to, ale chciałbym wiedzieć, czy to działa. Mógłbym to wykorzystać.

Podoba mi się to, co planujesz z nagłówkiem/stopką. Dobra robota :)