Печать HTML страниц

Подключение CSS

Специальный CSS-файл:

<link media="print" rel="stylesheet" href="/css/print.css">

Правило @media print:

@media print {
  ...
}

Размер страницы

Лист в формате А4 имеет размер 210x297 мм, его можно указать:

@media print {
  html, body {
    height: 297mm;
    width: 210mm;
  }
}

В пикселях размеры лучше не указывать т.к. их количество зависит от заданного параметра DPI:

• при dpi=75, А4 имеет 877×620 px
• при dpi=150, А4 имеет 1754×1240 px
• при dpi=300, А4 имеет 3508×2480 px

Поля страницы

В целях экономии бумаги лучше использовать минимальные поля – 10 мм по краям и 20 мм слева для возможности брушеровки.

@page {
  margin: 10mm 10mm 10mm 20mm;
}

Поля по ГОСТ Р 6.30-2003 (оформление документов):

@page {
  margin: 20mm 10mm 20mm 20mm;
}

По ГОСТ 7.32-2017 (научные работы, рефераты):

@page {
  margin: 20mm 15mm 20mm 30mm;
}

Удаление лишних стилей

Тени и другие эффекты дизайна лучше убрать, также следует установить черный цвет шрифта.

@media print {
  *, *:before, *:after {
    color: #000;
    box-shadow: none;
    text-shadow: none;
  }
}

Размер шрифта

Если на сайте размер шрифтов указан в пикселях, то при печати размер будет больше чем на экране. Поэтому нужно выставить новые значения:

@media print {
  html, body {
    font-size: 14px;
  }
  h1 {
    font-size: 24px;
  }
  h2 {
    font-size: 20px;
  }
  h3 {
    font-size: 18px;
  }
}

Печать фона background

По умолчанию браузеры не печатают background у элементов, но его можно пустить на печать принудительно c помощью свойства -webkit-print-color-adjust: exact; и нового color-adjust: exact;.

@media print{
  * {
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
}

Разрывы страниц

В CSS доступно управление переносами, соответственно для списков и таблиц нужно запретить переносы:

@media print{
  ul, ol, table {
    page-break-inside: avoid;
  }
}

Если требуется принудительно сделать перенос после элемента:

@media print{
  article {
    page-break-inside: always;
  }
}

Запуск печати

В JS, печать запускается методом window.print(). Возможны следующие варианты:

Запуск печати по клику на ссылку:

window.print();
return false;

Следующий вариант – пользователь переходит на следующую страницу, где сразу начинается печать, после пользователь возвращается на исходную.

window.onafterprint = window.history.back();
window.print();

И последний вариант – печать происходит в отдельной вкладке браузера, после печати она автоматически закрывается.

window.onafterprint = window.close;
window.print();