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

npm i @ironsoftware/ironpdf

npm i @ironsoftware/ironpdf

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:

Estructura HTML: El código está estructurado en un formato estándar HTML5 con una sección <head> y <body>.
Metadata: Las etiquetas <meta> definen el conjunto de caracteres y el viewport para un diseño responsivo.

Hoja de estilo:

Estilo predeterminado del cuerpo: establece la familia de fuentes y los márgenes aplicables en todos los medios.
Screen Media Query: 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 de la impresión.

Ejemplo de uso: La estructura HTML y CSS proporcionada ayuda a demostrar cómo se pueden aplicar diferentes estilos dependiendo de si el contenido se visualiza en una pantalla o se imprime.

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

Ver en GitHub