CSS İle Print Alanının Belirlenmesi ve Page Break

• 25-11-2016
• Admin
• 8527 Okunma
• Paylaş
• Paylaş
• Paylaş

CSS style tagları arasına aşağıdaki kodları ekliyoruz.

@media print
{
body * { visibility: hidden; }
#yazdir * { visibility: visible; }
#yazdir { position: absolute; top: 40px; left: 30px; }
}
.break { page-break-before: always; }

Print alacağımız sayfamızın üst kısmına çekinmeden bir print ikonu koyabiliriz çünkü bu kısım yukarıdaki kod sayesinde gözükmeyecek.

<a href="javascript:window.print()">
<img alt="" src="print.gif" align="right" />
</a>

Şimdi yukarıdaki CSS kodu ile ilgili ;
Sayfanızda nereyi yazdırmak istiyorsanız yazdırmak istediğiniz alanı aşağıda örneği verildiği şekilde div tagı içine alınız.

bu kısım yazdırılmayacak
<div id="yazdir">
bu kısım yazdırılacak alandır
</div>

böylece “yazdir” tagi içinde kalanlar yazıcıdan çıkıyor olacak. Eğer bazı kısımların ikinci sayfada çıkmasını istersek aşağıdaki örnekteki gibi break class’ını kullanacağız

bu kısım yazdırılmayacak
<div id="yazdir">
bu kısım yazdırılacak alandır
ve birinci sayfasıdır
</div>
<p class='break'>
bu kısımda yazdırılacak ama ikinci sayfada çıkacak</div>
</p>

Break classını koyduğumuz yer artık bir sonraki sayfa olarak çıkar.