Как напечатать HTML со стилем

Несколько советов по печати из браузера на принтер или в документ PDF с помощью CSS


Несмотря на то, что мы все чаще смотрим на наши экраны, печать все еще актуальна.

Даже с сообщениями в блогах. Я помню, как однажды в 2009 году я встретил человека, который сказал мне, что он заставил своего личного помощника печатать каждое сообщение в блоге, которое я опубликовал (да, я какое-то время тупо смотрел). Определенно неожиданно.

Мой основной вариант использования для изучения печати обычно - это печать в формате PDF. Я мог бы создать что-нибудь в браузере, и я хочу сделать это доступным в формате PDF.

Браузеры делают это очень просто: Chrome по умолчанию имеет значение «Сохранить» при попытке распечатать документ, а принтер недоступен, а в Safari есть специальная кнопка в строке меню:

Safari Export PDF

Некоторые общие вещи, которые вы, возможно, захотите сделать при печати, - это скрыть некоторые части документа, возможно, нижний колонтитул, что-то в заголовке, боковой панели.

Возможно, вы захотите использовать для печати другой шрифт, что вполне допустимо.

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

<link rel="stylesheet"
      src="print.css"
      type="text/css"
      media="print" />

CSS @media print

Альтернативой предыдущему подходу являются медиа-запросы. Все, что вы добавляете в этот блок:

@media print {
  /* ... */
}

будет применяться только к печатным документам.

HTML хорош благодаря ссылкам. Он не зря называется гипертекстом. При печати мы можем потерять много информации, в зависимости от содержимого.

CSS предлагает отличный способ решить эту проблему, отредактировав контент, добавив ссылку после<a>текст тега, используя:

@media print {
    a[href*='//']:after {
        content:" (" attr(href) ") ";
        color: $primary;
    }
}

Я нацеленa[href*='//']сделать это только для внешних ссылок. У меня могут быть внутренние ссылки для навигации и внутреннего индексирования, что в большинстве случаев будет бесполезно. Если вы также хотите, чтобы распечатывались внутренние ссылки, просто выполните:

@media print {
    a:after {
        content:" (" attr(href) ") ";
        color: $primary;
    }
}

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

Вы можете добавить поля на каждую страницу.cmили жеin- хороший аппарат для печати на бумаге.

@page {
    margin-top: 2cm;
    margin-bottom: 2cm;
    margin-left: 2cm;
    margin-right: 2cm;
}

@pageтакже можно использовать для таргетинга только на первую страницу, используя@page :first, или только левую и правую страницы, используя@page :leftи@page: right.

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

Возможно, вы захотите добавить разрыв страницы после некоторых элементов или перед ними. Использоватьpage-break-afterиpage-break-before:

.book-date {
    page-break-after: always;
}

.post-content { page-break-before: always; }

Эти свойствапринимать самые разные ценности.

Не разбивайте изображения посередине

Я испытал это с Firefox: изображения по умолчанию обрезаются посередине и продолжают на следующей странице. Это также может случиться с текстом.

Использовать

p {
  page-break-inside: avoid;
}

и оберните свои изображения вpтег. Таргетингimgпрямо в моих тестах не работало.

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

Размер PDF

При попытке распечатать более 400 страниц PDF с изображениями в Chrome изначально был получен файл размером более 100 МБ, хотя общий размер изображений был не таким большим.

Я пробовал использовать Firefox и Safari, и размер был меньше 10 МБ.

После нескольких экспериментов выяснилось, что у Chrome есть 3 способа распечатать HTML в PDF:

  • ❌ Не печатайте его с помощью системного диалога.
  • ❌ Не нажимайте «Открыть PDF в режиме предварительного просмотра»
  • ✅ Вместо этого нажмите кнопку «Сохранить», которая появляется в диалоговом окне печати Chrome.

The right way to print in Chrome

Это создает PDF-файл намного быстрее, чем два других способа, и имеет гораздо меньший размер.

Отладка печатной презентации

Chrome DevTools предлагает способы имитации макета печати:

Enable Chrome DevTools Rendering

Когда панель откроется, измените эмуляцию рендеринга наprint:

Change the render to print

Скачать мою бесплатнуюСправочник CSS


Больше руководств по css: