バーチャルビューポートとズームの使い方

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

HTMLからPDFへのレンダリングにおいて、ビューポートはウェブページのレイアウトを最終的なPDFドキュメントにどのように取り込むかを決定する上で重要な役割を果たします。 具体的には、ブラウザがウェブページをレンダリングする仮想画面サイズを指します。

HTMLからPDFへのレンダリングにおいて、ZoomはPDFドキュメント内のウェブページコンテンツのスケーリングを制御します。 ズームレベルを微調整する機能により、生成されるPDFのコンテンツのサイズを調整し、希望のレイアウトやフォーマットに合わせることができます。


PDF 用 C# NuGet ライブラリ

でインストール NuGet

Install-Package IronPdf
または
Java PDF JAR(ジャバPDF JAR)

ダウンロード DLL (ディーエルエル)

DLLをダウンロード

プロジェクトに手動でインストールする

PDF 用 C# NuGet ライブラリ

でインストール NuGet

Install-Package IronPdf
または
Java PDF JAR(ジャバPDF JAR)

ダウンロード DLL (ディーエルエル)

DLLをダウンロード

プロジェクトに手動でインストールする

今日からプロジェクトでIronPDFを使い始めましょう。無料のトライアルをお試しください。

最初のステップ:
green arrow pointer

チェックアウト IronPDF オン Nuget 迅速なインストールと展開のために。8百万以上のダウンロード数により、PDFをC#で変革しています。

PDF 用 C# NuGet ライブラリ nuget.org/packages/IronPdf/
Install-Package IronPdf

インストールを検討してください IronPDF DLL 直接。ダウンロードして、プロジェクトまたはGACの形式で手動でインストールしてください。 IronPdf.zip

プロジェクトに手動でインストールする

DLLをダウンロード

ペーパーフィットモード

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")
VB   C#

レスポンシブ CSS レンダリング

レスポンシブCSSモードでは、UseResponsiveCssRenderingメソッドに値を渡すことでビューポート幅を指定できます。 デフォルトのビューポートの幅は1280ピクセルです。 ご存じかもしれませんが、ビューポート単位はピクセルベースであり、レスポンシブCSSデザインのための仮想ブラウザビューポートを表しています。

レスポンシブCSSは、HTMLのレンダリングをViewPortWidthパラメーターに基づいて定義し、指定された用紙サイズの幅に合わせてコンテンツをスケーリングするために使用されます。

: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コンテンツ幅を測定し、可能な場合は1枚の用紙の幅に合わせて拡大縮小します。 設定可能な最小ピクセル幅は、ドキュメントの正しい表示と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#

連続フィードレンダリング

連続フィードレンダリングは、全体のコンテンツの幅と高さを1ページに収まるようにすることで、消費者の請求書や領収書などの文書に適しています。PDFページのデフォルトの幅は80.0ミリメートルで、デフォルトの余白は5ミリメートルです。

「width」パラメーターと「margin」パラメーターを使用してページの幅と余白をカスタマイズする機能は柔軟性を提供し、簡潔な単一ページのドキュメントを作成するための便利な選択肢となります。

: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")
VB   C#