1. IronPDF
  2. Guías
  3. Depurar HTML con Chrome
Cómo depurar HTML en Chrome para crear PDFs perfectamente píxel

How to Debug HTML in Chrome to Create Pixel Perfect PDFs

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

As the developers of IronPDF, we understand that PDF documents made by IronPDF not only need to look perfect but also need to look exactly how our customers expect them to. To achieve pixel-perfect PDFs, you will need to develop excellent HTML templates or collaborate with a web developer to create them for you. IronPDF offers options to render your PDFs pixel-perfectly to your HTML, ensuring they appear identical to how they display in Chrome due to our Chrome Renderer.

Quickstart: Generate Pixel Perfect PDFs with IronPDF

With IronPDF's Chrome Renderer, converting HTML to PDF is a breeze. This guide helps developers produce pixel-perfect PDF documents that mirror their HTML designs exactly as they appear in a Chrome browser. The process ensures that HTML5, CSS3, and JavaScript elements are fully supported, unlike many competitors. Follow these steps to quickly create PDFs that maintain your web branding and design integrity effortlessly.

Nuget IconGet started making PDFs with NuGet now:

  1. Install IronPDF with NuGet Package Manager

    PM > Install-Package IronPdf

  2. Copy and run this code snippet.

    IronPdf.ChromePdfRenderer.RenderHtmlAsPdf("<html><body>Hello World</body></html>").SaveAs("output.pdf");

  3. Deploy to test on your live environment

    Start using IronPDF in your project today with a free trial
    arrow pointer

What is IronPDF's Chrome Renderer?

It makes IronPDF unique from other .NET PDF Libraries

IronPDF is distinct in the market as it utilizes the Google Chromium Renderer, meaning the HTML you see in Chrome browsers will look exactly the same as what you see in our PDFs. In this guide, we will walk you through some settings you will need to apply in Chrome and in IronPDF to achieve this.

To be clear, many claimed "HTML to PDF" technologies implemented by competitors do not comply with W3C standards, or even support HTML5, CSS3, or JavaScript, and use underlying renderers such as wkhtmltopdf in C# comparison.

IronPDF compared with Competitors

IronPDF

IronPDF

Download PDF

Vanilla Chrome

Vanilla Chrome

Download PDF

Aspose.PDF

Aspose.PDF

Download PDF

iText

iText

Download PDF

wkhtmltopdf

wkhtmltopdf

Download PDF

To see a full list of comparisons with other products, see our comparison blog.

Features of Iron Software Libraries | Using IronPDF's Chrome Rendering Engine | Aspose vs IronPDF Analysis | iText vs IronPDF Comparison

IronPDF's Optimized Chrome Renderer is Better than Chrome

Two examples of IronPDF surpassing Chrome itself. Buttons and Text that would otherwise be split onto two pages with Chrome remain intact with IronPDF.

Example of Buttons and Text being cut off in Chrome:

Button Cut off in Chrome but not in IronPDF

Another Example of Text being cut off in Chrome:

Text Cut off in Chrome but not in IronPDF

Why use HTML to PDF?

Developers love HTML to PDF because it delivers predictable results that match existing web branding. Design is implemented using well-documented standardized HTML, CSS, and JavaScript technologies.

  • The layout and design of the output match the website exactly.
  • Web Developers can focus on designing with absolute precision.
  • .NET developers can focus on application logic rather than layout. Back-end developers can delegate layout and design tasks to web designers.

1. Decide to use CSS Media Type Print or Screen

IronPDF's renderer has two media rendering options: Print (default) and Screen. For a visual side-by-side comparison please see the end of this section. Under the "Comparison of Screen and Print Example" section.

  • CssMediaType.Print is the default rendering option that optimizes your HTML for general use with a printer. This means that some background images, icons, and other ink-heavy elements on the page may render differently or be omitted. This option is good for documents without background images and is the default print-preview.
  • CssMediaType.Screen is the rendering option that will allow your PDFs to look exactly how they appear within Chrome on your screen. You will need to set up some options within your Chrome browser to enable the print-preview to look exactly how IronPDF will render for HTML debugging purposes.
:path=/static-assets/pdf/content-code-examples/how-to/pixel-perfect-html-to-pdf-1.cs
// Pixel Perfect HTML Formatting Settings
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print; // or Screen
' Pixel Perfect HTML Formatting Settings
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print ' or Screen
$vbLabelText   $csharpLabel

Repeating Table Headers

If you have HTML containing a table that will span more than one page, you would probably like the Table Headers to repeat on each PDF page.

  • In this case, you can only use the Print CssMediaType.
  • Using Screen instructs Chrome to only print the headers once.

Comparison of Screen and Print Example

Many images and icons will not load in Print mode which will load in Screen mode:

Example of Print 1 Example of Screen 1

2. Set up Chrome

IronPDF proudly utilizes a Chrome Rendering Engine. Follow these steps for IronPDF to render your HTML exactly as you see it within Chrome. These are the few steps that need to be done beforehand within Chrome to achieve this.

To render pixel-perfect PDFs that include all images, icons, and backgrounds typically omitted in print format, make sure to use the Screen CSS Media option.

2a. Open DevTools and set Enable Emulate CSS Media to Screen/Print in Chrome

  1. To do this, within Chrome open DevTools in Chrome.
Use Inspect in Chrome
  1. Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, ChromeOS) to open the Command Menu. Start typing rendering, select Show Rendering, and press Enter. DevTools displays the Rendering tab at the bottom of your DevTools window. More help on rendering settings
Go to Show Rendering and then Find CSS Media Type
  1. Navigate down and find the drop-down for Emulate CSS media and choose the option Screen or Print. If you are on a webpage, you may need to reload (Ctrl+R) for settings to take effect.
