Configuración de renderizado 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");
})();

Configuración de renderizado HTML

Muchas opciones de renderizado se pueden configurar al renderizar desde cadenas HTML, archivos o URL web. Los ajustes mostrados arriba incluyen tamaño de papel personalizado con unidades de medida configurables, habilitación del fondo HTML, orientación de página, título del documento, retraso en el proceso de renderizado, especificación del tipo de medio CSS, selección del modo de papel, creación de campos de formulario editables, personalización de márgenes y adición de números de página.

Los tipos de medios CSS "pantalla" e "impresión" son directivas utilizadas para especificar cómo se deben aplicar los estilos a los documentos HTML en función del medio de visualización o salida. Cuando se elige "pantalla" como tipo de medio, indica que las reglas CSS están destinadas para visualización en pantalla, optimizando factores como colores y diseños para pantallas digitales. Por el contrario, cuando se selecciona "impresión", instruye al navegador para aplicar estilos adaptados para documentos impresos, asegurando legibilidad y formato adecuado cuando el contenido HTML se imprime en medios físicos. A veces, es necesario configurar el tipo de medio CSS a "pantalla" para mostrar ciertas imágenes de fondo.

El retraso en el proceso de renderizado primordialmente proporciona tiempo suficiente para que se carguen JavaScript o fuentes.

Explicación:

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.
Hoja de estilos:
- Estilo por defecto del cuerpo: Establece la familia de fuentes y el margen aplicable en todos los medios.
- Consulta de medios de pantalla: Aplica un fondo gris claro y texto más oscuro para pantallas digitales.
- Consulta de medios de impresión: Aplica un fondo blanco y texto negro, típico para impresión.
Uso de ejemplo: La estructura de HTML y CSS dada ayuda a demostrar cómo se pueden aplicar diferentes estilos según si el contenido se ve en una pantalla o impreso.

Descubra más ejemplos de configuraciones de generación de PDF en GitHub.