1. IronPDF
  2. Tutoriales
  3. Depurar HTML con Chrome
Cómo convertir HTML a PDF con C# en .NET 8 | IronPDF

How to Debug HTML in Chrome to Create Pixel Perfect PDFs in C

Curtis Chau
Curtis Chau
Actualizado:
This article was translated from English: Does it need improvement?
Translated
View the article in English

Como desarrolladores de IronPDF, entendemos que los documentos PDF creados por IronPDF no solo deben verse perfectos, sino también deben verse exactamente como nuestros clientes esperan. Para que tus PDFs se vean perfectos, necesitarás desarrollar excelentes plantillas HTML o trabajar con un desarrollador web para que lo haga por ti. IronPDF tiene las opciones para renderizar tus PDFs para que sean idénticos a tu HTML y aparezcan idénticos a como aparecen en Chrome debido a nuestro Chrome Renderer.

Inicio rápido: Cree archivos PDF con píxeles perfectos con IronPDF

Convierte sin esfuerzo tu HTML en PDFs perfectos utilizando el potente Chrome Renderer de IronPDF. Esta guía rápida te ayuda a lograr salidas PDF precisas y predecibles aprovechando el soporte completo de IronPDF para HTML5, CSS3 y JavaScript. Con solo unas pocas líneas de código, puedes renderizar tu contenido HTML exactamente como aparece en Chrome, asegurando una transición perfecta de la web a PDF. Perfecto para desarrolladores que buscan mantener la precisión del diseño sin comprometer la facilidad de uso.

  1. Instala IronPDF con el Administrador de Paquetes NuGet

    PM > Install-Package IronPdf

  2. Copie y ejecute este fragmento de código.

    var Renderer = new IronPdf.ChromePdfRenderer();
Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;
Renderer.RenderHtmlAsPdf("<html>Your HTML content here</html>").SaveAs("output.pdf");

  3. Despliegue para probar en su entorno real

    Comienza a usar IronPDF en tu proyecto hoy mismo con una prueba gratuita

    arrow pointer

¿Qué es el renderizador de Chrome de IronPDF?

Hace que IronPDF sea única con respecto a otras bibliotecas PDF .NET

IronPDF es distintivo en el mercado ya que utiliza el Google Chromium Renderer, lo que significa que el HTML que ves en los navegadores Chrome se verá exactamente igual a lo que ves en nuestros PDFs. En este tutorial, te guiaremos a través de algunos ajustes que necesitarás aplicar en Chrome y en IronPDF para lograr esto.

Para ser claros, muchas tecnologías que reclaman "HTML a PDF" implementadas por competidores no cumplen con los estándares W3C, ni siquiera soportan HTML5, CSS3 o JavaScript, y usan renderizadores subyacentes como wkhtmltopdf.

IronPDF comparado con la competencia

IronPDF

IronPDF

Descargar PDF

Vainilla Chrome

Vainilla Chrome

Descargar PDF

Aspose.PDF

Aspose.PDF

Descargar PDF

iText

iText

Descargar PDF

wkhtmltopdf

wkhtmltopdf

Descargar PDF

Para ver una lista completa de comparaciones con otros productos, visita nuestro blog.

[pFeatures related to IronPDF comparado con la competencia Características]|Renderer de Chrome de IronPDF|Aspose vs IronPDF|iText vs IronPDF

El renderizador optimizado para Chrome de IronPDF es mejor que Chrome

Dos ejemplos de cómo IronPDF supera al propio Chrome. Los botones y el texto que de otro modo se dividirían en dos páginas con Chrome permanecen intactos con IronPDF.

Ejemplo de botones y texto que se cortan en Chrome

Botón cortado en Chrome pero no en IronPDF

Otro ejemplo de texto cortado en Chrome

Texto cortado en Chrome pero no en IronPDF

¿Por qué utilizar HTML a PDF?

A los desarrolladores les encanta HTML a PDF porque ofrece resultados predecibles que coinciden con la marca web existente. El diseño se implementa utilizando tecnologías HTML, CSS y JavaScript bien documentadas y estandarizadas.

  • El diseño y disposición del resultado coincide exactamente con el sitio web.
  • Los desarrolladores web pueden centrarse en diseñar con precisión absoluta.
  • Los desarrolladores de .NET pueden centrarse en la lógica de la aplicación en lugar del diseño. Los desarrolladores de back-end pueden delegar tareas de diseño y diseño a los diseñadores web.

1. Decide usar CSS Media Type Imprimir o Pantalla