Switch to CSS Media Type Print

Print

Switch to CSS Media Type Screen

Screen

2b. Open the Print Preview Window (Ctrl+P on Windows)

You may need to change the paper size and enable 'printing background images' in the Chrome Print dialog in order to get an accurate display.

2c. Set the correct Print Preview settings

  • Please choose the Paper Size you are using in your IronPDF project, such as A4, or Letter.
  • Under the Margins drop-down select Custom and set all four sides to (1") one inch margin.
  • Enable the Background Graphics checkbox.
  • Ensure you set your Layout to Landscape if you intend to output a landscape document.

And that is all. You can now debug your HTML and use the print preview to see exactly how IronPDF will render your layout.

3. Set up IronPDF

3a. Set the CSS Media Type in IronPDF

In order to match the webpage design with 100% precision, we must choose the same CSS Media Type that we set in Chrome in our code.

Recall that PdfCssMediaType.Screen includes backgrounds and larger images that may be omitted in the PdfCssMediaType.Print format, which is the default and designed for printers to save ink.

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

3b. Setting Render Delay and Render Timeout appropriately

IronPDF's default rendering timeout is 60 seconds. If the rendering process takes longer than this, a timeout exception will be thrown. To override the default settings, you will need to adjust the RenderingOptions.Timeout option. The render delay value, on the other hand, is the time IronPDF should wait before starting to render. This wait time is crucial for assets such as images, fonts, and JavaScript code to execute properly.

:path=/static-assets/pdf/content-code-examples/how-to/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
IRON VB CONVERTER ERROR developers@ironsoftware.com
$vbLabelText   $csharpLabel

Keep in mind that having no timeout set or having a render delay longer than your set timeout will produce an "Unable to Render PDF" Exception. So if you are encountering this error you may need to increase these values.

Por favor notaAspose, iText, wkhtmltopdf, and PuppeteerSharp are registered trademarks of their respective owners. This site is not affiliated with, endorsed by, or sponsored by Aspose, iText, wkhtmltopdf, or Puppeteer. All product names, logos, and brands are the property of their respective owners. Comparisons are provided for informational purposes only and are based on publicly available information at the time of writing.

Preguntas Frecuentes

¿Cómo puedo crear PDFs pixel-perfectos desde HTML?

Puedes crear PDFs pixel-perfectos desde HTML usando el renderizador de Chrome de IronPDF, que asegura que el HTML que ves en los navegadores Chrome luzca igual en tus PDFs.

¿Cuál es la importancia de usar el renderizador de Chrome en la creación de PDFs?

El renderizador de Chrome en IronPDF permite renderizar HTML5, CSS3 y JavaScript con precisión, asegurando que tus PDFs aparezcan como lo hacen en los navegadores Chrome, a diferencia de algunas otras bibliotecas .NET.

¿Cómo elijo entre los tipos de medio CSS 'Print' y 'Screen' para el renderizado de PDF?

En IronPDF, usa el tipo de medio CSS 'Print' para documentos compatibles con impresoras y 'Screen' para una representación precisa en pantalla. Ajusta estas configuraciones en el ChromePdfRenderer según tus necesidades.

¿Por qué es importante configurar correctamente Chrome para el renderizado de PDF?

Configurar correctamente Chrome es crucial para vistas previas de impresión precisas, lo cual ayuda a lograr salidas de PDF pixel-perfectas con IronPDF, asegurando que tu entorno de desarrollo refleje la configuración de producción.

¿Cómo puedo ajustar los ajustes de retraso y tiempo de espera de renderizado en IronPDF?

Ajusta los ajustes de retraso y tiempo de espera de renderizado en IronPDF utilizando RenderingOptions.RenderDelay y RenderingOptions.Timeout dentro de ChromePdfRenderer para manejar los tiempos de carga de activos.

¿Qué debo hacer si enfrento errores de 'No se puede renderizar PDF'?

Si te encuentras con errores de 'No se puede renderizar PDF', puede ser debido a un retraso de renderizado más largo que el tiempo de espera configurado. Aumenta los valores de retraso de renderizado y tiempo de espera en IronPDF para resolver este problema.

¿Cómo se pueden manejar los encabezados de tabla repetidos en el renderizado de PDF?

Para manejar encabezados de tabla repetidos a través de páginas en IronPDF, usa el tipo de medio CSS 'Print', que asegura que los encabezados se repitan en cada página durante el renderizado de PDF.

¿Qué configuraciones de diseño deben configurarse en Chrome para una creación precisa de PDF?

En la vista previa de impresión de Chrome, elige el tamaño de papel correcto, configura márgenes a Costumbre con una pulgada en todos los lados, habilita gráficos de fondo y selecciona el diseño como paisaje si es necesario para una creación precisa de PDF.

¿IronPDF es compatible con .NET 10 y cómo el uso de .NET 10 beneficia la representación perfecta de HTML a PDF?

Sí, IronPDF es totalmente compatible con .NET 10, lo que ofrece mejoras en el rendimiento de tiempo de ejecución y JIT (como la desvirtualización de métodos de interfaz de matriz y la asignación de pila) que ayudan a generar PDF de forma más rápida y eficiente. Usar .NET 10 con IronPDF permite que sus flujos de trabajo de HTML a PDF (incluyendo el renderizado con Chrome Renderer, la gestión de la configuración de tipos de medios, retrasos, tiempos de espera, etc.) se beneficien de una latencia reducida, un menor uso de memoria y un funcionamiento general más fluido.

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 16,154,058 | Versión: 2025.11 recién lanzado