Kako se nositi s prijelomima stranica kada ispisujete veliku HTML tablicu (8)

Imam projekat koji zahteva štampanje HTML tabele sa mnogo redova.

Moj problem je kako se tabela štampa na više stranica. Ponekad presječe liniju na pola, čineći je nečitljivom jer je jedna polovina na rubu stranice, a ostatak je ispisan na vrhu sljedeće stranice.

Jedino prihvatljivo rješenje koje se mogu sjetiti je da koristim složene DIV-ove umjesto tablice i prisilim prijelome stranica ako je potrebno... ali prije nego što prođem kroz sve promjene, mislio sam da bih mogao pitati ovdje ranije.

Koristite ova CSS svojstva:

Stranica-prijelom-poslije prijeloma stranice-prije

Na primjer:

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

Nijedan od odgovora ovdje nije radio za mene u Chromeu. AAverin na GitHub-u je kreirao koristan Javascript za ovo i meni je uspio:

Samo dodajte js svom kodu i dodajte klasu splitForPrint u tablicu i ona će uredno podijeliti tablicu na više stranica i dodati zaglavlje tablice svakoj stranici.

Napomena: Kada koristite prijelom stranice: uvijek za oznaku, kreira prijelom stranice nakon posljednjeg bita tabele, stvarajući potpuno praznu stranicu svaki put! Da biste ovo popravili, jednostavno ga promijenite u page-break-after: auto. Pokvariće se ispravno i neće stvoriti dodatnu praznu stranicu.

@media print (tabela (prelom-stranice-posle:auto) tr (prelom-stranice-unutar:izbegavati; prelom-stranice-posle:auto) td (prelom-stranice-unutar:izbegavati; prelom-stranice-posle:auto) thead ( display: table-header-group ) tfoot ( display: table-footer-group ) ) ....

Prihvaćeni odgovor mi nije funkcionisao u svim pretraživačima, ali praćenje css-a je radilo za mene:

Tr (prikaz: grupa-redova-tablice; prelom-unutar:izbegavati; prelom-stranice-posle:auto;)

HTML struktura bio:

...

U mom slučaju bilo je nekih dodatnih problema sa thead tr , ali ovo je riješilo prvobitni problem zadržavanja reda tabele.

Zbog problema sa zaglavljem završio sam sa:

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

Ovo nije spriječilo da se redovi prekinu; samo sadržaj svake ćelije.

Završio sam sa @vicenteherrerinim pristupom, sa nekim podešavanjima (koja mogu biti bootstrap 3).

Basically; ne možemo razbiti tr s ili td s jer oni nisu elementi na nivou bloka. Dakle, mi ubacujemo div s u svaki od njih i primjenjujemo naša page-break-* pravila na divove. Drugo, na vrh svakog od ovih div-ova dodajemo malo podloge kako bismo nadoknadili sve stilske artefakte.

