How to Debug HTML in Chrome to Create Pixel Perfect PDFs in C

それはIronPDFを他 for .NET PDFライブラリと区別します

IronPDFはGoogleのChromium Rendererを使用することで、市場で異彩を放ち、Chromeブラウザで見るHTMLがPDFでもまったく同じに見えることを意味します。 このチュートリアルでは、ChromeとIronPDFで適用する必要のあるいくつかの設定を案内します。

明確にするために、多くの競合技術の"HTMLからPDF"への変換がW3C基準に準拠せず、HTML5、CSS3、またはJavaScriptをサポートせず、wkhtmltopdfのような基盤レンダラーを使用しています。

IronPDFと競合他社の比較

<div class="competitors-sectionwrapper-even-1"" <div class="competitorscard"" <p class="competitorsheader""IronPDF</p" <img class="competitorsimage img-popup" src="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/bootstrap_ironpdf_p1.webp" alt="IronPDF" data-fullsize="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/bootstrap_ironpdf_p1.webp" " <p class="competitorsdownload-link"" <i class="fas fa-file-pdf""</i". <a href="https://raw.githubusercontent.com/iron-software/iron-nuget-assets/main/IronPDF-Tutorial/Bootstrap_IronPDF.pdf""PDFをダウンロードする</a"。 </p" </div" <div class="competitorscard"" <p class="competitorsheader""バニラクロム</p" <img class="competitorsimage img-popup" src="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/bootstrap_chrome_p1.webp" alt="バニラクロム" data-fullsize="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/bootstrap_chrome_p1.webp" " <p class="competitorsdownload-link"" <i class="fas fa-file-pdf""</i". <a href="https://raw.githubusercontent.com/iron-software/iron-nuget-assets/main/IronPDF-Tutorial/Bootstrap_Chrome.pdf""PDFをダウンロードする</a"。 </p" </div" </div" <div class="competitors-sectionwrapper"" <div class="competitorscard"" <p class="competitorsheader""Aspose.PDF</p" <img class="competitorsimage img-popup" src="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/bootstrap_aspose_p1.webp" alt="Aspose.PDF" data-fullsize="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/bootstrap_aspose_p1.webp" " <p class="competitorsdownload-link"" <i class="fas fa-file-pdf""</i". <a href="https://raw.githubusercontent.com/iron-software/iron-nuget-assets/main/IronPDF-Tutorial/Bootstrap_Aspose.pdf""PDFをダウンロードする</a"。 </p" </div" <div class="competitorscard"" <p class="competitorsheader""iText</p" <img class="competitorsimage img-popup" src="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/bootstrap_itext.webp" alt="iText" data-fullsize="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/bootstrap_itext.webp" " <p class="competitorsdownload-link"" <i class="fas fa-file-pdf""</i". <a href="https://raw.githubusercontent.com/iron-software/iron-nuget-assets/main/IronPDF-Tutorial/Boostrap_iText.pdf""PDFをダウンロードする</a"。 </p" </div" <div class="competitorscard"" <p class="competitorsheader""wkhtmltopdf</p" <img class="competitorsimage img-popup" src="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/bootstrap_wkhtmltopdf_p1.webp" alt="wkhtmltopdf" data-fullsize="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/bootstrap_wkhtmltopdf_p1.webp" " <p class="competitorsdownload-link"" <i class="fas fa-file-pdf""</i". <a href="https://github.com/iron-software/iron-nuget-assets/blob/main/IronPDF-Tutorial/Bootstrap_wkhtmltopdf.pdf""PDFをダウンロードする</a"。 </p" </div" </div"

他の製品との比較の完全なリストを見るには、ブログを参照してください。

[p 機能]|IronPDFのChrome Renderer|Aspose vs IronPDF|iText vs IronPDF

Chromeで切り捨てられたボタンとテキストの例

Chromeで切り捨てられたテキストの別の例

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

1ページを超えるようなテーブルを含むHTMLがある場合、おそらく各PDFページでテーブルヘッダーを繰り返したいと思うでしょう。

• この場合、使用できるのは 印刷 CssMediaTypeのみです。
• 画面 を使用すると、Chrome はヘッダーを 1 回だけ印刷するように指示されます。

画面と印刷の例の比較

印刷モードでは読み込まれない画像やアイコンが、画面モードでは読み込まれることがあります:

2a. DevToolsを開き、ChromeでCSSメディアのエミュレートを画面/印刷に設定する

1. これを行うために、Chrome内で DevToolsを開く。

   

2. コマンドメニューを開くには、Command+Shift+P (Mac)またはControl+Shift+P (Windows、Linux、ChromeOS)を押してください。 レンダリングと入力を開始し、"Show Rendering"を選択し、Enterキーを押します。 DevToolsウィンドウの下部にレンダリングタブが表示されます。 詳細なヘルプ

<img src="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/find_emulate_css_type.gif" alt=""レンダリングを表示"に移動し、CSS メディア タイプを検索します""

3. 下に移動して Emulate CSS media のドロップダウンを見つけ、オプション 画面 または 印刷 を選択します。 ウェブページにいる場合、設定が有効になるために(Ctrl+Rで)再読み込みする必要があるかもしれません。

<div class="competitors-sectionwrapper-even-1"" <div class="competitorscard" style="width: 48%;"" <img src="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/view_css_print.gif" alt="Switch to CSS Media Type 印刷" class="img-responsive add-shadow" style="margin-bottom: 30px;"" <p class="competitorsdownload-link" style="color: #181818; font-style: italic;"" 印刷 </p" </div" <div class="competitorscard" style="width: 48%;"" <img src="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/view_css_screen.gif" alt="Switch to CSS Media Type 画面" class="img-responsive add-shadow" style="margin-bottom: 30px;"" <p class="competitors__download-link" style="color: #181818; font-style: italic;"" 画面 </p" </div" </div"

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

正確な表示を得るために、Chrome の印刷ダイアログで用紙サイズを変更し、"背景画像の印刷"を有効にする必要があります。

2c. 正しい印刷プレビューの設定を行う

• IronPDFプロジェクトで使用している用紙サイズ (A4 や Letter など) を選択してください。
• Margins ドロップダウンで Custom を選択し、4 辺すべてを 1 インチの余白 (1") に設定します。
• Background Graphics チェックボックスを有効にします。
• 横向きのドキュメントを出力する場合は、必ず Layout を Landscape に設定してください。

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

3a. IronPDFでCSSメディアタイプを設定する

ウェブページデザインを100%の精度で一致させるためには、コード内でChromeに設定したのと同じCSSメディアタイプを選ばなければなりません。

PdfCssMediaType.Screen には背景や、インクを節約するためにプリンター向けに設計されたデフォルトの PdfCssMediaType.Print 形式では省略される可能性のある大きな画像が含まれていることに注意してください。

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

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

3b. 適切なレンダーディレイとレンダータイムアウトを設定する

IronPDFのデフォルトのレンダリングタイムアウトは60秒です。 これを超えて処理が完了しないものは、レンダリングオプションを編集しない限りレンダリングされません。 デフォルト設定を上書きするには、RenderingOptions.Timeout オプションを調整する必要があります。

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

:path=/static-assets/pdf/content-code-examples/tutorials/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

• RenderDelayとJavaScript (コード例)
• RenderDelay (APIリファレンス)
• Timeout (APIリファレンス)

次に何ができるのかを見てみましょうか？ こちらのチュートリアルページをご覧ください: 追加機能