1. IronPDF
2. ハウツー
3. Chrome で HTML をデバッグする

ChromeでHTMLをデバッグしてピクセル完璧なPDFを作成する方法

IronPDFの開発者として、私たちはIronPDFで作成されたPDFドキュメントが完璧に見えるだけでなく、お客様が期待するように正確に見える必要があることを理解しています。 ピクセルパーフェクトなPDFを実現するには、優れたHTMLテンプレートを開発するか、またはWeb開発者と協力してそれらを作成する必要があります。 IronPDFは、Chrome Rendererのおかげで、ご利用のHTMLにPDFをピクセルパーフェクトでレンダリングし、Chromeで表示されるのと同じように見えるようにするオプションを提供します。

IronPDFのChromeレンダラーとは何ですか？

IronPDFを他の.NET PDFライブラリとは一線を画す存在にする。

IronPDFは、Google Chromium Rendererを使用しているため、Chromeブラウザで表示されるHTMLがPDFでも見た目が全く同じになる点で市場で際立っています。 このガイドでは、そのためにChromeとIronPDFで必要な設定を説明します。

はっきりさせておきたいのは、競合他社が実装していると主張する「HTML to PDF」技術の多くは、W3C標準に準拠しておらず、HTML5、CSS3、JavaScriptをサポートしておらず、以下のような基礎となるレンダラーを使用しているということです。wkhtmltopdfのC#比較.

競合他社との比較におけるIronPDF

IronPDF

PDFをダウンロード

バニラ クローム

PDFをダウンロード

他の製品との比較の完全なリストを見るには、当社の比較ブログ.*

IronSoftwareライブラリの特徴 IronPdfのChromeレンダリングエンジンを使用する AsposeとIronPDFの比較分析 iTextとIronPDFの比較

IronPDFの最適化されたChromeレンダラーはChromeよりも優れています。

IronPDFがChrome自体を凌駕する二つの例。 Chromeでは2つのページに分割されてしまうボタンやテキストも、IronPDFではそのままの形で表示されます。

Chromeでボタンやテキストが切れる例:

Chromeでテキストが切り取られる別の例:

なぜHTMLからPDFを使用するのか？

開発者は、HTMLからPDFへの変換を好みます。これは既存のウェブブランディングに一致する予測可能な結果を提供するためです。 デザインは、十分に文書化された標準化されたHTML、CSS、JavaScript技術を使用して実装されます。

• アウトプットのレイアウトとデザインは、ウェブサイトと正確に一致させること。
• ウェブ開発者は絶対的な精度で設計に集中できます。
• .NET開発者はレイアウトではなくアプリケーションのロジックに集中することができます。 バックエンド開発者はレイアウトとデザインのタスクをWebデザイナーに委任することができます。

  以下の内容を日本語に翻訳してください：

1. CSSメディアタイプをPrintまたはScreenに設定します

IronPDFのレンダラーには2つのメディアレンダリングオプションがあります：Print(デフォルト)** と Screen. 視覚的な比較については、をご参照ください。このセクションの終わり. 「スクリーンと印刷の例の比較」セクションの下。

• CssMediaType.Printは、プリンターでの一般的な使用に最適化されたHTMLのデフォルトレンダリングオプションです。 これは、ページ上の一部の背景画像、アイコン、その他インクを多用する要素が異なるレンダリングになるか、または省略される可能性があることを意味します。 このオプションは背景画像のないドキュメントに適しており、デフォルトの印刷プレビューです。

• CssMediaType.Screen は、PDF が Chrome の画面上で表示される方法を正確に再現するレンダリングオプションです。 Chromeブラウザ内でいくつかのオプションを設定する必要があります。これにより、HTMLデバッグの目的でIronPDFがレンダリングするプレビューが正確に表示されるようになります。

:path=/static-assets/pdf/content-code-examples/how-to/pixel-perfect-html-to-pdf-1.cs

// Pixel Perfect HTML Formatting Settings
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print; // or Screen

' Pixel Perfect HTML Formatting Settings
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print ' or Screen

テーブルヘッダーの繰り返し

HTMLに複数のページにまたがるテーブルが含まれている場合、おそらく各PDFページにテーブルヘッダーが繰り返されることを望むでしょう。

• この場合、「Print」CssMediaType のみ使用できます。

• Screen を使用すると、Chrome はヘッダーを一度だけ印刷するように指示します。

画面と印刷の例の比較

