1. IronPDF
  2. Cómo Hacer
  3. CSS (pantalla e impresión)

Cómo utilizar CSS con HTML

El tipo de medio CSS "pantalla" está pensado principalmente para su visualización en pantallas de ordenador y dispositivos similares. Cuando los estilos se definen para el tipo de medio "pantalla", afectan a la forma en que el contenido web se presenta en las pantallas, haciendo hincapié en el diseño visual y la interactividad.

En cambio, el tipo de medio CSS "print" está diseñado para la impresión. Determina cómo aparecerá la página web cuando se imprima, centrándose en optimizar el contenido para la página impresa. Esta optimización puede incluir el ajuste del tamaño de las fuentes, los márgenes y la eliminación u ocultación de elementos que no sean relevantes o necesarios cuando se impriman.

Cómo utilizar CSS adaptativo con HTML

  1. Descargar la biblioteca C# para utilizar CSS con HTML
  2. Preparar el archivo HTML para la conversión a PDF
  3. Especifique el tipo de medio CSS adecuado para obtener un PDF excelente
  4. Establezca el tipo de medio CSS en "Imprimir" para permitir la repetición del encabezado de la tabla.
  5. Configura la anchura y la altura de la ventana de forma independiente


Biblioteca NuGet C# para PDF

Instalar con NuGet

Install-Package IronPdf
nuget.org/packages/IronPdf/
o
Java PDF JAR

Descargar DLL

Descargar DLL

Instalar manualmente en su proyecto

Tipos de CSS para pantalla e impresión (CSS3)

IronPDF genera PDF a partir de HTML en C# y puede convertir sin esfuerzo una hoja de estilos de pantalla en un PDF por defecto. Esto es conveniente porque las hojas de estilo para impresión suelen estar menos documentadas, utilizadas o desarrolladas que sus homólogas para pantalla.

CSS3 permite que determinados estilos CSS se representen exclusivamente en documentos impresos, mientras que otros están pensados para navegadores web. IronPDF puede programarse para trabajar con cualquiera de los dos.

Crear y aplicar una hoja de estilos de impresión a nuestro HTML: https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/.

Es muy difícil decir qué tipo de medio CSS es mejor, ya que cada tipo se dirige a casos de uso diferentes. Merece la pena probar cada uno de ellos por ensayo y error para ver cuál se adapta mejor a sus necesidades.

Ejemplo de impresión 1

Ejemplo de pantalla 1

Repetir cabeceras de tabla

Cuando se trate de tablas HTML que abarcan 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 sólo una vez.

Para asegurarse de que Chrome detecta el encabezado de la tabla, debe ir encerrado en un <thead> etiqueta. Rendericemos el 'tableHeader.htmlHTML a PDF para ver el efecto.

: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();

//  Cambiar el tamaño del papel a pequeño
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400);

//  Elija el soporte CSS para pantalla o impresión
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;

//  Convertir HTML en PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableHeader.html");

pdf.SaveAs("tableHeader.pdf");
Imports IronPdf
Imports IronPdf.Rendering

Private renderer As New ChromePdfRenderer()

'  Cambiar el tamaño del papel a pequeño
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400)

'  Elija el soporte CSS para pantalla o impresión
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print

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

pdf.SaveAs("tableHeader.pdf")
VB   C#