Kā jūs varat optimizēt lapas drukāšanai?

Lapas lapdrukai optimizēju, izmantojot CSS @media print. Tajā slēpju elementus, kas nav nepieciešami drukāšanai (navigāciju, kājenes, sānu panelus), mainu stilu, lai uzlabotu lasāmību (fonta lielumu, intervālus), noņemu fona attēlus un ēnas. Tāpat pievienoju lapas sadalījumu, izmantojot break-before, break-after, un pārvaldu orientāciju ar @page. Es varu izmantot īpašas klases, piemēram, .no-print, lai ātri slēptu elementus.

Šeit ir piemēri:

/* Elementu slēpšana, kas nav nepieciešami drukāšanai */
@media print {
  nav, kājenes, sānu {
    display: none;
  }
}

/* Izskata maiņa, lai uzlabotu lasāmību */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000; /* Melns teksts labākam kontrastam */
  }
  a {
    color: #000; /* Noņemot zilo krāsu saitēm */
    text-decoration: none;
  }
  /* URL pievienošana pēc teksta */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* Fona attēlu slēpšana */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Lapas sadalījuma pārvaldība */
@media print {
  h2 {
    break-before: page; /* Sākt jaunu lapu pirms katra h2 */
  }
}

/* Lapas orientācijas noteikšana */
@page {
  size: A4 portrait; /* vai landscape */
  margin: 1cm; /* malas */
}

Lai veiktu sarežģītāku pielāgošanu vai pievienotu informāciju (piemēram, lapas numurus, kolontitulus), var izmantot @page direktīvu. Jāņem vērā, ka dažas specifiskas stila īpašības (piemēram, position: fixed) var uzvesties neprognozējami drukājot un prasīt atsevišķas noteikšanas @media print kontekstā. Svarīgi ir pārbaudīt drukas rezultātu dažādās pārlūkprogrammās.