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

Sıradaki ders: Proje: Dashboard UI

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler