1. IronPDF
  2. チュートリアル
  3. ChromeでHTMLデバッグ
C#でHTMLをPDFに変換する方法 .NET 8

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

Curtis Chau
Curtis Chau
更新日:
This article was translated from English: Does it need improvement?
Translated
View the article in English

IronPDFの開発者として、IronPDFが作成したPDFドキュメントがパーフェクトに見えるだけでなく、顧客が期待する通りに見えることを理解しています。 ピクセルパーフェクトなPDFを作成するには、優れたHTMLテンプレートを開発するか、Web開発者と協力して作成してもらう必要があります。 IronPDFは、Chrome Rendererのおかげで、あなたのHTMLに対してピクセルパーフェクトな形でPDFをレンダリングし、Chromeでの表示と同一に見えるようにするオプションを提供しています。

クイックスタート: IronPDFでピクセルパーフェクトな PDF を作成する

IronPDFの強力なChrome Rendererを使用して、HTMLを簡単にピクセルパーフェクトなPDFに変換します。 このクイックガイドは、HTML5、CSS3、およびJavaScriptへのIronPDFの完全なサポートを活用して、正確で予測可能なPDF出力を実現するのに役立ちます。 ほんの数行のコードで、HTMLコンテンツをChromeで表示される通りにレンダリングし、WebからPDFへのシームレスな移行を保証します。 レイアウトの精度を保ちながら、使いやすさを損なわずに開発者に最適です。

  1. IronPDF をNuGetパッケージマネージャでインストール

    PM > Install-Package IronPdf

  2. このコード スニペットをコピーして実行します。

    var Renderer = new IronPdf.ChromePdfRenderer();
Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;
Renderer.RenderHtmlAsPdf("<html>Your HTML content here</html>").SaveAs("output.pdf");

  3. 実際の環境でテストするためにデプロイする

    今日プロジェクトで IronPDF を使い始めましょう無料トライアル

    arrow pointer

IronPDFのChrome Rendererとは?

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

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

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

IronPDFと競合他社の比較

IronPDF

IronPDF

PDFをダウンロードする

バニラクロム

バニラクロム

PDFをダウンロードする

Aspose.PDF

Aspose.PDF

PDFをダウンロードする

iText

iText

PDFをダウンロードする

wkhtmltopdf

wkhtmltopdf

PDFをダウンロードする

他の製品との比較の完全なリストは、ブログをご覧ください。

[pFeatures related to IronPDFと競合他社の比較 機能]|IronPDFのChrome Renderer|Aspose vs IronPDF|iText vs IronPDF

IronPDFの最適化されたChrome RendererはChromeより優れています

IronPDFがChrome自体を超える2つの例。 Chromeで2ページに分割されるボタンとテキストが、IronPDFではそのまま保持されます。

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

Chromeではボタンが切れて表示されるが、IronPDFでは表示される

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

Chromeではテキストが切れて表示されるが、IronPDFでは表示される

HTMLをPDFに変換する理由?

開発者は、既存のWebブランディングに一致する予測可能な結果を提供するため、HTMLをPDFに変換することを好みます。 設計は、十分に文書化された標準化されたHTML、CSS、およびJavaScript技術を使用して実装されます。

  • 出力のレイアウトとデザインがウェブサイトと完全に一致します。
  • Web開発者は絶対的な正確さをもって設計することに集中できます。
  • .NET開発者はレイアウトではなくアプリケーションロジックに集中することができます。 バックエンド開発者は、レイアウトとデザインのタスクをウェブデザイナーに委ねることができます。
Icon Quote related to HTMLをPDFに変換する理由?

私のお気に入りのこの種のライブラリはIronPDFです。PDFファイルの迅速で効率的な操作が可能です。また、PDF/A形式へのエクスポートやPDF文書へのデジタル署名といった多くの貴重な機能も備えています。

Milan Jovanovic related to HTMLをPDFに変換する理由?

Milan Jovanovic

Microsoft MVP

ケーススタディを見る
Icon Quote related to HTMLをPDFに変換する理由?

IronOCRのおかげで私たちは年間$40,000を手作業の処理から節約し、生産性を向上させ、高影響のタスクにリソースを充てることができます。非常にお勧めします。

Brent Matzelle related to HTMLをPDFに変換する理由?

Brent Matzelle

最高技術責任者, OPYN

ケーススタディを見る
Icon Quote related to HTMLをPDFに変換する理由?

IronSuiteは私たちの業務において重要な役割を果たしています。これらは、フロアプランの作成や在庫管理の改善を含め、ビジネス全体の効率を向上させるツールです。

David Jones related to HTMLをPDFに変換する理由?

David Jones

リードソフトウェアエンジニア、Agorus Build

ケーススタディを見る

1. CSSメディアタイプの印刷または画面を使用するか決定する

IronPDFのレンダラーには、画面の2つのメディアレンダリングオプションがあります。 視覚的な並列比較は、このチュートリアルの終わりにある"画面と印刷の例の比較"セクションを参照してください。

  • CssMediaType.印刷 は、プリンターでの一般的な使用に最適化されたデフォルトのレンダリングオプションです。 これは、ページの一部の背景画像、アイコン、およびインクを多く使用する要素が異なるレンダリングをされるか省略されることを意味します。 このオプションは、背景画像のないドキュメントに適しており、デフォルトの印刷プレビューです。
  • CssMediaType.画面 は、PDF を画面上の Chrome 内で表示されるのと同じ見た目に表示するためのレンダリングオプションです。 HTMLデバッグ目的で、Chromeブラウザ内で印刷プレビューがIronPDFのように正確に表示されるようにいくつかのオプションを設定する必要があります。
:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-1.cs
// Pixel Perfect HTML Formatting Settings
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print; // or Screen
' Pixel Perfect HTML Formatting Settings
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print ' or Screen
$vbLabelText   $csharpLabel

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

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

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

画面と印刷の例の比較

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

PRINT 1 の例
画面 1 の例

2. Chromeをセットアップする

IronPDFはChrome Rendering Engineを誇らしげに利用しています。IronPDFがあなたのHTMLをChromeと同様にレンダリングするために次の手順に従ってください。 この結果を得るためにChrome内で事前に行う必要があるいくつかのステップがあります。

通常、PRINT形式では省略されがちな画像、アイコン、背景をすべて含んだピクセルパーフェクトなPDFを作成するには、必ず 画面 CSSメディアオプションを使用してください。

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

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

    Chromeの

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

レンダリングを表示に移動し、CSSメディアタイプを検索

  1. 下にスクロールして Emulate CSS media のドロップダウンを見つけ、画面 または 印刷 のオプションを選択してください。 ウェブページにいる場合、設定が有効になるために（Ctrl+Rで）再読み込みする必要があるかもしれません。
Switch to CSS Media Type 印刷

印刷

Switch to CSS Media Type 画面

画面

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.画面 には背景や大きな画像が含まれていますが、これらはインクを節約するためにプリンター向けに設計されたデフォルト形式である 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;
' Example using PdfCssMediaType.Screen
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen ' or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = True
$vbLabelText   $csharpLabel

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
$vbLabelText   $csharpLabel

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

よくある質問

HTMLからピクセルパーフェクトなPDFレンダリングを達成するにはどうすればいいですか？

HTMLからピクセルパーフェクトなPDFレンダリングを達成するには、IronPDFのChrome Rendererを使用することができます。これにより、Chromeブラウザに表示されるHTMLコンテンツが生成されたPDFと完全に一致することが保証されます。

HTMLからPDFへの変換にIronPDFを使用する利点は何ですか？

IronPDFは、HTML5、CSS3、およびJavaScriptをサポートし、他の多くのライブラリとは異なり、WebブラウザでのHTMLコンテンツの視覚的な外観に一致するPDFを開発者が生成できるようにします。

IronPDFでCSSメディアタイプをどのように設定できますか？

IronPDFでCSSメディアタイプを設定するには、背景のないドキュメントには「Print」を選択し、オンスクリーンの外観に一致させるためには「Screen」を選択して、PDF出力がニーズに一致するようにします。

PDFレンダリングのためにChromeを設定するにはどのようなステップを踏むべきですか？

PDFレンダリングのためにChromeを設定するには、DevToolsを開き、「Emulate CSS media」を「Screen/Print」に有効にし、プリントプレビュー設定を調整してPDFが希望のレイアウトに一致するようにします。

IronPDFのレンダリング問題を解決するにはどうすればよいですか？

レンダリングの問題が発生した場合、例えば「PDFをレンダリングできません」という例外が発生した場合は、IronPDFのオプション内でレンダー遅延またはレンダータイムアウト設定を増やすことを試みてください。結果が改善されることがあります。

IronPDFを使用して、ウェブデザインに合ったPDFをレンダリングすることはできますか？

はい、IronPDFはGoogle Chromium Rendererを使用して最新のWebテクノロジーをサポートすることで、ウェブデザインに正確に一致するPDFをレンダリングできるようにします。

なぜIronPDFはGoogle Chromium Rendererを使用しているのですか？

IronPDFは、HTMLがChromeブラウザで表示される内容とPDFで作成される内容が完全に一致することを保証し、一貫性のある高品質な出力を提供するために、Google Chromium Rendererを使用しています。

IronPDF は .NET 10 と互換性がありますか? また、新しい .NET 10 プロジェクトで使用できますか?

はい。IronPDFは.NET 10（および.NET 9、.NET 8以前）を明示的にサポートしており、すぐに使用できます。プロジェクトで.NET 10をターゲットにすれば、特別な回避策を必要とせずに、IronPDFのHTMLからPDFへの変換、レンダリング、編集、署名APIを利用できます。

Curtis Chau
Curtis Chau
  今すぐエンジニアリングチームとチャット
テクニカルライター

Curtis Chauは、カールトン大学でコンピュータサイエンスの学士号を取得し、Node.js、TypeScript、JavaScript、およびReactに精通したフロントエンド開発を専門としています。直感的で美しいユーザーインターフェースを作成することに情熱を持ち、Curtisは現代のフレームワークを用いた開発や、構造の良い視覚的に魅力的なマニュアルの作成を楽しんでいます。

開発以外にも、CurtisはIoT（Internet of Things）への強い関心を持ち、ハードウェアとソフトウェアの統合方法を模索しています。余暇には、ゲームをしたりDiscordボットを作成したりして、技術に対する愛情と創造性を組み合わせています。

準備はできましたか？
Nuget ダウンロード 20,296,129 | バージョン: 2026.7 リリースされたばかり
Still Scrolling Icon

まだスクロールしていますか?

すぐに証拠が欲しいですか? PM > Install-Package IronPdf
サンプルを実行するHTML が PDF に変換されるのを確認します。