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

Translated

View the article in English

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

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

IronPDFを始めましょう

今日から無料トライアルでIronPDFをあなたのプロジェクトで使い始めましょう。

最初のステップ:

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

PDFレンダリングとビューポートコントロールのためのIronPDF C#ライブラリをダウンロードする
異なる事前設定モードを使用してHTMLをPDFにレンダリングする
ChromeのデフォルトモードおよびレスポンシブCSSモードを使用して、PDFで自動レイアウトを実現する
スケーリングを利用してコンテンツを拡大する
特定のユースケースに合わせて「ページに合わせて印刷」と「連続フィード」を設定する

ペーパーフィットモード

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ミリメートルです。「'」をレンダリングしましょう。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")

VB C#