如何在 C# 中使用虛擬視窗和縮放

How to use Virtual Viewport and Zoom

This article was translated from English: Does it need improvement?
Translated
View the article in English

在 HTML 到 PDF 渲染中,視窗在確定網頁佈局如何在結果 PDF 文件中被捕獲方面起著至關重要的作用。 具體而言,這指的是瀏覽器應該將網頁渲染為的虛擬屏幕大小。

在 HTML 到 PDF 渲染的上下文中,縮放控制 PDF 文檔中網頁內容的縮放比例。 調整縮放級別的能力提供了一種方法來調整結果 PDF 中內容的大小,確保其符合您期望的佈局和格式。

快速入門:使用 IronPDF 控制縮放和視窗

瞭解如何用 IronPDF 輕鬆管理 HTML 到 PDF 轉換中的縮放和視窗設置。 本快速指南提供了一段簡單的代碼段,以幫助您開始縮放 HTML 內容。 僅需幾行代碼,您即可確保您的 PDF 呈現完美,保持響應式設計元素和期望的佈局。 體驗 IronPDF 強大渲染選項的簡便性。

Nuget IconGet started making PDFs with NuGet now:

  1. Install IronPDF with NuGet Package Manager

    PM > Install-Package IronPdf

  2. Copy and run this code snippet.

    new IronPdf.ChromePdfRenderer { RenderingOptions = { ViewPortWidth = 1280, Zoom = 1.8 } }
        .RenderUrlAsPdf("https://example.com")
        .SaveAs("zoomedViewport.pdf");
  3. Deploy to test on your live environment

    Start using IronPDF in your project today with a free trial
    arrow pointer
class="hsg-featured-snippet">

簡化流程(5 個步驟)

  1. 下載用于 PDF 渲染和視窗控制的 IronPDF C# 文件庫
  2. 使用不同的預配置模式將 HTML 渲染為 PDF
  3. 使用 Chrome 默認和響應式 CSS 模式,在 PDF 中實現自動佈局
  4. 利用縮放功能縮放內容
  5. 為特定用例配置 'fit to page' 和 'continuous feed'


紙張適配模式

訪問 RenderingOptions 中的 PaperFit 字段,以調用可用於特定渲染類型和模式的預設方法。 讓我們通過渲染著名的 Wikipedia 頁面來更詳細地檢查每種 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

適合頁面渲染

相反,'fit to page' 渲染會按比例縮放內容以適應指定的紙張尺寸。它測量渲染後 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 毫米。 Let's render the 'receipt.html' file to 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

準備看看您還能做哪些其他事情嗎? 在這裡查看我們的教程頁面:轉換PDF

常見問題解答

如何將 HTML 渲染成具有響應式 CSS 樣式的 PDF?

您可以使用 IronPDF 透過其對 bootstrap 和其他 CSS 框架的支援能力,以響應式 CSS 樣式渲染 HTML,從而確保您的網頁內容準確地捕獲到 PDF 中。

在HTML轉PDF轉換過程中,視口的重要性體現在哪裡?

視窗在 HTML 轉 PDF 的過程中至關重要,因為它定義了瀏覽器用於渲染頁面的虛擬螢幕大小,直接影響 PDF 中佈局和設計的呈現方式。

將 HTML 轉換為 PDF 時,如何調整縮放等級?

使用 IronPDF,您可以透過指定縮放因子來調整縮放級別,從而控制 PDF 中內容的大小,以符合您所需的佈局和簡報效果。

IronPDF 中的 Chrome 預設渲染功能是什麼?

IronPDF 中的 Chrome 預設渲染模擬了 Google Chrome 列印預覽中網頁的外觀,使用響應式 CSS 將內容調整到指定的紙張尺寸。

產生 PDF 時,響應式 CSS 渲染是如何運作的?

IronPDF 的響應式 CSS 渲染功能可讓您指定視窗寬度,從而縮放 HTML 內容以適應紙張尺寸。預設情況下,視窗寬度設定為 1280 像素,確保內容能夠完美適應 PDF 的尺寸。

我可以使用縮放渲染進行自訂縮放調整嗎?

是的,IronPDF 中的縮放渲染功能可讓開發人員透過指定百分比來調整縮放級別,從而能夠精確控制 PDF 中網頁內容的縮放。

PDF 生成中「適應頁面」渲染有什麼好處?

IronPDF 中的「適應頁面」渲染功能會將內容縮放以適應所選的紙張尺寸,從而確保保持最小像素寬度,這對於實現正確的顯示和佈局一致性至關重要。

連續渲染與其他渲染模式有何不同?

IronPDF 中的連續進紙渲染功能可建立單頁 PDF,以容納整個內容的寬度和高度,因此非常適合需要全頁內容的文檔,例如消費者帳單或收據。

IronPDF 是否完全相容於 .NET 10,特別是視口和縮放控制方面?

是的-IronPDF 完全相容 .NET 10。它直接在 .NET 10 環境中支援所有視窗和縮放渲染選項(例如設定 ViewPortWidth、使用縮放功能、響應式 CSS),無需額外配置。 ([ironpdf.com](https://ironpdf.com/blog/net-help/net-10-features/?utm_source=openai))

Curtis Chau
技術作家

Curtis Chau 擁有卡爾頓大學計算機科學學士學位,專注於前端開發,擅長於 Node.js、TypeScript、JavaScript 和 React。Curtis 熱衷於創建直觀且美觀的用戶界面,喜歡使用現代框架並打造結構良好、視覺吸引人的手冊。

除了開發之外,Curtis 對物聯網 (IoT) 有著濃厚的興趣,探索將硬體和軟體結合的創新方式。在閒暇時間,他喜愛遊戲並構建 Discord 機器人,結合科技與創意的樂趣。

準備好開始了嗎?
Nuget 下載 16,154,058 | 版本: 2025.11 剛剛發布