如何使用虛擬視口和縮放

查克尼思·賓

2023年10月12日

已更新 2025年2月19日

Translated

View the article in English

在 HTML 轉 PDF 渲染中，視口在決定網頁布局如何捕捉到結果 PDF 文件中扮演著至關重要的角色。它特指瀏覽器應該將網頁渲染成的虛擬螢幕大小。

Zoom，在HTML到PDF渲染的上下文中，控制PDF文件中網頁內容的縮放。能夠微調縮放等級提供了一種調整結果 PDF 中內容大小的方法，確保其與您希望的佈局和格式對齊。

開始使用 IronPDF

立即在您的專案中使用IronPDF，並享受免費試用。

第一步：

如何使用虛擬視口和縮放

下載 IronPDF C# 庫以進行 PDF 渲染和視口控制
使用不同的預設模式將 HTML 轉換為 PDF
使用 Chrome 默認和響應式 CSS 模式來實現 PDF 的自動佈局
利用縮放來放大內容
為特定使用案例配置「適合頁面」和「連續輸送」

紙張適應模式

訪問 PaperFit 欄位於 RenderingOptions 中，以調用可用於特定渲染類型和模式的預設方法。讓我們通過渲染著名的維基百科頁面來更詳細地檢查每種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")

$vbLabelText $csharpLabel

響應式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")

$vbLabelText $csharpLabel

縮放渲染

UseScaledRendering 方法採用了類似於「Chrome 列印預覽」的行為的佈局，用於指定的紙張大小。它還提供了開發人員可以手動調整的額外縮放級別。此方法使得能夠根據輸入的縮放百分比縮放內容。

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

$vbLabelText $csharpLabel

適合頁面渲染

相反地，「適合頁面」渲染會按比例縮放內容以適合指定的紙張大小。它會在渲染後測量最小的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")

$vbLabelText $csharpLabel

持續進料渲染

連續饋送渲染會創建一個單頁PDF，強制整個內容的寬度和高度適合於一頁上，適合用於像是消費者帳單或收據等文件。PDF頁面的默認寬度為80.0毫米，默認邊距為5毫米。讓我們將 'receipt.html' 文件渲染為 PDF。

使用「width」和「margin」參數自訂頁面寬度和邊距的功能提供了靈活性，使其成為創建簡潔單頁文件的方便選擇。

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

$vbLabelText $csharpLabel

查克尼思·賓

立即與工程團隊聊天

軟體工程師

Chaknith 致力於 IronXL 和 IronBarcode。他在 C# 和 .NET 方面擁有豐富的專業知識，協助改進軟體並支持客戶。他從用戶互動中獲得的洞察力有助於提高產品、文檔和整體體驗。