C#でピクセル パーフェクトなPDFを作成するためにChromeでHTMLをデバッグする方法</p"

それはIronPDFを他の.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はヘッダーを一度だけ印刷するように指示します。

画面と印刷の例の比較

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

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

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

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

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を選択し、四方すべてを(1インチ)1インチの余白に設定してください。
• Background Graphicsのチェックボックスを有効にします。
• ドキュメントを横向き出力するつもりであれば、LayoutをLandscapeに設定してください。

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

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

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

背景や大きな画像を含むPdfCssMediaType.画面は、デフォルトであり、インクを節約するために設計されたPdfCssMediaType.印刷形式では省略されることがあります。

: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 Exceptionが発生することに留意してください。 このエラーが発生する場合は、これらの値を増やす必要があるかもしれません。

: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リファレンス)

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