Ustawienia renderowania HTML

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

Ustawienia renderowania HTML

Wiele opcji renderowania można skonfigurować podczas renderowania z ciągów HTML, plików lub adresów URL w sieci. Ustawienia pokazane powyżej obejmują niestandardowy rozmiar papieru z konfigurowalnymi jednostkami miary, włączenie tła HTML, orientację strony, tytuł dokumentu, opóźnienie procesu renderowania, określenie typu mediów CSS, wybór trybu papieru, tworzenie edytowalnych pól formularzy, dostosowywanie marginesów i dodawanie numerów stron.

Typy mediów CSS "screen" i "print" to dyrektywy używane do określenia, jak style powinny być stosowane do dokumentów HTML w zależności od medium wyświetlania lub wydruku. Gdy "screen" jest wybrane jako typ mediów, wskazuje to, że zasady CSS są przeznaczone do przeglądania na ekranie, optymalizując czynniki takie jak kolory i układy dla ekranów cyfrowych. Natomiast gdy wybrano "print", nakazuje przeglądarce zastosowanie stylów dostosowanych do dokumentów drukowanych, zapewniając czytelność i właściwe formatowanie podczas drukowania zawartości HTML na mediach fizycznych. Czasami konieczne jest ustawienie typu mediów CSS na "screen", aby wyświetlić niektóre obrazy tła.

Opóźnienie w procesie renderowania zapewnia przede wszystkim wystarczający czas na załadowanie JavaScript lub czcionek.

Wyjaśnienie:

Struktura HTML: Kod jest zorganizowany w standardowym formacie HTML5 z sekcją <head> i <body>.
Metadata: Znaczniki <meta> definiują zestaw znaków i viewport dla projektowania responsywnego.

Styl Arkusza:

Domyślny styl ciała: Ustawia rodzinę czcionek i marginesy, które mają zastosowanie we wszystkich mediach.
Kwerenda dla mediów ekranowych: Stosuje jasnoszare tło i ciemniejszy tekst na ekranach cyfrowych.
Kwerenda dla mediów drukowanych: Stosuje białe tło i czarny tekst, typowe dla drukowania.

Przykładowe użycie: Podana struktura HTML i CSS pomaga zademonstrować, jak różne style mogą być zastosowane w zależności od tego, czy treść jest wyświetlana na ekranie, czy drukowana.

Odkryj więcej przykładów ustawień generowania PDF na GitHubie.