Kako ravnati s prelomi strani pri tiskanju velike tabele HTML (8)

Imam projekt, ki zahteva tiskanje tabele HTML z veliko vrsticami.

Moja težava je, kako se tabela natisne na več strani. Včasih prereže vrstico na pol, zaradi česar je neberljiva, ker je ena polovica na robu strani, preostanek pa je natisnjen na vrhu naslednje strani.

Edina verjetna rešitev, ki se mi zdi, je, da namesto tabele uporabim zapletene DIV-je in po potrebi vsilim prelome strani ... toda preden grem skozi vse spremembe, sem pomislil, da bi lahko vprašal tukaj prej.

Uporabite te lastnosti CSS:

Prelom strani za prelomom strani pred

Na primer:

@media print ( tabela (page-break-after:always)) ....

Noben od tukajšnjih odgovorov zame ni deloval v Chromu. AAverin na GitHubu je za to ustvaril uporaben Javascript in zame je deloval:

Samo dodajte js v svojo kodo in dodajte razred splitForPrint v tabelo in tabelo bo lepo razdelil na več strani in vsaki strani dodal glavo tabele.

Opomba: pri uporabi preloma strani: vedno za oznako ustvari prelom strani za zadnjim bitjem tabele in vsakič ustvari popolnoma prazno stran! Če želite to popraviti, preprosto spremenite v page-break-after: auto. Pravilno se bo zlomil in ne bo ustvaril dodatne prazne strani.

@media print ( table ( page-break-after:auto ) tr ( page-break-inside:avoid; page-break-after:auto ) td ( page-break-inside:avoid; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group ) ) ....

Sprejeti odgovor zame ni deloval v vseh brskalnikih, vendar je sledenje css zame delovalo:

Tr ( display: table-row-group; page-break-inside:avoid; page-break-after:auto; )

Struktura HTML je bil:

...

V mojem primeru je bilo nekaj dodatnih težav z thead tr, vendar je to rešilo prvotno težavo zadrževanja vrstice tabele.

Zaradi težav z glavo sem dobil:

#theTable td * ( page-break-inside:avoid; )

To ni preprečilo, da bi se vrstice zlomile; samo vsebino vsake celice.

Končal sem s pristopom @vicenteherrera z nekaj popravki (ki je lahko bootstrap 3).

V bistvu; ne moremo zlomiti tr s ali td s, ker niso elementi ravni bloka. Zato v vsakega vstavimo div in za div uporabimo naša pravila za prelom strani*. Drugič, dodamo nekaj oblazinjenja na vrh vsakega od teh divov, da nadomestimo morebitne stilske artefakte.

@media print ( /* izogibajte se rezanju tr"ov na pol */ th div, td div ( margin-top:-8px; padding-top:8px; page-break-inside:avoid; ) ) $(document).ready (funkcija())( // Vsebino tr in td's ovij v div // (todo: dodaj logiko, da to naredimo samo pri tiskanju) $("table tbody th, table tbody td").wrapInner(" " ); ))

Popravki in prilagoditve dodatkov so bili potrebni za kompenzacijo uvedenega tresenja (predvidevam, da iz zagonskega sistema). Nisem prepričan, ali predstavljam novo rešitev iz drugih odgovorov na to vprašanje, a morda bo komu pomagalo.

Nedavno sem to težavo rešil z dobro rešitvijo.

AvoidBreak (obroba: 2px polna; page-break-inside:avoid; )

Function Print())( $(".tableToPrint td, .tableToPrint th").each(function())( $(this).css("width", $(this).width() + "px") )) ; $(".tableToPrint tr").wrap(""); window.print(); )

Deluje kot čar!

Preizkusil sem veliko rešitev in nobena ni dobro delovala.

Zato sem poskusil majhen trik in deluje:

tfoot s slogom: položaj: fiksen; spodaj: 0px; položaj: fiksno; spodaj: 0px; je postavljen na dno zadnje strani, če pa je noga previsoka, prekriva vsebino tabele.

tfoot samo z: display: table-footer-group; se ne prekriva, vendar ni na dnu zadnje strani...

Postavimo dve tfoot:

