Cómo usar CSS con HTML en C# para PDFs responsivos

¿Por qué es importante elegir el tipo de medio CSS adecuado?

IronPDF genera archivos PDF a partir de HTML en C# y puede convertir una hoja de estilos de pantalla en PDF de forma predeterminada. Esto es conveniente porque las hojas de estilo de impresión suelen estar menos documentadas, usadas o desarrolladas en comparación con sus contrapartes de pantalla. Sin embargo, comprender la distinción entre estos tipos de medios es crucial para producir PDF de calidad profesional.

Al trabajar con CSS (pantalla e impresión) en IronPDF, la elección entre los tipos de medios de pantalla e impresión influye significativamente en el resultado final del PDF. Los tipos de medios de pantalla conservan los elementos interactivos y los diseños visuales ricos, mientras que los tipos de medios impresos optimizan el contenido para la legibilidad y el consumo en papel.

CSS3 permite que ciertos estilos CSS se rendericen exclusivamente en documentos impresos, mientras que otros están destinados para navegadores web. IronPDF puede trabajar con cualquiera de ellas, dándole un control total sobre cómo se convierte el contenido HTML a PDF. Esta flexibilidad garantiza que, tanto si crea informes digitales, facturas imprimibles o documentos híbridos, sus PDF cumplan los requisitos específicos de su caso de uso previsto.

¿Cuándo debo utilizar el tipo de medio CSS de impresión frente al de pantalla?

Cree y aplique una hoja de estilo de impresión a su HTML: Aprenda cómo crear y aplicar una hoja de estilo de impresión perfecta..

Cada tipo de medio CSS se dirige a casos de uso diferentes. Pruebe cada una de ellas para ver cuál se adapta mejor a sus necesidades. Tenga en cuenta estas directrices:

Utilice el tipo de medio CSS de impresión cuando:

• Creación de documentos destinados a la impresión física
• Generación de facturas, informes o documentos formales
• Se necesitan encabezados de tabla repetidos en todas las páginas
• Conservar la tinta es una prioridad
• Trabajar con los requisitos de Tamaño de papel personalizado

Utilice el tipo de medio CSS de pantalla cuando:

• Creación de PDF interactivos con elementos visuales enriquecidos
• Preservar la estética del diseño web en el PDF
• Incluir imágenes de fondo y colores
• El PDF se visualizará principalmente en pantallas
• Trabajar con conversiones de HTML responsivo a PDF

¿Cuáles son las diferencias visuales entre los modos de pantalla e impresión?

Comparación de tipos de medios de impresión CSS frente a tipos de medios de pantalla, mostrando una página de Apple Mac con imágenes ocultas en la versión de impresión Comparación de tipos de medios CSS: El diseño de impresión omite iconos, el diseño de pantalla incluye iconos para las especificaciones del MacBook

Los ejemplos anteriores muestran cómo el mismo contenido HTML se muestra de forma diferente en función del tipo de medio CSS seleccionado. Observe cómo la versión impresa elimina las imágenes decorativas y los iconos para crear un documento más limpio e imprimible, mientras que la versión en pantalla mantiene todos los elementos visuales para la visualización digital.

¿Por qué los encabezados de tabla sólo aparecen una vez en modo pantalla?

Cuando trabaje con tablas HTML que abarquen varias páginas, establezca la propiedad CssMediaType en PdfCssMediaType.Print. Esto garantiza que el encabezado de la tabla se repita en la parte superior de cada página ampliada. Por el contrario, PdfCssMediaType.Screen indica a Chrome que imprima las cabeceras una sola vez. Este comportamiento es especialmente importante a la hora de crear Informes PDF con largas tablas de datos.

El tipo de medio de impresión activa reglas CSS específicas que los navegadores utilizan para la paginación, incluida la propiedad thead {display: table-header-group;} que permite la repetición de encabezados. Esta característica es esencial para mantener el contexto cuando los lectores hojean documentos de varias páginas.

¿Qué estructura HTML se requiere para repetir encabezados?

Para asegurarse de que Chrome detecta el encabezado de la tabla, inclúyalo en una etiqueta <thead>. Let's render the 'tableHeader.html example of repeating table headers' HTML file to PDF to see the effect.

Esta es la estructura HTML recomendada:

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <!-- Your table data rows here -->
    </tbody>
</table>

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <!-- Your table data rows here -->
    </tbody>
</table>

¿Cómo implementar la repetición de encabezado de tabla en C#?

:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-responsive-css-table-header.cs

using IronPdf;
using IronPdf.Rendering;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400);

// Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableHeader.html");

pdf.SaveAs("tableHeader.pdf");

Imports IronPdf
Imports IronPdf.Rendering

Private renderer As New ChromePdfRenderer()

' Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400)

' Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("tableHeader.html")

pdf.SaveAs("tableHeader.pdf")

Para opciones de formato de tablas más avanzadas, explore Margenes personalizados para controlar el espaciado alrededor de sus tablas, o implemente Saltos de página para asegurarse de que las tablas comiencen en páginas nuevas cuando sea necesario.

¿Qué aspecto tiene el PDF final?