如何使用虚拟视口和缩放

Translated

View the article in English

在HTML到PDF渲染中，视口在确定网页布局如何在生成的PDF文档中捕获扮演着至关重要的角色。具体而言，它指的是浏览器应该将网页渲染进入的虚拟屏幕大小。

在HTML到PDF渲染的上下文中，缩放控制着网页内容在PDF文档中的缩放比例。调整缩放级别的能力提供了一种调整生成PDF中内容大小的方法，确保其与您想要的布局和格式对齐。

开始使用IronPDF

立即在您的项目中开始使用IronPDF，并享受免费试用。

第一步：

如何使用虚拟视口和缩放

下载用于 PDF 渲染和视口控制的 IronPDF C# 库
使用不同的预设模式将 HTML 渲染成 PDF
使用 Chrome 浏览器默认 CSS 模式和响应式 CSS 模式实现 PDF 的自动布局
利用缩放功能缩放内容
为特定用例配置 "适合页面 "和 "连续进纸

纸张适应模式

访问RenderingOptions中的PaperFit字段以调用可用于特定渲染类型和模式的预设方法。让我们通过渲染著名的维基百科页面来详细了解每种PaperFit模式。

Chrome 默认渲染

按照它们在Google Chrome打印预览中出现的方式排列PDF页面。此方法配置渲染选项，以模仿从Google Chrome的打印预览中打印时网页的外观。指定纸张大小的响应式CSS视口基于该纸张大小的宽度解释。使用UseChromeDefaultRendering方法来配置这一点。

: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#

响应式CSS渲染

在响应式CSS模式中，您可以通过向UseResponsiveCssRendering方法传递一个值来指定视口宽度。默认的视口宽度为1280像素。正如您可能已经注意到的，视口单位是基于像素的，代表用于响应式CSS设计的虚拟浏览器视口。

响应式CSS用于根据ViewPortWidth参数定义HTML的呈现方式，将内容缩放以适应指定纸张大小的宽度。

: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#

缩放渲染

UseScaledRendering方法采用了模仿指定纸张大小的“Chrome Print Preview”行为的布局。它还提供了一个开发者可以手动调整的附加缩放级别。该方法启用了根据输入的缩放百分比来缩放内容的选项。

: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#

适合页面渲染

相反，“适应页面”渲染将内容缩放以适应指定的纸张大小。它在渲染后测量最小的HTML内容宽度，并在可能的情况下将其缩放以适应一张纸的宽度。可配置的最小像素宽度用作文档的基于像素的最小宽度，以确保正确显示和响应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#

连续进料渲染

连续进纸渲染可创建单页 PDF，强制要求整个内容的宽度和高度适合在一页上，因此适用于消费账单或收据等文档。PDF 页面的默认宽度为 80.0 毫米，默认页边距为 5 毫米。

使用 "宽度 "和 "页边距 "参数自定义页面宽度和页边距的功能提供了灵活性，使其成为创建简洁的单页文档的便捷选择。

: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#