Özet - Yazdırılabilir rapor
Yazdırma stilleriyle yazdırılabilir rapor sayfası kurarsın.
Özet: Yazdırılabilir rapor
Bu özette yazdırılabilir bir rapor sayfasının tüm parçalarını bir araya getireceksin. Üç temel taş: @page ile sayfa boyutu ve kenar boşluğu, @media print ile yazdırmaya özel stiller, break-inside ile bölünmemesi gereken bloklar.
Rapor sayfası reklam alanını yazdırmadan atlar, tablolarını tek parça tutar ve kâğıt boyutunu standart A4'e sabitler. Her parçayı sırayla ekleyeceksin.
Uygulama Rapor iskeletini kur
Bir @page bildirimi yaz. size: A4, margin: 2cm olsun. Ayrıca @bottom-center kutusunda sayfa numarasını göster: content: counter(page). Tüm bildirimleri aynı @page bloğu içinde tanımla.
Örnek çözümü göster
/* rapor sayfası iskeleti */
@page {
size: A4;
margin: 2cm;
@bottom-center {
content: counter(page);
}
}Raporun yazdırma stilleri
İskelet kurulduktan sonra @media print bloğu içinde iki iyileştirme yaparsın. Reklam alanını display: none ile kâğıttan kaldırırsın; fatura tablosunu break-inside: avoid ile tek parça tutarsın.
Böylece okuyucu kâğıtta reklam görmez, tablo ise sayfa ortasında ikiye bölünmez. Rapor ekranda yine tüm öğeleriyle görünür.
Uygulama Reklamı gizle, tabloyu koru
Bir @media print bloğu yaz. İçinde iki bildirim olsun: .ad-banner için display: none ve .invoice-table için break-inside: avoid. Her iki seçici de @media print bloğu içinde yer alsın.
Örnek çözümü göster
/* yazdırma stilleri */
@media print {
.ad-banner {
display: none;
}
.invoice-table {
break-inside: avoid;
}
}Kendini test et
-
Reklam alanını yalnızca yazdırırken gizlemek için hangisi uygundur?
- @page { .ad { display: none; } }
- @media print { .ad { display: none; } }
- .ad { break-inside: avoid; }
- @page { size: A4; }
Cevabı göster
@media print { .ad { display: none; } } — Doğru. @media print bloğu içindeki display: none reklamı yalnızca yazdırırken gizler.
-
Özet kutusunu bölünmez yap
@media print { .summary-box { ____; } }Cevabı göster
@media print { .summary-box { break-inside: avoid; } }