El renderizador de IronPDF tiene dos opciones de renderizado de medios: Imprimir (predeterminado) y Pantalla. Para una comparación visual lado a lado, por favor vea al final de este tutorial en la sección "Comparación de Ejemplo de Pantalla e Impresión".

  • CssMediaType.Print es la opción de renderizado predeterminada que optimiza su HTML para uso general con una impresora. Esto significa que algunas imágenes de fondo, iconos y otros elementos que consumen mucha tinta en la página pueden renderizarse de manera diferente o ser omitidos. Esta opción es buena para documentos sin imágenes de fondo y es la previsualización predeterminada de impresión.
  • CssMediaType.Screen es la opción de renderizado que permitirá que sus archivos PDF se vean exactamente como aparecen en Chrome en su pantalla. Necesitarás configurar algunas opciones dentro de tu navegador Chrome para habilitar la previsualización de impresión para que se vea exactamente cómo IronPDF renderizará para propósitos de depuración HTML.
:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-1.cs
// Pixel Perfect HTML Formatting Settings
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print; // or Screen
$vbLabelText   $csharpLabel

Cabeceras de tabla repetidas

Si tienes HTML que contiene una tabla que se va a extender por más de una página, probablemente te gustaría que los encabezados de tabla se repitan en cada página PDF.

  • En este caso, solo puedes utilizar el Imprimir CssMediaType.
  • El uso de Pantalla le indica a Chrome que solo imprima los encabezados una vez.

Comparación de pantalla y ejemplo impreso

Muchas imágenes e íconos no se cargarán en modo de impresión que se cargarán en modo pantalla:

Ejemplo de impresión 1 Ejemplo de pantalla 1

2. Configurar Chrome

IronPDF utiliza con orgullo un motor de renderizado Chrome. Sigue estos pasos para que IronPDF renderice tu HTML exactamente como lo ves dentro de Chrome. Estos son los pocos pasos que deben hacerse de antemano dentro de Chrome para lograr esto.

Para renderizar archivos PDF Pixel Perfect que incluyan todas las imágenes, íconos y fondos que normalmente se omiten en el formato de impresión, asegúrese de utilizar la opción Pantalla CSS Media.

2a. Abre DevTools y activa Emular media CSS a Pantalla/Imprimir en Chrome

  1. Para hacer esto, dentro de Chrome abre DevTools.

    Usar Inspeccionar en Chrome

  2. Presiona Comando+Shift+P (Mac) o Control+Shift+P (Windows, Linux, ChromeOS) para abrir el Menú de Comandos. Comienza a escribir renderizado, selecciona Mostrar Renderizado, y presiona Enter. DevTools muestra la pestaña Renderizado en la parte inferior de tu ventana DevTools. Más ayuda

Vaya a Mostrar renderizado y luego a Buscar tipo de medio CSS

  1. Navegue hacia abajo y busque el menú desplegable de Emulate CSS media y elija la opción Pantalla o Imprimir. Si estás en una página web, es posible que necesites recargar (Ctrl+R) para que las configuraciones tengan efecto.
Switch to CSS Media Type Imprimir

Imprimir

Switch to CSS Media Type Pantalla

Pantalla

2b. Abre la ventana de Vista Previa de Impresión (Ctrl+P en Windows)

Es posible que necesites cambiar el tamaño del papel y habilitar 'imprimir imágenes de fondo' en el cuadro de diálogo de impresión de Chrome para obtener una visualización precisa.

