Kā rīkoties ar lappušu pārtraukumiem, drukājot lielu HTML tabulu (8)

Man ir projekts, kurā ir jāizdrukā HTML tabula ar daudzām rindām.

Mana problēma ir tā, kā tabula tiek izdrukāta vairākās lapās. Dažreiz tas pārgriež līniju uz pusēm, padarot to nelasāmu, jo viena puse atrodas lapas malā, bet pārējā daļa tiek drukāta nākamās lapas augšpusē.

Vienīgais iespējamais risinājums, ko es varu iedomāties, ir tabulas vietā izmantot sarežģītus DIV un nepieciešamības gadījumā piespiest lapu pārtraukumus... bet pirms visu izmaiņu veikšanas es domāju, ka varētu šeit pajautāt agrāk.

Izmantojiet šos CSS rekvizītus:

Lapas pārtraukums-pēc lappuses pārtraukums-pirms

Piemēram:

@media print ( tabula (lappuses pārtraukums pēc:vienmēr) ) ....

Neviena no šeit sniegtajām atbildēm man nederēja pārlūkā Chrome. AAverin vietnē GitHub izveidoja noderīgu Javascript šim nolūkam, un tas man darbojās:

Vienkārši pievienojiet kodam js un pievienojiet tabulai splitForPrint klasi, un tā glīti sadalīs tabulu vairākās lapās un katrai lapai pievienos tabulas galveni.

Piezīme. Izmantojot lapas pārtraukumu: vienmēr tagam, tas izveido lapas pārtraukumu pēc tabulas pēdējā bita, katru reizi izveidojot pilnīgi tukšu lapu! Lai to labotu, vienkārši mainiet to uz page-break-after: auto. Tas saplīsīs pareizi un neradīs papildu tukšu lapu.

@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 ) ) ....

Pieņemtā atbilde man nedarbojās visās pārlūkprogrammās, bet css ievērošana man darbojās:

Tr ( displejs: tabulas rindas grupa; lapas pārtraukums iekšā: izvairīties; lappuses pārtraukums pēc: automātiski; )

HTML struktūra bija:

...

Manā gadījumā bija dažas papildu problēmas ar thead tr , taču tas atrisināja sākotnējo tabulas rindu ierobežošanas problēmu.

Galvenes problēmu dēļ es saņēmu:

#theTable td * (lappuses pārtraukums iekšā:izvairās; )

Tas neapturēja rindas no pārrāvuma; tikai katras šūnas saturs.

Es beidzu ar @vicenteherrera pieeju ar dažiem uzlabojumiem (kas var būt bootstrap 3).

Būtībā; mēs nevaram izjaukt tr s vai td s, jo tie nav bloka līmeņa elementi. Tāpēc mēs katrā ievietojam div un piemērojam mūsu lapas pārtraukuma* noteikumus. Otrkārt, mēs pievienojam dažus polsterējumus katra no šiem divelementiem, lai kompensētu jebkādus stila artefaktus.

