Przygotowanie strony HTML do drukowania za pomocą css

Często spotyka się na stronie link umożliwiający wydrukowanie danej podstrony. Uruchomienie drukowania, samo w sobie, jest niczym wielkim wystarczy użyć funkcji Javascript window.print(); dla zdarzenia onclick. Na przykład na HTML’owym tagu a.

 
    <a href="JavaScript:Void(0)" title="Wydrukuj stronę" onclick="window.print();">Wydrukuj stronę</a>

Problem może pojawić się gdy wydrukowana ma zostać tylko część strony – treść. W takiej sytuacji z pomocą przychodzi @media print { … } .

Wszystkie definicje klas, identyfikatorów, czy tagów zawarte w @media print { … } będą interpretowane przez przeglądarkę tylko w wersji podglądu wydruku. Poniższy przykład lepiej to zobrazuje. Zakładamy, że mamy bardzo prostą stronę składającą się z poziomego menu, lewego sidebara oraz bloku głównego z treścią, który chcemy wydrukować.

 
<html>
<body>
	<ul class="menu">
 
		<li><a href="#">Pierwszy link</a></li>
		<li><a href="#">Drugi link</a></li>
		<li><a href="#">Trzeci link</a></li>
		<li><a href="#">Czwarty link</a></li>
		<li><a href="#">Piaty link</a></li>
 
	</ul>
 
	<div>
 
		<div class="sidebar">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus tellus vitae sollicitudin faucibus. Morbi sed purus sit amet eros rhoncus aliquet ac et magna. Donec ultricies luctus arcu, ac ultrices turpis lacinia a. Mauris tempor et nulla sit amet aliquam. Maecenas scelerisque nisi id cursus accumsan. Nam vitae metus ac dolor tincidunt eleifend ac id diam. Fusce risus urna, dictum eget lorem id, pulvinar pulvinar leo.
		</div>
 
		<div class="content">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus tellus vitae sollicitudin faucibus. Morbi sed purus sit amet eros rhoncus aliquet ac et magna. Donec ultricies luctus arcu, ac ultrices turpis lacinia a. Mauris tempor et nulla sit amet aliquam. Maecenas scelerisque nisi id cursus accumsan. Nam vitae metus ac dolor tincidunt eleifend ac id diam. Fusce risus urna, dictum eget lorem id, pulvinar pulvinar leo.<br /><br />
 
			Vivamus nunc purus, posuere varius euismod eget, sodales eget ligula. Donec commodo, lorem non tincidunt tempus, lorem nunc elementum nisl, quis tristique sem nulla sed ipsum. Aenean gravida arcu a ultricies tempus. Curabitur pharetra, ligula sed accumsan consequat, orci ante accumsan nisi, id pretium purus erat in dui. Morbi ac aliquet felis. In rutrum felis sit amet lorem euismod, sed scelerisque lectus egestas. Cras elit turpis, adipiscing eget odio ut, cursus bibendum justo.<br /><br />
 
			Nullam ut justo in risus posuere posuere tempus id felis. Fusce ac enim sit amet enim vestibulum convallis. Proin pharetra risus velit, in vehicula lorem fermentum in. Ut elementum tellus felis, ac imperdiet ante hendrerit sed. Duis ut posuere orci. Nullam in mauris dui. Nam placerat, diam eu laoreet congue, libero lacus dictum turpis, dignissim dignissim enim sapien lacinia leo. Vivamus ac erat varius, aliquet orci ac, ornare mauris.
			<br />
			Cras lacus massa, hendrerit vitae lacus in, suscipit dapibus tortor. Cras porttitor risus et libero ultricies auctor. Morbi commodo ut tellus et euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi eleifend, nisi eget lacinia blandit, elit tellus commodo tortor, id gravida lacus urna vel sem. Proin tristique iaculis mi, at scelerisque dui hendrerit id. In hac habitasse platea dictumst. Sed eget scelerisque metus, rutrum ultricies felis. Curabitur id nibh in tortor ullamcorper cursus. Mauris mattis non felis sit amet mollis. Aenean interdum sed quam non tincidunt. Maecenas non adipiscing nisi.
		</div>
	<div style="clear: both;"></div>
	</div>
	<a href="JavaScript:Void(0)" class="print" title="Wydrukuj strone" onclick="window.print();">Wydrukuj strone</a>
</body>
</html>

Za układ elementów odpowiada prosty arkusz stylów

 
ul {
	list-style: none;
}
li {
	display: inline; 
	padding: 10px;
}
.sidebar {
	width: 25%; 
	float: left;
}
.content{
	width: 74%; 
	float: right;
}

Tak przygotowana strona zostanie wydrukowana w całości wraz z menu, sidebarem, nagłówkiem, czy linkiem do drukowania. Podgląd wydruku przedstawia poniższe zdjęcie:
Przechwytywanie

Przy tak prostej stronie wystarczy dodać display: none; dla kilku elementów, które mają być ukryte w wydruku, oraz ‘rozciągnąć’ tekst na całą szerokość kartki za pomocą width: 100%.

@media print {
	.sidebar, .menu, .info, .print {
		display: none;
	}
	.content {
		width: 100%;
	}
}

Podgląd wydruku po ukryciu kilku elementów na stronie, przedstawia poniższe zdjęcie oraz możesz zobaczyć wersję demo pod tym linkiem.
Przechwytywanie