2c. Configurar la previsualización de impresión.

  • Elija el tamaño de papel que está utilizando en su proyecto IronPDF , como A4, o Letter.
  • En el menú desplegable Margins seleccione Custom y configure los cuatro lados con un margen de una pulgada (1").
  • Habilite la casilla de verificación Background Graphics.
  • Asegúrese de configurar Layout en Landscape si desea generar un documento horizontal.

Y eso es todo. Ahora puedes depurar tu HTML y usar la previsualización de impresión para ver exactamente cómo IronPDF renderizará tu diseño.

3. Configurar IronPDF

3a. Configurar el Tipo de Medio CSS en IronPDF

Para coincidir el diseño de la página web con un 100% de precisión, debemos elegir el mismo Tipo de Medio CSS que configuramos en Chrome en nuestro código.

Recuerde que PdfCssMediaType.Screen incluye fondos e imágenes más grandes que pueden omitirse en el formato PdfCssMediaType.Print, que es el predeterminado y está diseñado para que las impresoras ahorren tinta.

:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-2.cs
// Example using PdfCssMediaType.Screen
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen; // or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
$vbLabelText   $csharpLabel

3b. Configurar el tiempo y el retraso de renderizado adecuadamente.

El tiempo de espera de IronPDF es de 60 segundos. Cualquier cosa que tome más de este tiempo en procesarse no se renderizará sin editar las opciones de renderización. Para anular la configuración predeterminada, deberá ajustar la opción RenderingOptions.Timeout.

Tenga en cuenta que si no se establece un tiempo de espera o si el retraso de renderizado es mayor que el establecido, se producirá una excepción Unable to Render PDF. Así que si estás encontrando este error, es posible que necesites aumentar estos valores.

:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-3.cs
// Example of setting Timeout and RenderDelay options
renderer.RenderingOptions.Timeout = 90; // seconds (default is 60)
renderer.RenderingOptions.WaitFor.RenderDelay(30000); // milliseconds
$vbLabelText   $csharpLabel

¿Listo para ver qué más puedes hacer? Consulta nuestra página de tutoriales aquí: Caracteríticas Adicionales

Preguntas Frecuentes

¿Cómo puedo lograr una renderización PDF perfecta al píxel desde HTML?

Para lograr una renderización PDF perfecta al píxel desde HTML, puedes usar el renderizador de Chrome de IronPDF, que garantiza que el contenido HTML mostrado en los navegadores Chrome sea idéntico a los PDFs generados.

¿Cuáles son los beneficios de usar IronPDF para la conversión de HTML a PDF?

IronPDF permite a los desarrolladores generar PDFs que coincidan con la apariencia visual del contenido HTML en los navegadores web, compatible con HTML5, CSS3 y JavaScript, a diferencia de muchas otras bibliotecas.

¿Cómo puedo configurar los tipos de medio CSS en IronPDF?

Puedes configurar los tipos de medio CSS en IronPDF seleccionando 'Impresión' para documentos sin fondos o 'Pantalla' para que coincida con la apariencia en pantalla, asegurando que la salida PDF se alinee con tus necesidades.

¿Qué pasos debo seguir para configurar Chrome para la renderización de PDF?

Para configurar Chrome para la renderización de PDF, abre DevTools, habilita 'Emular medios CSS' a 'Pantalla/Impresión' y ajusta las configuraciones de vista previa de impresión para asegurar que el PDF coincida con el diseño deseado.

¿Cómo resuelvo problemas de renderización con IronPDF?

Si encuentras problemas de renderización, como una excepción 'No se puede renderizar PDF', intenta aumentar las configuraciones de Retardo de Renderización o Tiempo de Espera de Renderización dentro de las opciones de IronPDF para obtener mejores resultados.

¿Puedo usar IronPDF para renderizar PDFs que coincidan con el diseño web?

Sí, IronPDF te permite renderizar PDFs que coincidan precisamente con tu diseño web usando el renderizador Google Chromium, proporcionando soporte para todas las tecnologías web modernas.

¿Por qué IronPDF utiliza el renderizador Google Chromium?

IronPDF utiliza el renderizador Google Chromium para asegurar que el HTML mostrado en los navegadores Chrome se vea idéntico a los PDFs creados, proporcionando una salida consistente y de alta calidad.

¿IronPDF es compatible con .NET 10 y puedo usarlo en nuevos proyectos .NET 10?

Sí. IronPDF es compatible explícitamente con .NET 10 (así como con .NET 9, .NET 8 y versiones anteriores) y es compatible de fábrica. Puede usar .NET 10 en sus proyectos y usar las API de HTML a PDF, renderizado, edición y firma de IronPDF sin necesidad de soluciones alternativas.

Curtis Chau
Curtis Chau
  Chatea con el equipo de ingeniería ahora
Escritor Técnico

Curtis Chau tiene una licenciatura en Ciencias de la Computación (Carleton University) y se especializa en el desarrollo front-end con experiencia en Node.js, TypeScript, JavaScript y React. Apasionado por crear interfaces de usuario intuitivas y estéticamente agradables, disfruta trabajando con frameworks modernos y creando manuales bien ...

Leer más
¿Listo para empezar?
Nuget Descargas 17,803,474 | Versión: 2026.3 recién lanzado
Still Scrolling Icon

¿Aún desplazándote?

¿Quieres una prueba rápida? PM > Install-Package IronPdf
ejecutar una muestra Mira cómo tu HTML se convierte en PDF.