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");
})();

npm i @ironsoftware/ironpdf

npm i @ironsoftware/ironpdf

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-Struktur: Der Code ist im standardisierten HTML5-Format mit einem <head> und einem <body> Abschnitt strukturiert.
Metadaten: Die <meta> Tags definieren den Zeichensatz und das Viewport für das responsive Design.

T>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.

Entdecken Sie weitere Beispiele für PDF-Generierungseinstellungen auf GitHub.

Auf GitHub ansehen