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

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

チャクニット・ビン
チャクニット・ビン
2021年9月22日
更新済み 2024年10月20日
共有:
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のおかげで、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

IronPDF

Download PDF

Vanilla Chrome

Vanilla Chrome

Download PDF

Aspose.PDF

Aspose.PDF

Download PDF

iText

iText

Download PDF

wkhtmltopdf

wkhtmltopdf

Download PDF

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

機能 IronPDFのChromeレンダラー Aspose vs IronPDF iText vs IronPDF

IronPDFの最適化されたChromeレンダラーはChromeよりも優れています。

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

Chromeでボタンやテキストが切れる例:

Chromeではボタンが途切れるが、IronPDFでは途切れない

Chromeでテキストが切り取られる別の例:

Chromeでは切り捨てられますが、IronPDFではそうではありません

なぜ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/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

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

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

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

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

画面と印刷の例の比較

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

印刷例 1

画面例1

Chrome をセットアップする

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

ピクセルパーフェクトなPDFをレンダリングして、印刷フォーマットでは通常省略されるすべての画像、アイコン、背景を含めるには、Screen CSSメディアオプションを使用してください。

2a.

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

  1. これを行うには、ChromeでDevToolsを開きます。 Chromeでインスペクトを使用する

  1. Command+Shift+P（Mac）または Control+Shift+P（Windows、Linux、ChromeOS）を押して、コマンドメニューを開きます。 レンダリングを入力し始め、レンダリングを表示を選択して、Enterキーを押します。 DevToolsは、DevToolsウィンドウの下部にレンダリングタブを表示します。 （詳細ヘルプ）

    表示レンダリングを表示してから、CSSメディアタイプを検索してください。
  2. 下に移動して、Emulate CSS media のドロップダウンを見つけ、Screen または Print のオプションを選択します。 ウェブページにいる場合、設定を有効にするためには再読み込み（Ctrl+R）が必要な場合があります。
    CSSメディアタイプをprintに切り替える

    印刷

    CSSメディアタイプをスクリーンに切り替える

    スクリーン

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/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.

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

IronPDFのデフォルトのレンダリングタイムアウトは60秒です。 この時間より長く処理にかかるものは、レンダリングオプションを編集しない限りレンダリングされません。

デフォルト設定を上書きするには、RenderingOptions.Timeoutオプションを調整する必要があります。

タイムアウトを設定していないか、設定したタイムアウトより長いレンダーディレイがあると、「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
$vbLabelText   $csharpLabel
チャクニット・ビン
チャクニット・ビン
  今すぐエンジニアリングチームとチャット
ソフトウェアエンジニア
ChaknithはIronXLとIronBarcodeで作業しています。彼はC#と.NETに深い専門知識を持ち、ソフトウェアの改善と顧客サポートを支援しています。ユーザーとの対話から得た彼の洞察は、より良い製品、文書、および全体的な体験に貢献しています。