@media print ( /* izvairieties no tr" pārgriešanas uz pusēm */ th div, td div ( margin-top:-8px; padding-top: 8px; page-break-inside:avoid; ) ) $(document).ready (function())( // Aptiniet katru tr un td saturu div // (todo: pievienojiet loģiku, lai mēs to darītu tikai drukājot) $("table tbody th, table tbody td").wrapInner(" " ) ))

Papildinājumu labojumi un pielāgojumi bija nepieciešami, lai kompensētu zināmu nervozitāti, kas tika ieviesta (pieņemu, ka no bootstrap). Es neesmu pārliecināts, vai es piedāvāju jaunu risinājumu no citām atbildēm uz šo jautājumu, bet varbūt tas kādam noderēs.

Es nesen atrisināju šo problēmu ar labu risinājumu.

AvoidBreak (apmale: 2 pikseļi cieta; lapas pārtraukuma iekšpusē: izvairieties; )

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

Darbojas kā šarms!

Es pārbaudīju daudzus risinājumus, un neviens nedarbojās labi.

Tāpēc es izmēģināju nelielu triku, un tas darbojas:

tpēda ar stilu: pozīcija: fiksēta; apakšā: 0 pikseļi; pozīcija: fiksēta; apakšā: 0 pikseļi; tiek novietots pēdējās lapas apakšā, bet, ja kājene ir pārāk augsta, tā pārklājas ar tabulas saturu.

tfoot tikai ar: displeju: tabula-kājenes-grupa; nepārklājas, bet nav pēdējās lapas apakšā...

Uzliksim divas pēdas:

TFOOT.placer ( displejs: tabula-kājene-grupa; augstums: 130px; ) TFOOT.contenter ( displejs: tabula-kājene-grupa; pozīcija: fiksēta; apakšā: 0px; augstums: 130px; ) jūsu garais teksts vai augstais attēls šeit

Viena rezervē vietu lapās, kas nav pēdējās, bet otra jūsu personīgajā kājenē.

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

virsraksts

piezīmes

x

x

x

Kā rīkoties ar lappušu pārtraukumiem, drukājot lielu HTML tabulu (8)

Man ir projekts, kurā ir jāizdrukā HTML tabula ar daudzām rindām.

Mana problēma ir tā, kā tabula tiek izdrukāta vairākās lapās. Dažreiz tas pārgriež līniju uz pusēm, padarot to nelasāmu, jo viena puse atrodas lapas malā, bet pārējā daļa tiek drukāta nākamās lapas augšpusē.

Vienīgais iespējamais risinājums, ko es varu iedomāties, ir tabulas vietā izmantot sarežģītus DIV un nepieciešamības gadījumā piespiest lapu pārtraukumus... bet pirms visu izmaiņu veikšanas es domāju, ka varētu šeit pajautāt agrāk.

Izmantojiet šos CSS rekvizītus:

Lapas pārtraukums-pēc lappuses pārtraukums-pirms

Piemēram:

@media print ( tabula (lappuses pārtraukums pēc:vienmēr) ) ....

Neviena no šeit sniegtajām atbildēm man nederēja pārlūkā Chrome. AAverin vietnē GitHub izveidoja noderīgu Javascript šim nolūkam, un tas man darbojās:

Vienkārši pievienojiet kodam js un pievienojiet tabulai splitForPrint klasi, un tā glīti sadalīs tabulu vairākās lapās un katrai lapai pievienos tabulas galveni.

Piezīme. Izmantojot lapas pārtraukumu: vienmēr tagam, tas izveido lapas pārtraukumu pēc tabulas pēdējā bita, katru reizi izveidojot pilnīgi tukšu lapu! Lai to labotu, vienkārši mainiet to uz page-break-after: auto. Tas saplīsīs pareizi un neradīs papildu tukšu lapu.

@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 ) ) ....

Pieņemtā atbilde man nedarbojās visās pārlūkprogrammās, bet css ievērošana man darbojās:

Tr ( displejs: tabulas rindas grupa; lapas pārtraukums iekšā: izvairīties; lappuses pārtraukums pēc: automātiski; )

html struktūra bija šāda:

...

Manā gadījumā bija dažas papildu problēmas ar thead tr , taču tas atrisināja sākotnējo tabulas rindu ierobežošanas problēmu.

Galvenes problēmu dēļ es saņēmu:

#theTable td * (lappuses pārtraukums iekšā:izvairās; )

Tas neapturēja rindas no pārrāvuma; tikai katras šūnas saturs.

Es beidzu ar @vicenteherrera pieeju ar dažiem uzlabojumiem (kas var būt bootstrap 3).

Būtībā; mēs nevaram izjaukt tr s vai td s, jo tie nav bloka līmeņa elementi. Tāpēc mēs katrā ievietojam div un piemērojam mūsu lapas pārtraukuma* noteikumus. Otrkārt, mēs pievienojam dažus polsterējumus katra no šiem divelementiem, lai kompensētu jebkādus stila artefaktus.

