バーチャルビューポートとズームの使い方
HTMLからPDFへのレンダリングにおいて、ビューポートはウェブページのレイアウトを最終的なPDFドキュメントにどのように取り込むかを決定する上で重要な役割を果たします。 具体的には、ブラウザがウェブページをレンダリングする仮想画面サイズを指します。
HTMLからPDFへのレンダリングにおいて、ZoomはPDFドキュメント内のウェブページコンテンツのスケーリングを制御します。 ズームレベルを微調整する機能により、生成されるPDFのコンテンツのサイズを調整し、希望のレイアウトやフォーマットに合わせることができます。
IronPDFを始めましょう
今日から無料トライアルでIronPDFをあなたのプロジェクトで使い始めましょう。
バーチャルビューポートとズームの使い方
ペーパーフィットモード
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.csusing 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");レスポンシブ CSS レンダリング
レスポンシブCSSモードでは、UseResponsiveCssRenderingメソッドに値を渡すことでビューポートの幅を指定できます。 デフォルトのビューポートの幅は1280ピクセルです。 ご存じかもしれませんが、ビューポート単位はピクセルベースであり、レスポンシブCSSデザインのための仮想ブラウザビューポートを表しています。
レスポンシブCSSは、ViewPortWidthパラメーターに基づいてHTMLのレンダリングを定義し、指定された用紙サイズの幅に合わせてコンテンツをスケーリングするために使用されます。
:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-responsive-css.csusing 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");スケーリングレンダリング
UseScaledRendering メソッドは、指定された用紙サイズに対して「Chrome Print Preview」の動作を模倣するレイアウトを採用します。また、開発者が手動で調整できる追加のズームレベルを提供します。このメソッドは、入力されたズームパーセンテージに応じてコンテンツのスケールを調整するオプションを可能にします。
:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-scaled.csusing 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");ページに合わせたレンダリング
逆に、「ページに合わせる」レンダリングは、指定された用紙サイズにコンテンツを合わせて拡大縮小します。これは、レンダリング後の最小のHTMLコンテンツ幅を測定し、可能な場合は1枚の用紙の幅に合わせて拡大縮小します。 設定可能な最小ピクセル幅は、ドキュメントの正しい表示とCSS3レイアウトルールへの応答性を確保するためにピクセル単位の最小幅として使用されます。
:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-fit-to-page.csusing 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");連続フィードレンダリング
連続フィードレンダリングは、全体のコンテンツの幅と高さを1ページに収まるようにすることで、消費者の請求書や領収書などの文書に適しています。PDFページのデフォルトの幅は80.0ミリメートルで、デフォルトの余白は5ミリメートルです。 'receipt.html' ファイルをPDFにレンダーしましょう。
width'と'margin'パラメータを使用してページ幅とマージンをカスタマイズできるため、柔軟性があり、簡潔な単一ページのドキュメントを作成するのに便利です。
:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-continuous-feed.csusing 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");
