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 aus HTML-Strings, Dateien oder Web-URLs können viele Rendering-Optionen konfiguriert werden. Die oben gezeigten Einstellungen umfassen die benutzerdefinierte Papiergröße mit konfigurierbaren Maßeinheiten, die Aktivierung des HTML-Hintergrunds, die Seitenausrichtung, den Dokumententitel, die Verzögerung des Rendering-Prozesses, die Angabe des CSS-Medientyps, die Auswahl des Papiermodus, die Erstellung bearbeitbarer Formularfelder, die Anpassung der Ränder und das Hinzufügen von Seitenzahlen.

Die CSS-Medientypen "screen" und "print" sind Direktiven, die angeben, wie Stile auf HTML-Dokumente je nach Anzeige- oder Ausgabemedium angewendet werden sollen. Wenn "screen" als Medientyp gewählt wird, bedeutet dies, dass die CSS-Regeln für die Anzeige auf dem Bildschirm gedacht sind und Faktoren wie Farben und Layouts für digitale Bildschirme optimiert werden. Umgekehrt wird bei der Auswahl von "Drucken" der Browser angewiesen, Stile anzuwenden, die auf gedruckte Dokumente zugeschnitten sind, um die Lesbarkeit und korrekte Formatierung zu gewährleisten, wenn der HTML-Inhalt auf physischen Medien gedruckt wird. Manchmal ist es notwendig, den CSS-Medientyp auf "screen" zu setzen, um bestimmte Hintergrundbilder anzuzeigen.

Die Verzögerung im Rendering-Prozess dient in erster Linie dazu, genügend Zeit für das Laden von JavaScript oder Schriftarten zu haben.

Erläuterung:

HTML-Struktur: Der Code ist in einem Standard-HTML5-Format mit einem <head>- und <body>-Abschnitt strukturiert.
Metadaten: Die Metatags definieren den Zeichensatz und das Ansichtsfenster für das responsive Design.
Stylesheet:
- Standard Textstil: Legt die Schriftfamilie und den Rand fest, die für alle Medien gelten.
- Bildschirm-Medienabfrage: Wendet einen hellgrauen Hintergrund und dunkleren Text für digitale Bildschirme an.
- Print Media Query: Verwendet einen weißen Hintergrund und schwarzen Text, typisch für den Druck.
Verwendungsbeispiel: Anhand der vorgegebenen HTML- und CSS-Struktur wird gezeigt, wie unterschiedliche Stile angewendet werden können, je nachdem, ob der Inhalt auf einem Bildschirm oder in gedruckter Form angezeigt wird.