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

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

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

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

Правило @media print:

@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;
	}
}

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

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

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

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

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

@media print {
	.wrapper {
		width: auto;
		margin: 0;
		padding: 0;
	}
}

По умолчанию браузеры не печатают 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;
	}
}

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

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

Пример вставки 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>'
			);
		}
	});
});

Еще один метод вставки 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>

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

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

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

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

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

<script>
window.onafterprint = window.history.back();
window.print();
</script>

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

<script>
window.onafterprint = window.close;
window.print();
</script>