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 in C# comparisonのような基盤のレンダラーを使用しています。
競合他社との比較におけるIronPDF
他の製品との比較の全リストを見るには、比較ブログをご覧ください。
Iron Software ライブラリの特徴 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デザイナーに委任することができます。
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テーブルヘッダーの繰り返し
HTMLに複数のページにまたがるテーブルが含まれている場合、おそらく各PDFページにテーブルヘッダーが繰り返されることを望むでしょう。
-
この場合、
PrintCssMediaType のみ 使用できます。 Screenを使用すると、Chrome はヘッダーを一度だけ印刷するよう指示します。
画面と印刷の例の比較
Printモードでは、Screenモードで読み込まれる多くの画像やアイコンが読み込まれません。
Chrome をセットアップする
IronPDFは誇りを持ってChromeレンダリングエンジンを使用しています。IronPDFがChrome内で表示される通りにHTMLをレンダリングするために、次の手順に従ってください。 これを達成するために Chrome で事前に行う必要があるいくつかのステップは以下の通りです。
すべての画像、アイコン、および背景を含むピクセルパーフェクトなPDFをレンダリングするために、通常印刷形式では省略されるものについては、Screen CSSメディアオプションを必ず使用してください。
2a.
DevToolsを開き、Chromeで[CSSメディアを画面/印刷にエミュレートする]を有効にしてください。
- これを行うには、ChromeでDevToolsを開きます。
-
Command+Shift+P（Mac）または Control+Shift+P（Windows、Linux、ChromeOS）を押して、コマンドメニューを開きます。 レンダリングを入力し始め、レンダリングを表示を選択して、Enterキーを押します。 DevToolsは、DevToolsウィンドウの下部にレンダリングタブを表示します。 レンダリング設定に関する詳細なヘルプ
- 下に移動して、
Emulate CSS mediaのドロップダウンを見つけ、ScreenまたはPrintのオプションを選択します。 ウェブページにいる場合、設定を有効にするためには再読み込み（Ctrl+R）が必要な場合があります。
印刷
スクリーン
2b.
印刷プレビューウィンドウを開く（WindowsではCtrl+P）
Chromeの印刷ダイアログで用紙サイズを変更し、「背景画像を印刷する」を有効にする必要があるかもしれません。正確な表示を得るためにお願いします。
2c.
印刷プレビュー設定を正しく設定する
- IronPDFプロジェクトで使用している用紙サイズを選択してください。例えば、
A4やLetterなど。 - ドロップダウンメニューから
Marginsを選択し、Customを選んで四辺すべてを1インチ (1") の余白に設定します。 背景グラフィックチェックボックスを有効にします。-
ランドスケープ文書を出力する場合は、
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;3b.
適切にRender DelayとRender Timeoutを設定する
IronPDFのデフォルトのレンダリングタイムアウトは60秒です。 レンダリングプロセスがこれより長くかかる場合、タイムアウト例外がスローされます。 デフォルト設定を上書きするには、RenderingOptions.Timeoutオプションを調整する必要があります。 一方、レンダリング遅延値は、IronPDFがレンダリングを開始する前に待つべき時間です。 この待機時間は、画像、フォント、JavaScriptコードなどのアセットが適切に実行されるために重要です。
タイムアウトを設定していないか、設定したタイムアウトより長いレンダーディレイがあると、「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