@media print ( /* izbjegavati sečenje tr"s na pola */ th div, td div ( margin-top:-8px; padding-top:8px; page-break-inside:avoid; ) ) $(document).ready (function())( // Zamotajte svaki tr i td sadržaj unutar div // (todo: dodajte logiku tako da to radimo samo kada ispisujemo) $("table tbody th, table tbody td").wrapInner(" " ); ))

Korekcije i prilagođavanja dodataka su bile neophodne da bi se nadoknadila neka podrhtavanje koja je uvedena (pretpostavljam iz bootstrapa). Nisam siguran da li predstavljam novo rješenje iz ostalih odgovora na ovo pitanje, ali možda nekome pomogne.

Nedavno sam riješio ovaj problem dobrim rješenjem.

IzbjegniBreak ( granica: 2px čvrsta; page-break-inside:aoid; )

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

Radi kao šarm!

Testirao sam mnoga rješenja i nijedno nije dobro funkcioniralo.

Isprobao sam mali trik i uspjelo je:

tfoot sa stilom: pozicija: fiksna; dno: 0px; pozicija: fiksna; dno: 0px; se nalazi na dnu zadnje stranice, ali ako je podnožje previsoko, preklapa se sa sadržajem tabele.

tfoot samo sa: display: table-footer-group; se ne preklapa, ali nije na dnu zadnje stranice...

Stavimo dvije stope:

TFOOT.placer (prikaz: table-footer-group; visina: 130px; ) TFOOT.contenter (prikaz: table-footer-group; pozicija: fiksna; dno: 0px; visina: 130px; ) vaš dugi tekst ili visoka slika ovdje

Jedna rezerviše prostor na ne-poslednjim stranicama, druga u vašem ličnom podnožju.

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

naslov

bilješke

x

x

x

Kako se nositi s prijelomima stranica kada ispisujete veliku HTML tablicu (8)

Imam projekat koji zahteva štampanje HTML tabele sa mnogo redova.

Moj problem je kako se tabela štampa na više stranica. Ponekad presječe liniju na pola, čineći je nečitljivom jer je jedna polovina na rubu stranice, a ostatak je ispisan na vrhu sljedeće stranice.

Jedino prihvatljivo rješenje koje se mogu sjetiti je da koristim složene DIV-ove umjesto tablice i prisilim prijelome stranica ako je potrebno... ali prije nego što prođem kroz sve promjene, mislio sam da bih mogao pitati ovdje ranije.

Koristite ova CSS svojstva:

Stranica-prijelom-poslije prijeloma stranice-prije

Na primjer:

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

Nijedan od odgovora ovdje nije radio za mene u Chromeu. AAverin na GitHub-u je kreirao koristan Javascript za ovo i meni je uspio:

Samo dodajte js svom kodu i dodajte klasu splitForPrint u tablicu i ona će uredno podijeliti tablicu na više stranica i dodati zaglavlje tablice svakoj stranici.

Napomena: Kada koristite prijelom stranice: uvijek za oznaku, kreira prijelom stranice nakon posljednjeg bita tabele, stvarajući potpuno praznu stranicu svaki put! Da biste ovo popravili, jednostavno ga promijenite u page-break-after: auto. Pokvariće se ispravno i neće stvoriti dodatnu praznu stranicu.

@media print (tabela (prelom-stranice-posle:auto) tr (prelom-stranice-unutar:izbegavati; prelom-stranice-posle:auto) td (prelom-stranice-unutar:izbegavati; prelom-stranice-posle:auto) thead ( display: table-header-group ) tfoot ( display: table-footer-group ) ) ....

Prihvaćeni odgovor mi nije funkcionisao u svim pretraživačima, ali praćenje css-a je radilo za mene:

Tr (prikaz: grupa-redova-tablice; prelom-unutar:izbegavati; prelom-stranice-posle:auto;)

html struktura je bila:

...

U mom slučaju bilo je nekih dodatnih problema sa thead tr , ali ovo je riješilo prvobitni problem zadržavanja reda tabele.

Zbog problema sa zaglavljem završio sam sa:

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

Ovo nije spriječilo da se redovi prekinu; samo sadržaj svake ćelije.

Završio sam sa @vicenteherrerinim pristupom, sa nekim podešavanjima (koja mogu biti bootstrap 3).

Basically; ne možemo razbiti tr s ili td s jer oni nisu elementi na nivou bloka. Dakle, mi ubacujemo div s u svaki od njih i primjenjujemo naša page-break-* pravila na divove. Drugo, na vrh svakog od ovih div-ova dodajemo malo podloge kako bismo nadoknadili sve stilske artefakte.

@media print ( /* izbjegavati sečenje tr"s na pola */ th div, td div ( margin-top:-8px; padding-top:8px; page-break-inside:avoid; ) ) $(document).ready (function())( // Zamotajte svaki tr i td sadržaj unutar div // (todo: dodajte logiku tako da to radimo samo kada ispisujemo) $("table tbody th, table tbody td").wrapInner(" " ); ))

Korekcije i prilagođavanja dodataka su bile neophodne da bi se nadoknadila neka podrhtavanje koja je uvedena (pretpostavljam iz bootstrapa). Nisam siguran da li predstavljam novo rješenje iz ostalih odgovora na ovo pitanje, ali možda nekome pomogne.

Nedavno sam riješio ovaj problem dobrim rješenjem.

IzbjegniBreak ( granica: 2px čvrsta; page-break-inside:aoid; )

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

Radi kao šarm!

Testirao sam mnoga rješenja i nijedno nije dobro funkcioniralo.

Isprobao sam mali trik i uspjelo je:

tfoot sa stilom: pozicija: fiksna; dno: 0px; pozicija: fiksna; dno: 0px; se nalazi na dnu zadnje stranice, ali ako je podnožje previsoko, preklapa se sa sadržajem tabele.

tfoot samo sa: display: table-footer-group; se ne preklapa, ali nije na dnu zadnje stranice...

Stavimo dvije stope:

TFOOT.placer (prikaz: table-footer-group; visina: 130px; ) TFOOT.contenter (prikaz: table-footer-group; pozicija: fiksna; dno: 0px; visina: 130px; ) vaš dugi tekst ili visoka slika ovdje

Jedna rezerviše prostor na ne-poslednjim stranicama, druga u vašem ličnom podnožju.

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

naslov

bilješke

x

x

x

Ovaj tvit me je navukao. Odjednom sam shvatio da više ne mogu da se setim kada sam optimizovao web stranice za štampanje ili čak proveravao kako se izlaze na štampač.

Glavni fokus web razvoja je na elektronske verzije web stranice. Stranice se moraju provjeriti u više pretraživača, testirati na različitim veličinama prozora... Koga briga za štampače? Ili sam možda zaboravio na stilove štampe jer rijetko sam pravim papirne kopije stranica. Kako god bilo, smatrao sam da je situacija hitno potrebna.

Štampana verzija web stranice ima isto pravo na postojanje kao i elektronska verzija. I, ako nastojimo da naše materijale učinimo što dostupnijim, ne treba zanemariti papirne medije. Osim toga, ne biste trebali praviti pretpostavke o korisnicima i njihovom ponašanju. Ljudi i dalje štampaju web stranice na štampačima. Samo pomislite na članke ili postove na blogu, stranice s receptima, kontakt informacije, upute ili popise. Prije ili kasnije, neko će sigurno pokušati da odštampa nešto što ste objavili na internetu.

Evo šta o tome kaže Haydon Pickering, autor knjige “Inclusive Design Patterns”: “Dugo nisam koristio kućne štampače. Poenta je da imam osjećaj da se pokvare desetak minuta nakon što počnete da štampate. Ali ja nisam sve.”

Ako sada shvatite da, poput mene, niste obraćali dovoljno pažnje na stilove štampe, nadam se da će vam moja priča dobro poslužiti i pomoći vam da brzo osvježite pamćenje. A ako nikada niste optimizirali web stranice za štampače, moja mala kolekcija korisnih CSS trikova pomoći će vam da počnete.

1. Korišćenje CSS stilova štampanja Najbolji način da ugradite stilove štampanja u svoju stranicu je da proglasite @media pravilo u glavnom CSS fajlu.

Body (font-size: 18px; ) @media print ( /* stilovi štampanja će ići ovdje */ body (font-size: 28px; ) )
Alternativno, možete staviti stilove štampanja u zasebnu datoteku i uključiti ih u HTML, ali sa ovim pristupom biće vam potreban dodatni zahtev prilikom učitavanja stranice.

2. Testiranje Kako procijeniti izgled web stranica pripremljena za štampu? Svakome je jasno da stavljanje na papir nakon svake promjene stila nije Najbolja odluka. Na sreću, mogućnosti pretraživača su sasvim dovoljne za „bezpapirnu” proveru štampanih verzija stranica.

Ovisno o pretraživaču, možete izvesti stranicu u PDF, koristite funkciju pregled ili čak otklonite greške na stranici direktno u web pretraživaču.

Da biste otklonili greške u stilovima štampanja u Firefoxu, otvorite panel za programere koristeći prečicu na tastaturi Shift + F2 ili izvršavanjem naredbe menija Develop → Developer Panel. Uđi komandna linija koji se nalazi na dnu prozora, sljedeće: medij emulira print , završavajući unos pritiskom na Enter . Aktivna kartica će se ponašati kao da je štampana njena vrsta medija sve dok ne zatvorite ili osvežite stranicu.

Emulacija štampanja u Firefoxu

Chrome također ima sličnu funkciju. Otvorite Developer Tools, za koje na MacOS-u možete koristiti kombinaciju tipki CMD + Opt + I, u Windowsima – Ctrl + Shift + I, ili izvršiti naredbu menija Dodatni alati→ Alati za programere. Nakon toga otvorite render panel. Jedan od načina da to uradite je da pritisnete Esc da biste otvorili panel konzole, a zatim koristite meni da otvorite panel Rendering. U panelu za renderiranje postavite oznaku Emulate CSS Media i odaberite Print.

Emulacija štampanja u Chromeu

Više o testiranju štampanih verzija web stranica možete pročitati na StackOverflow.

3. Apsolutne mjerne jedinice Apsolutne mjerne jedinice nisu baš pogodne za ekranske verzije stranica, ali za štampanje su upravo ono što vam treba. U stilovima štampe potpuno je siguran, štaviše, preporučuje se korištenje apsolutnih mjernih jedinica, poput cm, mm, in, pt ili pc.

Odsjek ( margina-dno: 2 cm; )

4. Svojstva stranice Možete koristiti pravilo @page za kontrolu svojstava stranice, kao što su njihova veličina, orijentacija i margine. Ovo je vrlo zgodno, recimo, kada trebate da sve odštampane stranice imaju iste margine.

@media print ( @stranica ( margina: 1cm; ) )
Pravilo @page je dio standarda Paged Media Module, koji nudi mnogo kul stvari poput odabira prve stranice za štampanje, prilagođavanja prazne stranice, pozicioniranje elemenata u uglovima stranice i . Može se čak koristiti i za pripremu knjiga za štampu.

5. Upravljanje prijelomima stranica Pošto štampani listovi, za razliku od web stranica, nisu beskonačni, sadržaj web stranica se prije ili kasnije prekida na jednom listu papira i nastavlja na sljedećem. Postoji pet svojstava za kontrolu prijeloma stranice: Prijelom stranice prije elementa Ako želite da se element uvijek pojavljuje na početku stranice, možete prisiliti prijelom stranice prije njega koristeći svojstvo page-break-before.

Odjeljak (prelom stranice-prije: uvijek;)

▍Prelom stranice nakon elementa Svojstvo page-break-after omogućava vam da postavite prisilni prijelom stranice nakon elementa. Koristeći ovo svojstvo, također možete spriječiti lomljenje.

H2 (prelom stranice-poslije: uvijek; )

▍Razbijanje stranice unutar elementa Svojstvo page-break-inside je vrlo korisno ako trebate izbjeći podjelu elementa između dvije stranice.

Ul (page-break-inside: izbjegavajte; )

▍Vrhnje i donje viseće linije Ponekad ne morate da forsirate prelome stranica, ali želite da kontrolišete izlaz pasusa na granicama stranice.

Na primjer, ako posljednji red pasusa na trenutnoj stranici ne stane, posljednja dva reda tog pasusa će biti odštampana na sljedećoj stranici. To je zato što je svojstvo koje ovo kontrolira (udovice, tj. „gornji viseći redovi“) po defaultu postavljeno na 2. Ovo se može promijeniti.

P ( udovice: 4; )
Ako se dogodi druga situacija i samo jedan red pasusa stane na trenutnu stranicu, cijeli pasus će biti odštampan na sljedećoj stranici. Svojstvo odgovorno za donje viseće linije (siročad) je također postavljeno na 2 prema zadanim postavkama.

P(siročad: 3;)
Poenta gornjeg koda je da kako se cijeli pasus ne bi premotao na sljedeću stranicu, najmanje tri reda moraju stati na tekuću stranicu.

Da biste ovo bolje razumjeli, pogledajte primjer pripremljen pomoću CodePen-a. A evo i debug verzije istog primjera, prikladnije je testirati.

*, *:prije, *:poslije, *:prvo slovo, p:prvi red, div:prvi red, blok citat:prvi red, li:prvi red (pozadina: prozirna !važno; boja: #000 !važno; senka okvira: nijedna !važna; sjena teksta: nijedna !važno; )
Inače, CSS stilovi za štampanje su jedan od retkih izuzetaka gde je direktiva!important apsolutno normalna ;)

7. Uklanjanje nepotrebnog sadržaja Kako ne biste trošili mastilo, trebalo bi da uklonite sve nepotrebno sa štampane verzije stranice, poput ogromnih lepih slajdova, reklama, alata za navigaciju sajta i slično. Ovo se može učiniti postavljanjem svojstva prikaza na ništa za nepotrebne elemente. Sasvim je moguće da ćete naći za pravo da prikažete samo glavni sadržaj stranice i sakrijete sve ostalo:

Tijelo > *:ne(glavno) (prikaz: nema; )

8. Prikaz adresa veza Linkovi, kako se obično nalaze na web stranicama, potpuno su beskorisni kada se štampaju, osim ako čitalac papirne verzije dokumenta ne zna kuda vode.

Da biste prikazali adrese veza nakon njihovog tekstualnog prikaza, samo koristite sljedeći stil:

O: poslije ( sadržaj: " (" attr(href) ")"; )
Naravno, ovakvim pristupom će se „dešifrovati“ mnogo nepotrebnih stvari. Na primjer, relativne veze, apsolutne veze na istoj stranici kao i štampana stranica, sidrene veze itd. Kako ne biste zatrpali ispisanu stranicu, bilo bi bolje koristiti nešto poput ovoga:

A:not():after ( sadržaj: " (" attr(href) ")"; )
Izgleda ludo, naravno. Pa ću objasniti značenje ovog pravila na običnom engleskom: "Prikaži vrijednost atributa href pored svake veze koja ima atribut koji počinje s http, ali ne sadrži mywebsite.com."

9. Objašnjenje skraćenica Skraćenice u tekstu moraju biti postavljene u tag, a njihova objašnjenja moraju biti uključena u atribut title. Ako kratice formatirate na ovaj način, njihova se značenja vrlo lako mogu prikazati na odštampanoj stranici:

Abbr:after ( sadržaj: " (" attr(title) ")"; )

10. Prisilno štampanje pozadine Obično pretraživači, kada kreiraju stranicu za štampanje, ne prikazuju boju pozadine i pozadinske slike, osim ako to eksplicitno ne naznače. Međutim, ponekad je sve ovo potrebno odštampati. Ovdje će nam pomoći nestandardizirano svojstvo print-color-adjust, koje vam omogućava da poništite zadane postavke za neke pretraživače.

Zaglavlje ( -webkit-print-color-adjust: točno; print-color-adjust: točno; )

11. Medijski upiti Ako pišete medijske upite poput onog ispod, imajte na umu da CSS pravila u sličnih zahtjeva neće uticati na štampanu verziju stranice.

@medijski ekran i (min. širina: 48em) ( /* samo ekran */ )
Zašto je to tako? Stvar je u tome da se CSS pravila primjenjuju samo ako je vrijednost min-width 48em i ako je tip medija screen . Ako se riješite ovog medijskog upita od ključna riječ screen , tada će biti ograničen samo vrijednošću min-width.

@media (minimalna širina: 48em) ( /* svi tipovi medija */ )

12. Štampanje mapa Trenutne verzije Firefoxa i Chrome-a mogu štampati karte, ali, na primjer, Safari to ne može. Šta raditi prilikom štampanja kartica? Jedna od univerzalnih opcija je korištenje statičkih mapa umjesto dinamičkih.

Karta ( širina: 400px; visina: 300px; background-image: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format_resh&visual "); -webkit-print-color-adjust: točno; print-color-adjust: točno; )

13. QR kodovi Štampanje QR kodova koji sadrže važne linkove može značajno poboljšati upotrebljivost papirnih verzija web stranica. Evo članka iz The Smashing Magazina gdje možete pronaći korisni savjeti o ovoj temi. Jedan od njih je da se njihove adrese uvrste u obliku QR kodova na štampane stranice. Kao rezultat, korisnik, da bi otvorio stranicu sa koje je ispisan u pretraživaču, neće morati da ukuca svoju punu adresu na tastaturi.14. O štampanju neoptimiziranih stranica Istražujući temu štampanja web stranica, otkrio sam odličan alat, što vam omogućava da jednostavno pripremite neoptimizirane stranice za štampanje. Koristeći Printliminator