TFOOT.placer ( display: table-footer-group; height: 130px; ) TFOOT.contenter ( display: table-footer-group; position: fixed; bottom: 0px; height: 130px; ) vaše dolgo besedilo ali visoka slika tukaj

Ena rezervira prostor na nezadnjih straneh, druga pa v vaši osebni nogi.

Preizkusna tabela ( page-break-inside:auto ) tr ( page-break-inside:avoid; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group )

naslov

opombe

x

x

x

Kako ravnati s prelomi strani pri tiskanju velike tabele HTML (8)

Imam projekt, ki zahteva tiskanje tabele HTML z veliko vrsticami.

Moja težava je, kako se tabela natisne na več strani. Včasih prereže vrstico na pol, zaradi česar je neberljiva, ker je ena polovica na robu strani, preostanek pa je natisnjen na vrhu naslednje strani.

Edina verjetna rešitev, ki se mi zdi, je, da namesto tabele uporabim zapletene DIV-je in po potrebi vsilim prelome strani ... toda preden grem skozi vse spremembe, sem pomislil, da bi lahko vprašal tukaj prej.

Uporabite te lastnosti CSS:

Prelom strani za prelomom strani pred

Na primer:

@media print ( tabela (page-break-after:always)) ....

Noben od tukajšnjih odgovorov zame ni deloval v Chromu. AAverin na GitHubu je za to ustvaril uporaben Javascript in zame je deloval:

Samo dodajte js v svojo kodo in dodajte razred splitForPrint v tabelo in tabelo bo lepo razdelil na več strani in vsaki strani dodal glavo tabele.

Opomba: pri uporabi preloma strani: vedno za oznako ustvari prelom strani za zadnjim bitjem tabele in vsakič ustvari popolnoma prazno stran! Če želite to popraviti, preprosto spremenite v page-break-after: auto. Pravilno se bo zlomil in ne bo ustvaril dodatne prazne strani.

@media print ( table ( page-break-after:auto ) tr ( page-break-inside:avoid; page-break-after:auto ) td ( page-break-inside:avoid; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group ) ) ....

Sprejeti odgovor zame ni deloval v vseh brskalnikih, vendar je sledenje css zame delovalo:

Tr ( display: table-row-group; page-break-inside:avoid; page-break-after:auto; )

Struktura html je bila:

...

V mojem primeru je bilo nekaj dodatnih težav z thead tr, vendar je to rešilo prvotno težavo zadrževanja vrstice tabele.

Zaradi težav z glavo sem dobil:

#theTable td * ( page-break-inside:avoid; )

To ni preprečilo, da bi se vrstice zlomile; samo vsebino vsake celice.

Končal sem s pristopom @vicenteherrera z nekaj popravki (ki je lahko bootstrap 3).

V bistvu; ne moremo zlomiti tr s ali td s, ker niso elementi ravni bloka. Zato v vsakega vstavimo div in za div uporabimo naša pravila za prelom strani*. Drugič, dodamo nekaj oblazinjenja na vrh vsakega od teh divov, da nadomestimo morebitne stilske artefakte.

@media print ( /* izogibajte se rezanju tr"ov na pol */ th div, td div ( margin-top:-8px; padding-top:8px; page-break-inside:avoid; ) ) $(document).ready (funkcija())( // Vsebino tr in td's ovij v div // (todo: dodaj logiko, da to naredimo samo pri tiskanju) $("table tbody th, table tbody td").wrapInner(" " ); ))

Popravki in prilagoditve dodatkov so bili potrebni za kompenzacijo uvedenega tresenja (predvidevam, da iz zagonskega sistema). Nisem prepričan, ali predstavljam novo rešitev iz drugih odgovorov na to vprašanje, a morda bo komu pomagalo.

Nedavno sem to težavo rešil z dobro rešitvijo.

AvoidBreak (obroba: 2px polna; page-break-inside:avoid; )

Function Print())( $(".tableToPrint td, .tableToPrint th").each(function())( $(this).css("width", $(this).width() + "px") )) ; $(".tableToPrint tr").wrap(""); window.print(); )

Deluje kot čar!

Preizkusil sem veliko rešitev in nobena ni dobro delovala.

Zato sem poskusil majhen trik in deluje:

