Cómo utilizar C# Virtual Viewport y Zoom en IronPDF

¿Cuáles son los modos de ajuste de papel en IronPDF?

Acceda al campo PaperFit en RenderingOptions para utilizar métodos preestablecidos para tipos y modos de renderizado específicos. Estos modos proporcionan diferentes enfoques para la representación de contenido HTML en páginas PDF, similares a las técnicas utilizadas al crear tamaños de papel personalizados. Examinemos cada modo de PaperFit representando la página principal de Wikipedia para comparar.

Los modos de PaperFit manejan diversos diseños de contenido, desde páginas web estándar hasta documentos especializados como recibos o informes. Cada modo se optimiza para casos de uso específicos, garantizando que los PDF mantengan el diseño y la legibilidad previstos, independientemente del formato original del contenido de origen.

¿Cómo utilizar el renderizado predeterminado de Chrome?

Este modo presenta las páginas PDF tal y como aparecen en la vista previa de impresión de Google Chrome. Configura las opciones de renderizado para que coincidan con la apariencia de una página web cuando se imprime desde Chrome. La ventana gráfica CSS adaptativa interpreta el tamaño de papel especificado en función de su anchura. Utilice el método UseChromeDefaultRendering para configurarlo.

La representación predeterminada de Chrome mantiene la coherencia con las expectativas de impresión del navegador. Funciona bien para páginas web y documentos estándar en los que se desea preservar el flujo natural del contenido tal y como aparece en las operaciones de impresión típicas de un navegador. Para escenarios avanzados que impliquen representación de JavaScript, este modo garantiza la correcta ejecución y visualización del contenido dinámico.

:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-default-chrome.cs

using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Chrome default rendering
renderer.RenderingOptions.PaperFit.UseChromeDefaultRendering();

// Render web URL to PDF
PdfDocument pdf = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page");

pdf.SaveAs("chromeDefault.pdf");

¿Cómo se utiliza el renderizado CSS adaptable?

En el modo CSS adaptable, especifique un ancho de ventana pasando un valor al método UseResponsiveCssRendering. El ViewPortWidth por defecto es de 1280 píxeles. La unidad de ventana gráfica se basa en píxeles y representa una ventana virtual del navegador para diseños CSS con capacidad de respuesta. Este modo maneja marcos modernos y funciona con Diseños CSS de Bootstrap y Flex.

Responsive CSS define el renderizado de HTML basado en el parámetro ViewPortWidth, escalando el contenido para ajustarlo al ancho del tamaño de papel especificado. Este enfoque se adapta a las aplicaciones web modernas que utilizan principios de diseño adaptable, lo que garantiza que los PDF mantengan el diseño previsto independientemente del tamaño original de la ventana gráfica. Cuando se trabaja con margenes personalizados, este modo proporciona un control preciso sobre la adaptación del contenido a las diferentes dimensiones de la página.

:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-responsive-css.cs

using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Responsive CSS rendering
renderer.RenderingOptions.PaperFit.UseResponsiveCssRendering(1280);

// Render web URL to PDF
PdfDocument pdf = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page");

pdf.SaveAs("responsiveCss.pdf");

¿Cómo se utiliza el renderizado a escala?

El método UseScaledRendering imita el comportamiento de la vista previa de impresión de Chrome para un tamaño de papel especificado, a la vez que proporciona un nivel de zoom ajustable. Este método escala el contenido en función del porcentaje de zoom introducido.

La renderización a escala ofrece un control preciso de la apariencia del contenido en los PDF. A diferencia de los enfoques de ventana gráfica fija, este método permite ajustar el tamaño del contenido de forma dinámica, lo que lo hace ideal para documentos que requieren legibilidad a diferentes escalas o cuando se preparan PDF para diversos contextos de visualización. Esta técnica complementa los ajustes de orientación y rotación de la página para una presentación óptima del documento.

:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-scaled.cs

using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Scaled rendering
renderer.RenderingOptions.PaperFit.UseScaledRendering(180);

// Render web URL to PDF
PdfDocument pdf = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page");

pdf.SaveAs("scaled.pdf");

¿Cómo se utiliza el renderizado de ajuste a página?

La función de ajuste a página ajusta el contenido al tamaño de papel especificado. Mide la anchura mínima del contenido HTML después de la renderización y lo escala para que se ajuste a la anchura de una hoja de papel siempre que sea posible. La anchura mínima de píxeles configurable garantiza la correcta visualización y la capacidad de respuesta a las reglas de diseño CSS3.

Esta modalidad maneja contenidos que pueden abarcar varias páginas en horizontal. Funciona bien para tablas anchas, gráficos o cuadros de mando que deban ajustarse al ancho de una sola página. El escalado automático garantiza que todo el contenido permanezca visible sin desplazamiento horizontal, lo que resulta ideal para generar informes en PDF en los que la legibilidad es importante.

:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-fit-to-page.cs

using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Fit to page rendering
renderer.RenderingOptions.PaperFit.UseFitToPageRendering();

// Render web URL to PDF
PdfDocument pdf = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page");

pdf.SaveAs("fitToPage.pdf");

¿Cómo se utiliza el renderizado de alimentación continua?

El renderizado de alimentación continua crea un PDF de una sola página que ajusta todo el contenido en una sola página, adecuado para documentos como facturas de consumo o recibos. El ancho de página predeterminado del PDF es de 80,0 milímetros con márgenes de 5 milímetros. Let's render the 'receipt.html' file to PDF.

Personaliza el ancho y el margen de la página utilizando los parámetros width y margin para mayor flexibilidad. Esta modalidad crea documentos concisos de una sola página. Genera recibos, facturas o cualquier documento que requiera un flujo continuo sin saltos de página. Combinado con Control de salto de página de HTML a PDF, puede crear sofisticados diseños de documentos para requisitos específicos.

:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-continuous-feed.cs

using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

int width = 90;
int margin = 0;

// Continuous feed rendering
renderer.RenderingOptions.PaperFit.UseContinuousFeedRendering(width, margin);

// Render web URL to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("receipt.html");

pdf.SaveAs("continuousFeed.pdf");

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