多くの画像やアイコンは「画面」モードで表示されるが、「印刷」モードでは読み込まれない場合があります。

Chrome をセットアップする

IronPDFは誇りを持ってChromeレンダリングエンジンを使用しています。IronPDFがChrome内で表示される通りにHTMLをレンダリングするために、次の手順に従ってください。 これを達成するために Chrome で事前に行う必要があるいくつかのステップは以下の通りです。

ピクセルパーフェクトなPDFをレンダリングし、通常の印刷形式で省略されるすべての画像、アイコン、背景を含めるには、Screen CSSメディアオプションを使用してください。

2a.

DevToolsを開き、Chromeで[CSSメディアを画面/印刷にエミュレートする]を有効にしてください。

1. これを行うには、Chrome内でChromeでDevToolsを開く.

2. Command+Shift+Pを押します(Mac)または Control+Shift+P(Windows、Linux、ChromeOS)コマンドメニューを開きます。 レンダリングを入力し始め、レンダリングを表示を選択して、Enterキーを押します。 DevToolsは、DevToolsウィンドウの下部にレンダリングタブを表示します。 申し訳ありませんが、翻訳を行うための具体的なコンテンツが提供されていません。翻訳したい英語のテキストを入力してください。レンダリング設定に関するヘルプ申し訳ありませんが、翻訳を行うための具体的なコンテンツが提供されていません。翻訳したい英語のテキストを入力してください。

   
3. 以下にスクロールして、「Emulate CSS media」のドロップダウンを見つけ、「Screen」または「Print」のオプションを選択してください。 ウェブページにいる場合、再読み込みが必要かもしれません。(Ctrl+R)設定が有効になるためには。
   

   印刷

   

   画面

2b.

印刷プレビューウィンドウを開く(WindowsでCtrl+P)

Chromeの印刷ダイアログで用紙サイズを変更し、「背景画像を印刷する」を有効にする必要があるかもしれません。正確な表示を得るためにお願いします。

2c.

印刷プレビュー設定を正しく設定する

• IronPDFプロジェクトで使用している用紙サイズを選択してください。例えば、A4やLetterなどです。
• ドロップダウンメニューの「Margins（余白）」の下で「Custom（カスタム）」を選択し、すべての辺に(1インチ)1インチのマージン。
• Background Graphics チェックボックスを有効にします。

• ドキュメントを横向きで出力する場合は、LayoutをLandscapeに設定してください。

  以上です。 HTMLをデバッグし、印刷プレビューを使用してIronPDFがレイアウトをどのようにレンダリングするかを正確に確認できるようになりました。

3. IronPDFの設定

3a.

IronPDFでCSSメディアタイプを設定

ウェブページのデザインと100％一致させるためには、コード内でChromeに設定したのと同じCSSメディアタイプを選択する必要があります。

PdfCssMediaType.Screen には背景やより大きな画像が含まれており、これはデフォルトでインクを節約するためにプリンター向けに設計された PdfCssMediaType.Print 形式では省略される場合があります。

:path=/static-assets/pdf/content-code-examples/how-to/pixel-perfect-html-to-pdf-2.cs

// Example using PdfCssMediaType.Screen
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Screen; // or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = true;

' Example using PdfCssMediaType.Screen
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Screen ' or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = True

3b.

適切にRender DelayとRender Timeoutを設定する

IronPDFのデフォルトのレンダリングタイムアウトは60秒です。 レンダリングプロセスがこれより長くかかる場合、タイムアウト例外がスローされます。 デフォルト設定を上書きするには、RenderingOptions.Timeoutオプションを調整する必要があります。 一方、レンダリング遅延値は、IronPDFがレンダリングを開始する前に待つべき時間です。 この待機時間は、画像、フォント、JavaScriptコードなどのアセットが適切に実行されるために重要です。

タイムアウトが設定されていない場合、または設定されたタイムアウトよりもレンダリング遅延が長い場合、「Unable to Render PDF」という例外が発生します。 そのため、このエラーが発生している場合は、これらの値を増やす必要があるかもしれません。

:path=/static-assets/pdf/content-code-examples/how-to/pixel-perfect-html-to-pdf-3.cs

// Example of setting Timeout and RenderDelay options
renderer.RenderingOptions.Timeout = 90; // seconds (default is 60)
renderer.RenderingOptions.WaitFor.RenderDelay(30000); // milliseconds

IRON VB CONVERTER ERROR developers@ironsoftware.com

• WaitForとJavaScriptのコード例
• WaitFor APIリファレンス