Cómo utilizar la ventana virtual y el zoom
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.
Cómo utilizar la ventana virtual y el zoom
- Descargar la biblioteca IronPDF C# para la representación de PDF y el control de la ventana gráfica
- Renderiza HTML a PDF utilizando diferentes modos preconfigurados
- Utiliza los modos CSS predeterminado y adaptativo de Chrome para lograr un diseño automático en PDF
- Utiliza la escala para ampliar el contenido
- Configurar "ajuste a página" y "alimentación continua" para casos de uso específicos
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")
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")
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")
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")
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")