Czy na każdej drukowanej stronie można drukować strony HTML z niestandardowymi nagłówkami i stopkami?
Chciałbym dodać słowo „UNCLASSIFIED” w kolorze czerwonym, Arial, rozmiar 16pt na górze i na dole każdej drukowanej strony, bez względu na treść.
Aby wyjaśnić, jeśli dokument został wydrukowany na 5 stronach, każda strona powinna mieć niestandardowy nagłówek i stopkę.
Czy ktoś wie, czy jest to możliwe przy użyciu HTML / CSS?
pisition: fixed
ithead tbody tfoot
techniki mają wady, więc powinieneś je połączyć, czytaj więcej tutaj .Odpowiedzi:
Jeśli weźmiesz element, który chcesz być stopką i ustawisz go jako pozycja: stała i dolna: 0, po wydrukowaniu strony powtórzy ten element na dole każdej drukowanej strony. To samo działałoby dla elementu nagłówka, wystarczy ustawić zamiast tego top: 0.
Na przykład:
CSS:
źródło
Uważam, że poprawną odpowiedzią jest to, że HTML 5 i CSS3 nie obsługują drukowania nagłówków i stopek stron
print
mediach.I chociaż możesz to zasymulować za pomocą:
każdy z nich ma błędy, które uniemożliwiają mu bycie idealnym ogólnym rozwiązaniem.
źródło
@footer
zcontent:"stuff"
lub podobnie.Właśnie spędziłem lepszą połowę dnia na opracowaniu rozwiązania, które faktycznie dla mnie zadziałało, i pomyślałem, że podzielę się tym, co zrobiłem. Problem z powyższymi rozwiązaniami polegał na tym, że wszystkie moje elementy akapitu zachodziły na stopkę, którą chciałem na dole strony. Aby obejść ten problem, użyłem następującego CSS:
page-break-inside
dlap
icontent-block
była kluczowa dla mnie. Za każdym razem, gdy mamp
następującąh*
, owijam je obie wdiv class = "content-block">
aby upewnić się, że pozostają razem i nie pękają.Mam nadzieję, że ktoś uzna to za przydatne, ponieważ zrozumienie tego zajęło mi około 3 godzin (jestem również nowy w CSS / HTML, więc jest to ...)
EDYTOWAĆ
Na żądanie w komentarzach dodaję przykładowy dokument HTML. Będziesz chciał skopiować to do pliku HTML, otwórz go, a następnie wybierz wydrukować stronę. Podgląd wydruku powinien pokazać to działające. Z mojej strony działało to w Firefox i IE, ale Chrome sprawił, że czcionka była wystarczająco mała, aby zmieściła się na jednej stronie, więc tam nie działała.
źródło
Od lat szukam rozwiązania i znalazłem ten post na jaki sposób wydrukować stopkę, która działa na wielu stronach bez nakładania się treści strony.
Moim wymaganiem był IE8, do tej pory odkryłem, że to nie działa w Chrome. [ aktualizacja ] Od 1 marca 2018 r. działa również w Chrome
W tym przykładzie użyto tabel i elementu tfoot, ustawiając styl css:
źródło
magicznym rozwiązaniem jest naprawdę umieszczenie wszystkiego w jednym stole.
thead : dotyczy powtarzającego się nagłówka.
tfoot : powtarzająca się stopka.
tbody : treść.
i zrób pojedynczy tr, td i umieść wszystko w div
KOD ::
dodatkowo : aby uniknąć nakładania się wielu stron. lubić:
co powoduje przepełnienie, które powoduje, że elementy nakładają się na nagłówek w podziale strony.
więc >> użyj:
page-break-inside: avoid !important;
z tą klasąarticle
.całkiem proste, mam nadzieję, że da to najlepszy wynik, o jakim marzysz.
Z poważaniem. ;)
źródło
Z tego pytania - dodaj następujące style do arkusza stylów tylko do wydruku. To rozwiązanie będzie działać w IE i Firefox, ale nie w Chrome (od wersji 21):
źródło
Użyj podziałów stron, aby zdefiniować style w CSS:
Następnie dodaj znacznik do dokumentu w odpowiednich miejscach:
Bibliografia
CSS Paged Media: Podziały stron
MDN: podział strony przed
MDN: break-before
Układ wielokolumnowy
XHTML Print: Second Edition
Błąd Webkit 5097: podział strony po CSS2 nie działa
Drukuj często zadawane pytania dotyczące HTML: czy program będzie przestrzegał stylów CSS, takich jak podział strony?
Jak radzić sobie z podziałami stron podczas drukowania dużej tabeli HTML
źródło
if the document was printed onto 5 pages
should
nie znaczydon't
.If
(tylko przykład) słowoif
(tylko przykład) jest używane przez PO, iif
(tylko przykład) PO nie jest już aktywny, czy lepiej jest podać konkretną odpowiedźif
(tylko przykład) są już odpowiedzi ogólne iif
(tylko przykład) języki (HTML / CSS) i specyfikacje mają na celu uniknięcie pośrednich i uproszczenie dokumentacji ?If
(tylko przykład), więc dlaczego? W przeciwnym razie dlaczego nie?Próbowałem stoczyć tę daremną bitwę, łącząc reguły tfoot i css, ale zadziałało to tylko w Firefoksie :(. Gdy używasz zwykłego css, zawartość przepływa przez stopkę. Podczas korzystania z tfoot stopka na ostatniej stronie nie ładnie pozostaje na dole Jest tak, ponieważ stopki tabel są przeznaczone do tabel, a nie stron fizycznych. Testowane w Chrome 16, Opera 11, Firefox 3 i 6 oraz IE6.
źródło
Jednym z podejść, które działa tylko w przypadku dodawania nagłówków do każdej strony, jest zawinięcie zawartości w a,
<table>
a następnie umieszczenie treści nagłówka w<thead>
tagu, a treść w<tbody>
tagu, w następujący sposób:Działa to w Chrome, a nie w 100% pewny co do innych przeglądarek.
źródło
Jeśli możesz użyć javascipt, poproś klienta o ułożenie zawartości za pomocą javascript w celu umieszczenia elementów w oparciu o dostępną przestrzeń.
Możesz użyć wtyczki JQuery Columnizer do dynamicznego układania treści w blokach o stałym rozmiarze i pozycjonowania nagłówków i stopek w ramach procedury renderowania. http://welcome.totheinter.net/columnizer-jquery-plugin/
Zobacz przykład 10 http://welcome.totheinter.net/autocolumn/sample10.html
Przeglądarka nadal doda własne nagłówki lub stopki, jeśli jest włączona w systemie operacyjnym. Spójny układ między platformami i przeglądarkami prawdopodobnie będzie wymagać warunkowego css.
źródło
Jestem zaskoczony i nie jestem pod wrażeniem, że Chrome ma tak straszną obsługę drukowania CSS.
Moje zadanie wymagało pokazania nieco innej stopki na każdej stronie. W najprostszym przypadku, tylko rosnący rozdział i numer strony. W bardziej skomplikowanych przypadkach więcej tekstu w stopce - na przykład kilka przypisów - co może zwiększyć jego rozmiar, powodując zmniejszenie zawartości obszaru zawartości tej strony i ponowne jej przejście do następnej strony.
Druk CSS nie może rozwiązać tego problemu, przynajmniej dzisiaj przy pomocy tandetnej obsługi przeglądarki. Ale wychodząc poza druk, CSS3 może wykonać wiele ciężkich zadań:
https://jsfiddle.net/b9chris/moctxd2a/29/
SCSS:
W tym przykładzie jest trochę więcej kodu, w tym trochę Cat Ipsum; ale używany js jest tylko po to, aby pokazać, jak bardzo nagłówek / stopka może się różnić bez przerywania podziału na strony. Kluczem jest wzięcie sztuczki polegającej na przyklejeniu do dołu kolumny z CSS Flexbox, a następnie nałożenie jej na stronę o znanej, stałej wysokości - w tym przypadku kawałek papieru o wielkości 8,5 x 11 cali w formacie US z 0,5. "marginesy opuszczają się
width: 7.5in
iheight: 10in
dokładnie. Po poinformowaniu elastycznego kontenera CSS o jego dokładnych wymiarach (div.page
), łatwo jest rozwinąć nagłówek i stopkę i zawęzić je tak, jak w konwencjonalnej typografii.To, co pozostało, przepływa przez zawartość strony, gdy na przykład stopka rośnie do 8 przypisów, a nie 3. W moim przypadku treść jest na tyle ustalona, że nie muszę się tym martwić, ale jestem pewien, że istnieje sposób zrobić to. Jednym z pomysłów, które przychodzi mi na myśl, jest przekształcenie nagłówka i stopki w zmiennoprzecinkowe szerokości 100%, a następnie pozycjonowanie ich za pomocą Javascript. Przeglądarka automatycznie poradzi sobie z przerwami w regularnym przepływie treści.
źródło
Czy to jest coś, co chcesz wydrukować? Możesz dodać go do każdej strony w swojej witrynie i użyć CSS do zdefiniowania znacznika jako nośnika tylko do wydruku.
Na przykład może to być przykładowy nagłówek:
A w CSS zrób coś takiego:
Wreszcie, aby umieścić nagłówek / stopkę na każdej stronie, której możesz użyć po stronie serwera, lub jeśli masz jakieś strony generowane za pomocą PHP lub ASP, możesz po prostu zakodować go we wspólnym pliku.
Edytować:
Ta odpowiedź ma na celu pokazanie czegoś na fizycznej drukowanej wersji dokumentu, ale nie pokazanie tego inaczej. Jednak, jak sugerują komentarze, nie rozwiązuje problemu posiadania stopki na wielu drukowanych stronach, gdy zawartość się przepełnia.
Zostawiam to tutaj na wypadek, gdyby było to pomocne.
źródło
Jeśli używasz silnika szablonów, takiego jak Asp.net Razor Engine lub Angular, myślę, że musisz ponownie wygenerować stronę i podzielić stronę na kilka stron, a następnie możesz swobodnie oznaczać każdą stronę i umieszczać nagłówek i stopkę na motywie. jeden przykład może być poniżej:
źródło
Znalazłem jedno rozwiązanie. Podstawowym pomysłem jest utworzenie tabeli, aw sekcji adad umieszczenie danych nagłówka w tr i siłą css, aby pokazać, że tr tylko w druku, a nie w ekranie, wtedy normalny nagłówek powinien być zmuszony do pokazywania tylko w ekranie, a nie w druku. Druk w 100% na wielu stronach. przykładowy kod jest tutaj
źródło
Wypróbuj to, dla mnie działa na Chrome, Firefox i Safari. Otrzymasz nagłówek i stopkę przymocowane do każdej strony bez nakładania się na treść strony
CSS
HTML
źródło
Na podstawie niektórych postów, myślę, że
position: fixed
działa dla mnie.Naciśnij Ctrl + P w chromie, aby zobaczyć tekst nagłówka i stopki na każdej stronie. Mam nadzieję, że to pomoże
źródło