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 C# de IronPDF para renderizado de PDF y control de viewport
- Renderiza HTML a PDF utilizando diferentes modos preconfigurados
- Use los modos predeterminados de Chrome y CSS responsivo para lograr un diseño automático en PDF
- Utilice el escalado para hacer zoom en el contenido
- Configurar 'ajustar a la página' y 'alimentación continua' para casos de uso específicos
Modos de ajuste del papel
Accede al campo PaperFit en RenderingOptions para invocar un método preestablecido que se puede usar para un tipo y modo de renderizado específico. 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. El viewport CSS adaptable para el tamaño de papel especificado se interpreta basándose en el ancho de ese tamaño de papel. Use el método UseChromeDefaultRendering para configurar esto.
:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-default-chrome.csusing 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");Renderizado CSS con capacidad de respuesta
En el modo CSS responsivo, puedes especificar un ancho de viewport 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 adaptable se utiliza para definir la representación de HTML basada en el parámetro ViewPortWidth, ajustando el contenido para adaptarse al ancho del tamaño de papel especificado.
:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-responsive-css.csusing 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");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 de acuerdo con el porcentaje de zoom de entrada.
:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-scaled.csusing 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");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.csusing 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");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. Vamos a renderizar el archivo 'receipt.html' a PDF.
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.csusing 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");
