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

Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге:

Неудачный пример версии для печати

Доступно три метода подключения CSS-стилей.

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

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

Правило @media print:

@media print {
	...
}
CSS

Третий метод – отдельная страница или шаблон, свёрстанные чисто под печать (без @media print), например так сделана печать писем в Яндекс.Почте. Такой метод существенно облегчает отладку.

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

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

В пикселях размеры лучше не указывать т.к. их количество зависит от заданного параметра 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;
}
CSS

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

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

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

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

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

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

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

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

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

@media print {
	.header, .footer, .banner {
		display: none;
	}
}
CSS

Другой вариант скрытия не нужного контента – в HTML-коде, добавить к скрываемым элементам класс noprint.

@media print {
	.noprint {
		display: none;
	}
}
CSS

Не стоить забывать о <div class="wrapper">...</div>, обычно для сайтов с фиксированным размером ему задана ширина, отступы и центрирование, поэтому при печати возможна обрезка контента с правого края, такие стили стоит обнулить.

@media print {
	.wrapper {
		width: auto;
		margin: 0;
		padding: 0;
	}
}
CSS
@media screen { 
	.element {
		display: none;
	} 
}

@media print{
	.element {
		display: block;
	} 
}
CSS

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

@media print{
	.header { 
		background-color: #eee;
		color: #000;
		-webkit-print-color-adjust: exact;
		color-adjust: exact;
	}
}
CSS

Уточнение: свойство не будет работать если цвет фона и шрифта слабоконтрастные.

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

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

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

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

Печать ссылок бесполезна т.к. будет не известно, куда они ведут. Можно добавить приписку URL рядом с анкором (исключая якорные ссылки).

@media print { 
	a[href^="http"]:after {
		content: " (" attr(href) ")";
	}
}
CSS

Пример вставки URL:

Будет очень удобно если на печатаной странице будет QR-код с ссылкой на сайт. Сгенерировать код можно с помощью сервиса «Google QR Codes» и вставить его с помощью JQuery.

$(function(){	
	$(window).bind('beforeprint', function(){ 
		if($("#print-qr").length == 0) {
			$('body').append(
				'<style>@media screen {#print-qr{display: none;}}</style>' + 
				'<p id="print-qr"><img src="https://chart.googleapis.com/chart?cht=qr&chs=200x200&choe=UTF-8&chld=H&chl=' + window.location.href + '"></p>'
			);
		}
	});
});
JS

Еще один метод вставки QR-кода через CSS, но он требует подставки URL текущей страницы через PHP.

<style>
@media print {
	body:after {
		content:url('http://chart.googleapis.com/chart?cht=qr&chs=200x200&choe=UTF-8&chld=H&chl=URL_СТРАНИЦЫ');
		display: inline-block;
		width: 200px;
		height: 200px;
	}
}
</style>
HTML

В JS, печать запускается методом window.print().

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

<a href="#" class="action-print">Распечатать</a>

<script>
$(function($){
	$(".action-print").click(function(){
		window.print();
		return false;
	});
});
</script>
HTML

Если применяется отдельная страница, то при её открытии запускается диалог печати, после пользователь возвращается на исходную.

<script>
window.print();
setTimeout(function(){
	window.history.back()
}, 500);
</script>
HTML
08.04.2020
26776

Комментарии

, чтобы добавить комментарий.

Другие публикации

Мануал по созданию и форматированию excel файлов в PHPExcel
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
68390
+22
HTTP коды
Список основных кодов состояния HTTP, без WebDAV.
6348
+1
Получить фото из Instagram без API
Так как Instagram и Fasebook ограничили доступ к API, а фото с открытого аккаунта всё же нужно периодически получать и...
19456
+6
Как изменить Favicon сайта из JavaScript
Для замены Favicon во вкладке браузера достаточно у элемента link rel="icon" в атрибуте href указать путь до нового...
4498
+2
Модальные окна на Fancybox 3
Fancybox 3 плагин галерей и модельных окон, в отличии от второй версии существенно изменилась скорость работы, дизайн и немного API, далее подробнее о вызове модальных окон.
17435
0
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
38580
+4