CSS'i HTML Ile C#'ta Responsive PDF'ler Icin Nasıl Kullanirim?

Dogru CSS Medya Tipini Secmek Neden Onemlidir?

IronPDF, HTML üzerinde PDF oluşturmadan önce, bir ekran stil dosyasini PDF olarak varsıyılan olarak hazirlayabilir. Bu, cunku baski stil dosyalari genellikle ekran muadillerine kiyasla daha az iyi belgelenmiş, kullanilmiş veya geliştirilmiştir. Ancak, bu medya tipleri arasindaki farki anlamak, profesyonel kalitede PDF üretimi icin önemlidir.

IronPDF'le CSS (Ekran & Baski) calışirken, ekran ve baski medya tipleri arasındaki secim, nihai PDF cikisinizi buyuk olcude etkiler. Ekran medya tipleri, etkileşimli ogeleri ve zengin gorusel dizaynları korurlar, baski medya tipleri ise iceriği kağıt tabanlı tüketim icin optimize eder.

CSS3, belirli CSS stillerinin yanlızca yazili belgelerde hazirlanmasina izin verirken, digerleri tarayıcılar icindir. IronPDF her ikisiyle de calışabilir, bu sizin HTML iceriğinizi PDF'e nasıl dönüştüreceginiz üzerinde tam kontrol sağlar. Bu esneklik, ister dijital raporlar oluşturun, ister yazdırılabilir faturalar ya da hibrit belgeler, PDF'lerinizin beklenen kullanım scenario'larının özel taleplerini karsiladıgından emin olur.

Baski ve Ekran CSS Medya Tipini Ne Zaman Kullanmalıyim?

HTML'nize baski stil dosyası oluşturup uygulayın: Mükemmel baski stil dosyasi oluşturmayı ve uygulamayı öğrenin..

Her CSS medya tipi farklı kullanım durumlarını hedefler. Hangisinin gereksinimiz icin en uygun oldugunu görmek icin hepsini deneyin. Bu kılavuzları göz önünde bulundurun:

Baski CSS Medya Tipini Şu Zaman Kullanın:

• Fiziksel baski icin amaçlanmış belgeler oluşturulurken
• Faturalar, raporlar veya resmi belgeler oluşturulurken
• Sayfalar arasında tekrar eden tablo basliklarina ihtiyaçınız varsa
• Mürekkep tasarrufu bir öncelikse
• Özel Kağıt Boyutu gereksinimleriyle çalışılırken

Ekran CSS Medya Tipi Şu Zaman Kullanın:

• Zengin görsel öğelerle birlikte etkileşimli PDF'ler oluşturulurken
• Web tasarımı estetiklerini PDF'de korurken
• Arka plan resimleri ve renklerini eklerken
• PDF'nin esas olarak ekranlarda görüntülenmesi bekleniyorsa
• HTML'nin responsive PDF dönüştürmeleriyle çalışırken

Ekran ve Baski Modları Arasındaki Görsel Farklar Nelerdir?

Yukarıdaki örnekler, aynı HTML iceriğinin farklı CSS medya tipi seçimlerine dayalı olarak nasıl farklı şekilde görüntülendiğini gösteriyor. Baski versiyonunun süsleyici resimleri ve simgeleri kaldırıp daha temiz, daha basılabilir bir belge oluşturduğunu, oysa ekran versiyonunun tüm görsel ögeleri dijital görüntüleme icin koruduğunu fark edin.

Neden Tablo Basliklari Sadece Ekran Modunda Bir Kere Beliriyor?

Birden çok sayfa kullanan HTML tablolarıyla uğraşırken, CssMediaType özelliğini PdfCssMediaType.Print olarak ayarlayın. Bu, uzatılmış her sayfanın üst kısmında tablo başlığının tekrarlanmasını sağlar. Buna karşılık, PdfCssMediaType.Screen yalnızca bir kez üstbilgi bastırması için Chrome'a talimat verir. Uzun veri tabloları içeren PDF Raporları oluştururken bu davranıs özellikle önemlidir.

Baskı medya türü, tarayıcıların sayfalandırma için kullandığı belirli CSS kurallarını etkinleştirir, bu kurallar arasında üstbilgi tekrarlanmasını sağlayan thead {display: table-header-group;} özelliği de bulunmaktadır. Bu özellik, okurlar çok sayfalı bir belgede gezinirken baglamı korumak icin hayati öneme sahiptir.

Yineleyen Baslıklar Icın Gereken HTML Yapısı Nedir?

Chrome'un tablo üstbilgisini algılamasını sağlamak için, onu bir <thead> etiketi içine alın. Let's render the 'tableHeader.html example of repeating table headers' HTML file to PDF to see the effect.

Iste önerilen HTML yapısı:

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

Tablo Baslık Yinelenmesini C#'da Nasıl Uygulayayım?

:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-responsive-css-table-header.cs

using IronPdf;
using IronPdf.Rendering;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400);

// Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableHeader.html");

pdf.SaveAs("tableHeader.pdf");

Imports IronPdf
Imports IronPdf.Rendering

Private renderer As New ChromePdfRenderer()

' Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400)

' Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("tableHeader.html")

pdf.SaveAs("tableHeader.pdf")

Tablo biçimlendirme seçenekleri icin, tablolardaki aralığı kontrol etmek icin Özel Kenar Boşlukları araştırın veya tabloların gereken yerlerde yeni sayfalarda başlamalarını sağlamak icin bir Sayfa Kesmesi uygulayın.

Son PDF Çıktısı Nasıl Bir Görünüme Sahip?