tfoot s slogom: položaj: fiksen; spodaj: 0px; položaj: fiksno; spodaj: 0px; je postavljen na dno zadnje strani, če pa je noga previsoka, prekriva vsebino tabele.

tfoot samo z: display: table-footer-group; se ne prekriva, vendar ni na dnu zadnje strani...

Postavimo dve tfoot:

TFOOT.placer ( display: table-footer-group; height: 130px; ) TFOOT.contenter ( display: table-footer-group; position: fixed; bottom: 0px; height: 130px; ) vaše dolgo besedilo ali visoka slika tukaj

Ena rezervira prostor na nezadnjih straneh, druga pa v vaši osebni nogi.

Preizkusna tabela ( page-break-inside:auto ) tr ( page-break-inside:avoid; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group )

naslov

opombe

x

x

x

Ta tvit me je zasvojil. Nenadoma sem ugotovil, da se ne spomnim več, kdaj sem optimiziral spletne strani za tiskanje ali celo preveril, kako so bile izpisane na tiskalnik.

Glavni poudarek spletnega razvoja je na elektronske različice strani. Strani je treba preveriti v več brskalnikih, testirati na različnih velikostih oken ... Koga brigajo tiskalniki? Ali pa sem morda pozabil na sloge tiskanja, ker sam redko delam papirnate kopije strani. Kakor koli že, menil sem, da je treba stanje nujno popraviti.

Tiskana različica spletne strani ima enako pravico do obstoja kot elektronska različica. In če si prizadevamo, da bi bili naši materiali čim bolj dostopni, ne smemo zanemariti papirnih medijev. Poleg tega ne smete sklepati o uporabnikih in njihovem vedenju. Ljudje še vedno tiskajo spletne strani na tiskalnikih. Samo pomislite na članke ali objave v spletnem dnevniku, strani z recepti, kontaktnimi podatki, navodili ali seznami. Prej ali slej bo zagotovo nekdo poskušal natisniti nekaj, kar ste objavili na internetu.

O tem pravi Haydon Pickering, avtor knjige »Inclusive Design Patterns«: »Že dolgo nisem uporabljal domačih tiskalnikov. Bistvo tukaj je, da imam občutek, da se zlomijo približno deset minut po začetku tiskanja. Ampak jaz nisem vse.”

Če zdaj ugotavljate, da ste, tako kot jaz, stilom tiskanja posvečali premalo pozornosti, upam, da vam bo moja zgodba dobro služila in vam pomagala hitro osvežiti spomin. In če še nikoli niste optimizirali spletnih strani za tiskalnike, vam bo moja majhna zbirka uporabnih trikov CSS pomagala.

1. Uporaba slogov tiskanja CSS Najboljši način za vključitev slogov tiskanja na vašo stran je, da v glavni datoteki CSS deklarirate pravilo @media.

Telo (velikost pisave: 18 slikovnih pik; ) @media print ( /* slogi tiskanja bodo tukaj */ telo (velikost pisave: 28 slikovnih pik; ) )
Druga možnost je, da sloge tiskanja shranite v ločeno datoteko in jo vključite v HTML, vendar boste s tem pristopom potrebovali dodatno zahtevo pri nalaganju strani.

2. Testiranje Kako oceniti videz spletna stran pripravljena za tisk? Vsakemu je jasno, da ga preliti papir po vsaki spremembi sloga ne Najboljša odločitev. Na srečo so zmožnosti brskalnika povsem zadostne za »brezpapirno« preverjanje tiskanih verzij strani.

Odvisno od brskalnika lahko izvozite stran v PDF, uporabite funkcijo predogled ali celo odpravite napake na strani neposredno v spletnem brskalniku.

Če želite odpraviti napake v slogih tiskanja v Firefoxu, odprite ploščo za razvijalce z uporabo bližnjice na tipkovnici Shift + F2 ali z izvedbo menijskega ukaza Razvijaj → Plošča za razvijalce. Vstopi ukazna vrstica ki se nahaja na dnu okna, naslednje: media emulate print , vnos zaključite s pritiskom na Enter . Aktivni zavihek bo deloval, kot da bi bil njegov tip medija natisnjen, dokler ne zaprete ali osvežite strani.

Emulacija tiskanja v Firefoxu

Chrome ima tudi podobno funkcijo. Odprite orodja za razvijalce, za kar lahko v sistemu MacOS uporabite kombinacijo tipk CMD + Opt + I, v sistemu Windows – Ctrl + Shift + I ali pa izvedete menijski ukaz. Dodatna orodja→ Orodja za razvijalce. Po tem odprite ploščo za upodabljanje. Eden od načinov za to je, da pritisnete Esc, da prikličete ploščo Console in nato uporabite meni, da odprete ploščo Rendering. Na plošči upodabljanja nastavite zastavico Emulate CSS Media in izberite Print.

Emulacija tiskanja v Chromu

Več o testiranju tiskanih različic spletnih strani lahko preberete na StackOverflow.

3. Absolutne merske enote Absolutne merske enote niso preveč primerne za zaslonske različice strani, za tiskanje pa so ravno to, kar potrebujete. Pri tiskarskih stilih je popolnoma varen, poleg tega je priporočljiva uporaba absolutnih merskih enot, kot so cm, mm, in, pt ali pc.

Odsek (rob-spodaj: 2 cm; )

4. Lastnosti strani Pravilo @page lahko uporabite za nadzor lastnosti strani, kot so njihova velikost, orientacija in robovi. To je zelo priročno, na primer, ko potrebujete, da imajo vse natisnjene strani enake robove.

@media print ( @stran ( rob: 1cm; ) )
Pravilo @page je del standarda Paged Media Module, ki ponuja veliko kul stvari, kot je izbira prve strani za tiskanje, prilagajanje prazne strani, pozicioniranje elementov v vogalih strani in . Uporablja se lahko celo za pripravo knjig za tisk.

5. Urejanje prelomov strani Ker tiskani listi za razliko od spletnih strani niso neskončni, se vsebina spletnih strani prej ali slej prekine na enem listu papirja in se nadaljuje na naslednjem. Obstaja pet lastnosti za nadzor prelomov strani: Prelom strani pred elementom Če želite, da se element vedno pojavi na začetku strani, lahko vsilite prelom strani pred njim z lastnostjo page-break-before.

Razdelek ( page-break-before: always; )

▍Prelom strani za elementom Lastnost page-break-after omogoča nastavitev vsiljenega preloma strani za elementom. S to lastnostjo lahko tudi preprečite zlom.

H2 ( prelom strani po: vedno; )

▍Prelomi stran znotraj elementa Lastnost page-break-inside je zelo priročna, če se morate izogniti razdelitvi elementa med dve strani.

Ul ( prelom strani: izogibajte se; )

▍Zgornje in spodnje viseče črte Včasih vam ni treba vsiliti prelomov strani, vendar želite nadzorovati izpis odstavkov na mejah strani.

Na primer, če zadnja vrstica odstavka na trenutni strani ne ustreza, bosta zadnji dve vrstici tega odstavka natisnjeni na naslednji strani. To je zato, ker je lastnost, ki to nadzoruje (vdove, tj. »zgornje viseče vrstice«), privzeto nastavljena na 2. To je mogoče spremeniti.

P ( vdove: 4; )
Če pride do druge situacije in se na trenutno stran prilega samo ena vrstica odstavka, bo celoten odstavek natisnjen na naslednji strani. Tudi lastnost, ki je odgovorna za spodnje viseče črte (sirote), je privzeto nastavljena na 2.

P(sirote: 3;)
Bistvo zgornje kode je, da se morajo vsaj tri vrstice prilegati na trenutno stran, da se celoten odstavek ne previje na naslednjo stran.

Da bi to bolje razumeli, si oglejte primer, pripravljen s CodePen. In tukaj je različica za odpravljanje napak istega primera, ki je bolj priročna za testiranje.

*, *:pred, *:za, *:prva-črka, p:prva-vrstica, div:prva-vrstica, blockquote:prva-vrstica, li:prva-vrstica ( ozadje: prozorno !pomembno; barva: #000 !pomembno; box-shadow: nič !pomembno; text-shadow: nič !pomembno; )
Mimogrede, slogi CSS za tiskanje so ena redkih izjem, kjer je direktiva!important povsem običajna ;)

