HTML Gösterim Ayarları

import {PdfDocument, WaitForType, CssMediaType, FitToPaperModes, PdfPaperOrientation, PaperSizeUnit} from "@ironsoftware/ironpdf";

(async () => {
    // Many rendering options to use to customize!
    const options = {
        paperSize: {
            unit: PaperSizeUnit.Inch,
            width: 12.5,
            height: 20,
        },
        printHtmlBackgrounds: true,
        paperOrientation: PdfPaperOrientation.Landscape,
        title: "My PDF Document Name",
        waitFor: {
            type: WaitForType.RenderDelay,
            maxWaitTime: 50, // in milliseconds
        },
        cssMediaType: CssMediaType.Screen,
        fitToPaperMode: FitToPaperModes.FitToPage,
        createPdfFormsFromHtml: true,

        // Supports margin customization
        margin: {
            top: 40, // millimeters
            left: 20, // millimeters
            right: 20, // millimeters
            bottom: 40, // millimeters
        },

        // Can set FirstPageNumber if you have a cover page
        firstPageNumber: 1, // use 2 if a cover page will be appended
    };

    // Render HTML page to PDF
    const pdf = await PdfDocument.fromUrl("https://angular.io/", { renderOptions: options });
    
    // Save the PDF
    await pdf.saveAs("my-content.pdf");
})();

HTML Gösterim Ayarları

HTML dizgelerden, dosyalardan veya web URL'lerinden buradan render yaparken birçok render seçeneği yapılandırılabilir. Yukarıda gösterilen ayarlar, ayarlanabilir ölçüm birimleriyle özelleştirilmiş kağıt boyutu, HTML arka planını etkinleştirme, sayfa yönlendirme, belge başlığı, render sürecini geciktirme, CSS medya türünü belirtme, kağıt modunu seçme, düzenlenebilir form alanları oluşturma, kenar boşluklarını özelleştirme ve sayfa numaraları eklemeyi içerir.

CSS medya türleri "ekran" ve "yazdırma" direktifleri, stilin HTML belgelere hangi ortamda görüntüleneceğine veya çıktı alacağına göre nasıl uygulanacağını belirtir. "Ekran" medya türü olarak seçildiğinde, CSS kurallarının ekran görüntüleme için tasarlandığını belirtir, renkler ve düzenler dijital ekranlar için optimize edilir. Tersine, "yazdırma" seçildiğinde, tarayıcıların yazdırılmış belgeler için uyarlanmış stiller uygulamasını sağlar, HTML içeriğinin fiziksel medyaya yazdırıldığında okunabilirliğini ve uygun biçimlendirmesini sağlar. Bazı arka plan görüntülerini görüntülemek için zaman zaman CSS medya türünü "ekran" olarak ayarlamak gereklidir.

Render sürecindeki gecikme esas olarak JavaScript veya yazı tiplerinin yüklenmesi için yeterli zaman sağlar.

Açıklama:

HTML Structure: The code is structured in a standard HTML5 format with a <head> and <body> section.
Metadata: The <meta> tags define the character set and viewport for responsive design.
Stil sayfası:
- Varsayılan gövde stili: Tüm medya boyunca geçerli olacak şekilde yazı tipi ailesini ve boşlukları ayarlar.
- Ekran Medya Sorgusu: Dijital ekranlar için açık gri arka plan ve daha koyu metin uygular.
- Yazdırma Medya Sorgusu: Yazdırma için tipik olarak beyaz arka plan ve siyah metin uygular.
Örnek Kullanım: Verilen HTML ve CSS yapısı, içeriğin ekranda veya yazdırıldığında farklı stillerin nasıl uygulanabileceğini göstermeye yardımcı olur.

GitHub'da Daha Fazla PDF Oluşturma Ayarı Örneği Keşfedin.