Cómo utilizar la ventana virtual y el zoom

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

En la conversión de HTML a PDF, la ventana gráfica desempeña un papel fundamental a la hora de determinar cómo se plasmará el diseño de la página web en el documento PDF resultante. En concreto, se refiere al tamaño de pantalla virtual en el que el navegador debe renderizar la página web.

El zoom, en el contexto de la conversión de HTML a PDF, rige el escalado del contenido de la página web en el documento PDF. La posibilidad de ajustar con precisión el nivel de zoom permite ajustar el tamaño del contenido del PDF resultante, garantizando que se ajuste al diseño y formato deseados.

Comience con IronPDF

Comience a usar IronPDF en su proyecto hoy con una prueba gratuita.

Primer Paso:
green arrow pointer



Modos de ajuste del papel

Accede al campo PaperFit de RenderingOptions para invocar un método preestablecido que puede utilizarse para un tipo y modo de renderizado específicos. Examinemos cada uno de los modos de PaperFit con más detalle, representando la conocida página de Wikipedia a modo de comparación.

Renderizado por defecto de Chrome

Presenta las páginas PDF de la misma forma que aparecen en la vista previa de impresión de Google Chrome. Este método configura las opciones de representación para imitar el aspecto de una página web cuando se imprime desde la vista previa de impresión de Google Chrome. La ventana gráfica CSS responsiva para el tamaño de papel especificado se interpreta basándose en la anchura de ese tamaño de papel. Utilice el método UseChromeDefaultRendering para configurarlo.

: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");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

' Chrome default rendering
renderer.RenderingOptions.PaperFit.UseChromeDefaultRendering()

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

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

Renderizado CSS con capacidad de respuesta

En el modo CSS responsivo, puedes especificar el ancho de la ventana gráfica pasando un valor al método UseResponsiveCssRendering. La anchura predeterminada de la ventana gráfica es de 1280 píxeles. Como habrás observado, 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.

El CSS responsivo se utiliza para definir la representación del HTML en función del parámetro ViewPortWidth, escalando el contenido para ajustarlo a la anchura del tamaño de papel especificado.

: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");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

' Responsive CSS rendering
renderer.RenderingOptions.PaperFit.UseResponsiveCssRendering(1280)

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

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

Renderizado a escala

El método UseScaledRendering adopta un diseño que imita el comportamiento de Chrome Print Preview para un tamaño de papel especificado. También proporciona un nivel de zoom adicional que los desarrolladores pueden ajustar manualmente. Este método habilita la opción de escalar el contenido según el porcentaje de zoom introducido.

: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");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

' Scaled rendering
renderer.RenderingOptions.PaperFit.UseScaledRendering(180)

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

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

Ajustar a la página

Por el contrario, el renderizado "ajustado a la página" escala el contenido para ajustarlo 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 se utiliza como anchura mínima basada en píxeles para que el documento se muestre correctamente y responda a las reglas de diseño CSS3.

: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");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

' Fit to page rendering
renderer.RenderingOptions.PaperFit.UseFitToPageRendering()

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

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

Renderizado de alimentación continua

El renderizado de alimentación continua crea un PDF de una sola página que obliga a que todo el contenido, en anchura y altura, quepa en una sola página, lo que lo hace adecuado para documentos como facturas de consumo o recibos. La anchura predeterminada de la página PDF es de 80,0 milímetros, y el margen predeterminado es de 5 milímetros.

La posibilidad de personalizar el ancho y el margen de la página mediante los parámetros 'width' y 'margin' aporta flexibilidad, lo que lo convierte en una opción conveniente para crear documentos concisos de una sola página.

: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");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

Private width As Integer = 90
Private margin As Integer = 0

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

' Render web URL to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("receipt.html")

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