@media print ( /* izvairieties no tr" pārgriešanas uz pusēm */ th div, td div ( margin-top:-8px; padding-top: 8px; page-break-inside:avoid; ) ) $(document).ready (function())( // Aptiniet katru tr un td saturu div // (todo: pievienojiet loģiku, lai mēs to darītu tikai drukājot) $("table tbody th, table tbody td").wrapInner(" " ) ))

Papildinājumu labojumi un pielāgojumi bija nepieciešami, lai kompensētu zināmu nervozitāti, kas tika ieviesta (pieņemu, ka no bootstrap). Es neesmu pārliecināts, vai es piedāvāju jaunu risinājumu no citām atbildēm uz šo jautājumu, bet varbūt tas kādam noderēs.

Es nesen atrisināju šo problēmu ar labu risinājumu.

AvoidBreak (apmale: 2 pikseļi cieta; lapas pārtraukuma iekšpusē: izvairieties; )

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

Darbojas kā šarms!

Es pārbaudīju daudzus risinājumus, un neviens nedarbojās labi.

Tāpēc es izmēģināju nelielu triku, un tas darbojas:

tpēda ar stilu: pozīcija: fiksēta; apakšā: 0 pikseļi; pozīcija: fiksēta; apakšā: 0 pikseļi; tiek novietots pēdējās lapas apakšā, bet, ja kājene ir pārāk augsta, tā pārklājas ar tabulas saturu.

tfoot tikai ar: displeju: tabula-kājenes-grupa; nepārklājas, bet nav pēdējās lapas apakšā...

Uzliksim divas pēdas:

TFOOT.placer ( displejs: tabula-kājene-grupa; augstums: 130px; ) TFOOT.contenter ( displejs: tabula-kājene-grupa; pozīcija: fiksēta; apakšā: 0px; augstums: 130px; ) jūsu garais teksts vai augstais attēls šeit

Viena rezervē vietu lapās, kas nav pēdējās, bet otra jūsu personīgajā kājenē.

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

virsraksts

piezīmes

x

x

x

Šis tvīts mani aizrāva. Es pēkšņi sapratu, ka vairs nevaru atcerēties, kad optimizēju tīmekļa lapas drukāšanai vai pat pārbaudīju, kā tās tiek izvadītas uz printeri.

Tīmekļa izstrādes galvenais uzsvars tiek likts uz elektroniskās versijas vietnes. Lapas ir jāpārbauda vairākās pārlūkprogrammās, jātestē uz dažādu izmēru logiem... Kam rūp printeri? Vai varbūt es aizmirsu par drukas stiliem, jo ​​es pats reti izgatavoju lapu papīra kopijas. Lai kā arī būtu, es jutu, ka situācija steidzami jālabo.

Tīmekļa lapas drukātajai versijai ir tādas pašas pastāvēšanas tiesības kā elektroniskajai versijai. Un, ja mēs cenšamies padarīt mūsu materiālus pēc iespējas pieejamākus, mums nevajadzētu atstāt novārtā papīra materiālus. Turklāt jums nevajadzētu izteikt pieņēmumus par lietotājiem un viņu uzvedību. Cilvēki joprojām drukā tīmekļa lapas ar printeriem. Vienkārši padomājiet par rakstiem vai emuāra ziņām, lapām ar receptēm, kontaktinformāciju, norādēm vai ierakstiem. Agrāk vai vēlāk kāds noteikti mēģinās izdrukāt kaut ko, ko jūs ievietojāt internetā.

Lūk, ko Heidons Pikerings, grāmatas “Inclusive Design Patterns” autors, saka: “Es ilgu laiku neesmu izmantojis mājas printerus. Lieta ir tāda, ka man rodas sajūta, ka tie saplīst apmēram desmit minūtes pēc drukāšanas sākuma. Bet es neesmu viss. ”

Ja tagad saprotat, ka, tāpat kā es, neesat pievērsis pietiekami daudz uzmanības drukas stiliem, es ceru, ka mans stāsts jums noderēs un palīdzēs ātri atsvaidzināt atmiņu. Un, ja jūs nekad neesat optimizējis tīmekļa lapas printeriem, mana nelielā noderīgo CSS triku kolekcija palīdzēs jums sākt darbu.

1. CSS drukas stilu izmantošana Labākais veids, kā savā lapā iekļaut drukas stilus, ir galvenajā CSS failā deklarēt @media kārtulu.

Pamatteksts ( fonta izmērs: 18 pikseļi; ) @media print ( /* drukas stili tiks parādīti šeit */ pamatteksts ( fonta izmērs: 28 pikseļi; ) )
Varat arī ievietot drukāšanas stilus atsevišķā failā un iekļaut tos HTML, taču, izmantojot šo pieeju, lapas ielādes laikā būs nepieciešams papildu pieprasījums.

2. Testēšana Kā novērtēt izskats tīmekļa lapa sagatavota drukāšanai? Ikvienam ir skaidrs, ka likt to uz papīra pēc katras stila maiņas tā nav Labākais lēmums. Par laimi, pārlūkprogrammas iespējas ir pilnīgi pietiekamas, lai “bez papīra” pārbaudītu lapu drukātās versijas.

Atkarībā no pārlūkprogrammas varat eksportēt lapu PDF formātā, izmantojot funkciju priekšskatījums vai pat atkļūdot lapu tieši tīmekļa pārlūkprogrammā.

Lai pārlūkprogrammā Firefox atkļūdotu drukas stilus, atveriet izstrādātāju paneli, izmantojot īsinājumtaustiņu Shift + F2 vai izpildot izvēlnes komandu Izstrādāt → Izstrādātāju panelis. Ienāc komandrinda kas atrodas loga apakšā, šādi: multivides emulācijas drukāšana , ierakstu aizpildot, nospiežot taustiņu Enter . Līdz lapas aizvēršanai vai atsvaidzināšanai aktīvā cilne darbosies tā, it kā tās apdrukājamā materiāla veids būtu drukāts.

Drukas emulācija pārlūkprogrammā Firefox

Arī pārlūkam Chrome ir līdzīga funkcija. Atveriet izstrādātāja rīkus, kuriem operētājsistēmā MacOS varat izmantot taustiņu kombināciju CMD + Opt + I, operētājsistēmā Windows - Ctrl + Shift + I vai izpildīt izvēlnes komandu Papildu rīki→ Izstrādātāja rīki. Pēc tam atveriet renderēšanas paneli. Viens veids, kā to izdarīt, ir nospiest Esc, lai atvērtu paneli Console, un pēc tam izmantot izvēlni, lai atvērtu Rendering paneli. Renderēšanas panelī iestatiet karogu Emulēt CSS multividi un atlasiet Drukāt.

Drukas emulācija pārlūkā Chrome

Vairāk par tīmekļa lapu drukāto versiju testēšanu varat lasīt vietnē StackOverflow.

3. Absolūtās mērvienības Absolūtās mērvienības nav īpaši piemērotas lapu ekrāna versijām, bet drukāšanai tās ir tieši tas, kas jums nepieciešams. Drukas stilos tas ir pilnīgi droši, turklāt ieteicams izmantot absolūtās mērvienības, piemēram, cm, mm, in, pt vai pc.

Sadaļa (mala-apakša: 2cm;)

4. Lapas rekvizīti Varat izmantot @page kārtulu, lai kontrolētu lapas rekvizītus, piemēram, to lielumu, orientāciju un piemales. Tas ir ļoti noderīgi, piemēram, ja jums ir nepieciešams, lai visām izdrukātajām lapām būtu vienādas piemales.

@media print ( @lappuse ( piemale: 1cm; ) )
Noteikums @page ir daļa no Paged Media Module standarta, kas piedāvā daudzas lieliskas lietas, piemēram, pirmās lapas atlasi drukāšanai, pielāgošanu tukšas lapas, pozicionēšanas elementi lapas stūros un . To var izmantot pat grāmatu sagatavošanai drukāšanai.

5. Lapu pārtraukumu pārvaldīšana Tā kā drukātās lapas, atšķirībā no tīmekļa lapām, nav bezgalīgas, tīmekļa lapu saturs agri vai vēlu saplīst uz vienas papīra lapas un turpinās nākamajā. Ir pieci rekvizīti, lai kontrolētu lappuses pārtraukumus: Lapas pārtraukums pirms elementa Ja vēlaties, lai elements vienmēr tiktu rādīts lapas sākumā, varat piespiest lapas pārtraukumu pirms tā, izmantojot rekvizītu lapas pārtraukums pirms.

Sadaļa ( lappuses pārtraukums pirms: vienmēr; )

▍Lapas pārtraukums pēc elementa Rekvizīts lappuses pārtraukums pēc elementa ļauj iestatīt piespiedu lappuses pārtraukumu aiz elementa. Izmantojot šo īpašību, jūs varat arī novērst lūzumu.

H2 (lappuses pārtraukums pēc: vienmēr; )

▍Pārtraukt lapu elementā Rekvizīts page-break-inside ir ļoti noderīgs, ja nepieciešams izvairīties no elementa sadalīšanas divās lapās.

Ul (lappuses pārtraukums iekšā: izvairīties; )

▍Augšējās un apakšējās nokarošās līnijas Dažkārt jums nav jāpiespiež lappušu pārtraukumi, bet jūs vēlaties kontrolēt rindkopu izvadi pie lappušu robežām.

Piemēram, ja pašreizējās lapas rindkopas pēdējā rindiņa neietilpst, nākamajā lapā tiks izdrukātas šīs rindkopas pēdējās divas rindiņas. Tas ir tāpēc, ka rekvizīts, kas to kontrolē (widows, t.i., “augšējās piekārtās rindas”), pēc noklusējuma ir iestatīts uz 2. To var mainīt.

P (atraitnes: 4;)
Ja rodas cita situācija un tikai viena rindkopas rindiņa ietilps pašreizējā lappusē, visa rindkopa tiks drukāta nākamajā lapā. Īpašums, kas ir atbildīgs par apakšējām piekārtajām līnijām (bāreņiem), arī pēc noklusējuma ir iestatīts uz 2.

P(bāreņi: 3;)
Iepriekš minētā koda būtība ir tāda, ka, lai visa rindkopa netiktu ietīta nākamajā lapā, pašreizējā lapā jāietilpst vismaz trim rindām.

Lai to labāk izprastu, apskatiet piemēru, kas sagatavots, izmantojot CodePen. Un šeit ir tā paša piemēra atkļūdošanas versija, to ir ērtāk pārbaudīt.

*, *:pirms, *:pēc, *:pirmais burts, p:first-line, div:first-line, blockquote:first-line, li:first-line ( fons: caurspīdīgs !svarīgi; krāsa: #000 !svarīgi; lodziņa ēna: nav !svarīga; teksta ēna: nav !svarīga; )
Starp citu, CSS stili drukāšanai ir viens no retajiem izņēmumiem, kur!important direktīva ir absolūti normāla ;)

7. Nevajadzīgā satura noņemšana Lai netērētu tinti, no lapas drukātās versijas jāizņem viss nevajadzīgais, piemēram, milzīgi skaisti slaidi, reklāma, vietnes navigācijas rīki un tamlīdzīgi. To var izdarīt, iestatot displeja rekvizītu uz None nevajadzīgiem elementiem. Pilnīgi iespējams, ka jums būs pareizi parādīt tikai lapas galveno saturu un slēpt visu pārējo:

Body > *:not(main) (displejs: nav; )

8. Saites adrešu parādīšana Saites, kā tās parasti ir atrodamas tīmekļa lapās, drukātas ir pilnīgi bezjēdzīgas, ja vien dokumenta papīra versijas lasītājs nezina, kur tās ved.

Lai parādītu saišu adreses pēc to teksta attēlojuma, izmantojiet šādu stilu:

A:after ( saturs: " (" attr(href) ")"; )
Protams, ar šo pieeju daudzas nevajadzīgas lietas tiks “atšifrētas”. Piemēram, relatīvās saites, absolūtās saites tajā pašā vietnē, kur drukātā lapa, enkura saites un tā tālāk. Lai drukātā lapa netiktu pārblīvēta, labāk būtu izmantot kaut ko līdzīgu:

A:not():after ( saturs: " (" attr(href) ")"; )
Tas, protams, izskatās traki. Tāpēc es paskaidrošu nozīmi no šī noteikuma vienkāršā angļu valodā: "Parādīt atribūta href vērtību blakus katrai saitei, kurai ir atribūts, kas sākas ar http, bet nesatur mywebsite.com."

9. Saīsinājumu skaidrojums Saīsinājumi tekstā jāievieto tagā, un to skaidrojumi jāiekļauj virsraksta atribūtā. Ja jūs formatējat saīsinājumus šādā veidā, to nozīmes ir ļoti viegli parādīt drukātā lapā:

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

10. Fona piespiedu drukāšana Parasti pārlūkprogrammas, veidojot lapu drukāšanai, nerāda fona krāsu un fona attēli, ja vien tas nav skaidri norādīts. Tomēr dažreiz tas viss ir jādrukā. Šeit mums palīdzēs nestandartizētais drukas krāsu pielāgošanas rekvizīts, kas ļauj ignorēt dažu pārlūkprogrammu noklusējuma iestatījumus.

Header ( -webkit-print-color-adjust: precīzs; print-color-adjust: precīzs; )

11. Multivides vaicājumi Ja rakstāt tādus multivides vaicājumus kā tālāk, ņemiet vērā, ka CSS noteikumi līdzīgi lūgumi neietekmēs lapas drukāto versiju.

@media ekrāns un (min-platums: 48em) ( /* tikai ekrāns */ )
Kāpēc tas tā ir? Lieta tāda, ka CSS noteikumi tiek lietoti tikai tad, ja minimālā platuma vērtība ir 48em un ja multivides veids ir ekrāns . Ja jūs atbrīvosities no šī multivides vaicājuma no atslēgvārds ekrāns , tad to ierobežos tikai minimālā platuma vērtība.

@media (min-width: 48em) ( /* visi multivides veidi */ )

12. Karšu drukāšana Pašreizējās Firefox un Chrome versijas var drukāt kartes, bet, piemēram, Safari to nevar izdarīt. Ko darīt, drukājot kartes? Viena no universālajām iespējām ir izmantot statiskas kartes, nevis dinamiskas.

Karte ( platums: 400 pikseļi; augstums: 300 pikseļi; fona attēls: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&fffruat_re "); -webkit-print-color-adjust: precīzs; print-color-adjust: precīzs; )

13. QR kodi Izdrukājot QR kodus, kas satur svarīgas saites, var ievērojami uzlabot tīmekļa lapu papīra versiju lietojamību. Šeit ir gabals no The Smashing Magazine, kur jūs varat atrast noderīgi padomi par šo tēmu. Viens no tiem ir iekļaut viņu adreses QR kodu veidā uz drukātām lapām. Rezultātā lietotājam, lai pārlūkprogrammā atvērtu lapu, no kuras veikta izdruka, nebūs jāievada tā pilna adrese uz tastatūras.14. Par neoptimizēto lapu drukāšanu Pētot tīmekļa lapu drukāšanas tēmu, atklāju lielisks rīks, kas ļauj ērti sagatavot neoptimizētas lapas drukāšanai. Izmantojot Printliminator