7. Odstranjevanje nepotrebne vsebine Da ne bi trošili črnila, iz tiskane različice strani odstranite vse nepotrebno, kot so ogromni lepi diapozitivi, reklame, navigacijska orodja in podobno. To lahko storite tako, da za nepotrebne elemente nastavite lastnost prikaza na nič. Povsem mogoče je, da se vam bo zdelo prav, da prikažete samo glavno vsebino strani in skrijete vse ostalo:

Telo > *:not(glavno) ( prikaz: brez; )

8. Prikaz naslovov povezav Povezave, kot jih običajno najdemo na spletnih straneh, so natisnjene popolnoma neuporabne, razen če bralec papirne različice dokumenta ve, kam vodijo.

Če želite prikazati naslove povezav po njihovih besedilnih predstavitvah, preprosto uporabite naslednji slog:

A:after ( vsebina: " (" attr(href) ")"; )
Seveda bo s tem pristopom "dešifrirano" veliko nepotrebnih stvari. Na primer relativne povezave, absolutne povezave na istem mestu kot natisnjena stran, sidrne povezave itd. Da ne bi imeli nereda na natisnjeni strani, bi bilo bolje uporabiti nekaj takega:

A:not():after ( vsebina: " (" attr(href) ")"; )
Seveda izgleda noro. Torej bom razložil pomen tega pravila v navadni angleščini: "Prikaži vrednost atributa href poleg vsake povezave, ki ima atribut, ki se začne s http, vendar ne vsebuje mywebsite.com."

9. Razlaga okrajšav Okrajšave v besedilu morajo biti uvrščene v oznako, njihova razlaga pa mora biti vključena v atribut naslova. Če okrajšave oblikujete na ta način, je njihov pomen zelo enostavno prikazati na natisnjeni strani:

Abbr:after ( vsebina: " (" attr(title) ")"; )

10. Vsiljeno tiskanje ozadja Običajno brskalniki pri ustvarjanju strani za tiskanje ne prikažejo barve ozadja in slike ozadja, razen če to izrecno navedejo. Vendar je včasih treba vse to natisniti. Tu nam bo v pomoč nestandardizirana lastnost print-color-adjust, ki omogoča preglasitev privzetih nastavitev za nekatere brskalnike.

Glava ( -webkit-print-color-adjust: natančno; print-color-adjust: natančno; )

11. Medijske poizvedbe Če pišete medijske poizvedbe, kot je spodnja, ne pozabite, da pravila CSS v podobne zahteve ne bo vplivalo na tiskano različico strani.

@medijski zaslon in (najmanjša širina: 48em) ( /* samo zaslon */ )
Zakaj je temu tako? Stvar je v tem, da se pravila CSS uporabijo le, če je vrednost minimalne širine 48em in če je vrsta medija zaslon. Če se znebite te medijske poizvedbe iz ključna beseda zaslon , potem bo omejen samo z vrednostjo najmanjše širine.

@media (najmanjša širina: 48em) ( /* vse vrste medijev */ )

12. Tiskanje zemljevidov Trenutne različice Firefoxa in Chroma lahko tiskajo zemljevide, vendar na primer Safari tega ne more. Kaj storiti pri tiskanju kartic? Ena od univerzalnih možnosti je uporaba statičnih zemljevidov namesto dinamičnih.

Zemljevid ( širina: 400 slikovnih pik; višina: 300 slikovnih pik; slika ozadja: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true "); -webkit-print-color-adjust: točno; print-color-adjust: natančno; )

13. QR kode Tiskanje QR kod, ki vsebujejo pomembne povezave, lahko bistveno izboljša uporabnost papirnatih različic spletnih strani. Tukaj je del iz revije The Smashing Magazine, kjer lahko najdete uporabni nasveti o tej temi. Ena izmed njih je, da na natisnjene strani vključijo svoje naslove v obliki QR kod. Posledično uporabniku, da bi v brskalniku odprl stran, s katere je bil izpis, ne bo treba na tipkovnico vtipkati njenega polnega naslova.14. O tiskanju neoptimiziranih strani Med raziskovanjem teme o tiskanju spletnih strani sem odkril odlično orodje, ki omogoča priročno pripravo neoptimiziranih strani za tisk. Uporaba Printliminatorja