How to use Virtual Viewport and Zoom

In HTML to PDF rendering, the viewport plays a vital role in determining what part of the web page will be captured in the resulting PDF document. Specifically, it refers to the visible area of the web page that you intend to convert.

Zoom, within the context of HTML to PDF rendering, governs the scaling of web page content in the PDF document. The ability to fine-tune the zoom level provides a means to adjust the size of the content in the resulting PDF, ensuring it aligns with your desired layout and formatting.

Install with NuGet

Install-Package IronPdf

nuget.org/packages/IronPdf/

or

Download DLL

Download DLL

Manually install into your project

Paper Fit Modes

Access the PaperFit field in RenderingOptions to invoke a preset method that can be used for a specific rendering type and mode. Let's examine each PaperFit mode in more detail by rendering the well-known Wikipedia page for comparison.

Chrome Default Rendering

Lays out PDF pages in the same way as they appear in Google Chrome's print preview. This method configures the rendering options to mimic the appearance of a web page when printed from Google Chrome's print preview. The responsive CSS viewport for the specified paper size is interpreted based on the width of that paper size. Use the UseChromeDefaultRendering method to configure this.

: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")

Responsive CSS Rendering

In responsive CSS mode, you can specify a viewport width by passing a value to the UseResponsiveCssRendering method. The default viewport width is 1280 pixels. As you may have noticed, the viewport unit is pixel-based, representing a virtual browser viewport for responsive CSS designs.

Responsive CSS is used to define the rendering of HTML based on the ViewPortWidth parameter, scaling the content to fit the width of the specified paper size.

: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")

Scaled Rendering

The UseScaledRendering method adopts a layout that mimics the behavior of 'Chrome Print Preview' for a specified paper size. It also provides an additional zoom level that developers can manually adjust. This method enables the option to scale the content according to the input zoom percentage.

: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")

Fit to Page Rendering

Conversely, 'fit to page' rendering scales content to fit the specified paper size. It measures the minimum HTML content width after rendering and scales it to fit the width of one sheet of paper where possible. The configurable minimum pixel width is used as a pixel-based minimum width for the document to ensure correct display and responsiveness to CSS3 layout rules.

: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")

Continuous Feed Rendering

Continuous feed rendering creates a single-page PDF that enforces the entire content's width and height to fit onto one page, making it suitable for documents like consumer bills or receipts. The default width for the PDF page is 80.0 millimeters, and the default margin is 5 millimeters.

The ability to customize the page width and margin using the 'width' and 'margin' parameters provides flexibility, making it a convenient choice for creating concise, single-page documents.

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

using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

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

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

pdf.SaveAs("continuousFeed.pdf");

Imports IronPdf

Private renderer As New ChromePdfRenderer()

' Continuous feed rendering
renderer.RenderingOptions.PaperFit.UseContinuousFeedRendering()

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

pdf.SaveAs("continuousFeed.pdf")