Cómo depurar HTML en Chrome para crear PDFs Pixel Perfect en C#
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.
como-cabecera:2(Guía rápida: Crear PDFs Pixel-Perfect 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.
Empieza a crear PDF con NuGet ahora:
Instalar IronPDF con el gestor de paquetes NuGet
Copie y ejecute este fragmento de código.
var Renderer = new IronPdf.ChromePdfRenderer(); Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Imprimir; Renderer.RenderHtmlAsPdf("<html>Your HTML content here</html>").SaveAs("output.pdf");Despliegue para probar en su entorno real
Empieza a utilizar IronPDF en tu proyecto hoy mismo con una prueba gratuita
¿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
Para ver una lista completa de comparaciones con otros productos, visita nuestro blog.
[p 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
Otro ejemplo de texto cortado en Chrome
¿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.Imprimires la opción de renderización predeterminada que optimiza tu 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.Pantallaes la opción de renderización que permitirá que tus PDFs se vean exactamente como aparecen dentro del Chrome en tu 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 ScreenCabeceras 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 usar el
ImprimirCssMediaType. - Usar
Pantallainstruye a Chrome para imprimir los encabezados solo 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:
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 PDFs Pixel Perfect que incluyan todas las imágenes, íconos y fondos que normalmente se omiten en formato de impresión, asegúrate de usar la opción de CSS Media Pantalla.
2a. Abre DevTools y activa Emular media CSS a Pantalla/Imprimir en Chrome
- Para hacer esto, dentro de Chrome abre DevTools.
- 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
- Navega hacia abajo y encuentra el desplegable para
Emular medios CSSy elige la opciónPantallaoImprimir. Si estás en una página web, es posible que necesites recargar (Ctrl+R) para que las configuraciones tengan efecto.
Imprimir
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.
- Por favor, elige el tamaño de papel que estás usando en tu proyecto de IronPDF, como
A4, oLetter. - En el menú desplegable
MargenseleccionaPersonalizadoy establece los cuatro lados con un margen de (1") una pulgada. - Habilita la casilla de verificación
Gráficos de fondo. - Asegúrate de configurar tu
DiseñoenPaisajesi intentas producir un documento apaisado.
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.
Recuerda que PdfCssMediaType.Pantalla incluye fondos, y imágenes más grandes que pueden ser omitidas en el formato PdfCssMediaType.Imprimir que es el predeterminado y está diseñado para impresoras para ahorrar 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;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 las configuraciones predeterminadas, necesitarás ajustar la opción RenderingOptions.Timeout.
Tenga en cuenta que si no se establece ningún tiempo de espera o si el retraso de la renderización es superior al 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- RenderDelay y JavaScript (Ejemplo de Código)
- RenderDelay (Referencia de API)
- Timeout (Referencia de API)
¿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.
Comience gratis
Comience gratis
Reserve demostración en vivo gratis
No se requiere tarjeta de crédito ni creación de cuenta
