HTML-Rendering-Einstellungen

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-Rendering-Einstellungen

Beim Rendern von HTML-Zeichenketten, Dateien oder Web-URLs können zahlreiche Rendering-Optionen konfiguriert werden. Die oben gezeigten Einstellungen umfassen benutzerdefiniertes Papierformat mit konfigurierbaren Maßeinheiten, Aktivierung des HTML-Hintergrunds, Seitenausrichtung, Dokumenttitel, Verzögerung des Rendering-Prozesses, Angabe des CSS-Medientyps, Auswahl des Papiermodus, Erstellung bearbeitbarer Formularfelder, Anpassung der Ränder und Hinzufügen von Seitenzahlen.

Die CSS-Medientypen "screen" und "print" sind Direktiven, die festlegen, wie Stile auf HTML-Dokumente basierend auf dem Anzeige- oder Ausgabemedium angewendet werden sollen. Wenn als Medientyp "screen" ausgewählt wird, bedeutet dies, dass die CSS-Regeln für die Bildschirmdarstellung bestimmt sind und Faktoren wie Farben und Layouts für digitale Bildschirme optimieren. Wird hingegen die Option "Drucken" ausgewählt, weist dies den Browser an, speziell für gedruckte Dokumente entwickelte Stile anzuwenden, um Lesbarkeit und korrekte Formatierung beim Ausdrucken des HTML-Inhalts auf physischen Medien zu gewährleisten. Manchmal ist es notwendig, den CSS-Medientyp auf "screen" zu setzen, um bestimmte Hintergrundbilder anzuzeigen.

Die Verzögerung im Rendering-Prozess bietet in erster Linie ausreichend Zeit, um JavaScript oder Schriftarten zu laden.

Erläuterung:

HTML Structure: The code is structured in a standard HTML5 format with a <code><head></code> and <code><body></code> section.
Metadata: The <code><meta></code> tags define the character set and viewport for responsive design.
Stylesheet:
- Standard-Body-Stil: Legt die Schriftart und den Rand fest, die für alle Medien gelten.
- Screen Media Query: Wendet einen hellgrauen Hintergrund und dunkleren Text für digitale Bildschirme an.
- Print Media Query: Wendet einen weißen Hintergrund und schwarzen Text an, typisch für den Druck.
Anwendungsbeispiel: Die gegebene HTML- und CSS-Struktur veranschaulicht, wie unterschiedliche Stile angewendet werden können, je nachdem, ob der Inhalt auf einem Bildschirm angezeigt oder gedruckt wird.