1. IronPDF
2. チュートリアル
3. Chrome で HTML をデバッグする

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

チャクニット・ビン

2021年9月22日

更新済み 2024年10月20日

共有:

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

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

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

IronPDFは、Google Chromium Rendererを使用しているため、Chromeブラウザで表示されるHTMLがPDFでも見た目が全く同じになる点で市場で際立っています。 このチュートリアルでは、これを実現するためにChromeおよびIronPDFで適用する必要があるいくつかの設定を順を追って説明します。

明確に言えば、多くの競合他社によって実装されている「HTML to PDF」技術は、W3C標準に準拠しておらず、HTML5、CSS3、またはJavaScriptをサポートしていないか、またはなどの基礎となるレンダラーを使用しています。 wkhtmltopdf.

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

IronPDF

PDFをダウンロード

バニラ クローム

PDFをダウンロード

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

機能 IronPDFのChromeレンダラー Aspose vs IronPDF iText vs 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/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

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

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

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

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

画面と印刷の例の比較

多くの画像やアイコンは、スクリーンモードでは読み込まれるが、印刷モードでは読み込まれません。

Chrome をセットアップする

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

高品質なPDFを作成し、通常印刷フォーマットでは省略されるすべての画像、アイコン、背景を含めるためには、Screen CSS メディアオプションを使用してください。

2a.

DevToolsを開き、Chromeで「CSSメディアをエミュレート可能にする」を「スクリーン/プリント」に設定します

1. これを行うには、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/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

3b.

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

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

• レンダーディレイとJavaScript (コード例)
• レンダーディレイ (APIリファレンス)
• タイムアウト (APIリファレンス)

チャクニット・ビン

  今すぐエンジニアリングチームとチャット

ソフトウェアエンジニア

ChaknithはIronXLとIronBarcodeで作業しています。彼はC#と.NETに深い専門知識を持ち、ソフトウェアの改善と顧客サポートを支援しています。ユーザーとの対話から得た彼の洞察は、より良い製品、文書、および全体的な体験に貢献しています。