1. IronPDF
  2. トラブルシューティング
  3. ピクセルパーフェクトHTMLフォーマット

Pixel Perfect HTML Formatting in IronPDF

Curtis Chau
Curtis Chau
更新日:
This article was translated from English: Does it need improvement?
Translated
View the article in English
role="alert">貴社はPDFのセキュリティとコンプライアンスのための年間購読に多くを費やしています。デジタル署名、墨消し、暗号化、保護などのSaaSサービス管理を一括払いで提供するIronSecureDocを検討してください。今すぐお試しください

PDFを完璧に見せるには、優れたHTMLテンプレートを開発するか、ウェブ開発者に依頼する必要があります。 このトラブルシューティング記事は、HTMLのデバッグに関する完全なチュートリアルからの抜粋です。

1. HTMLのデバッグとテスト

Chromeや類似のデスクトップブラウザでHTML、CSS、JSをデバッグすることができます。 それが完璧に機能することを確認したら、IronPDFに接続すると、Chromeでの見た目と全く同じように表示されます。

基本的な使い方

このコード例は、最新のChromeデスクトップブラウザにぴったりなPDFをレンダリングします。

// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Print'
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Print'
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
' Create a new ChromePdfRenderer instance
Dim renderer As New ChromePdfRenderer()

' Set the CSS media type to 'Print'
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print

' Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = True
$vbLabelText   $csharpLabel

高度なHTML開発

高度なChromeユーザーデベロッパーは、IronPDFのデフォルト設定を使用し、「Emulate CSS media > Screen」を有効にすることで、100%の精度を達成できます。 詳細はこちらをご参照ください。

// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Screen' for better preview consistency
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Screen' for better preview consistency
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
' Create a new ChromePdfRenderer instance
Dim renderer As New ChromePdfRenderer()

' Set the CSS media type to 'Screen' for better preview consistency
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen

' Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = True
$vbLabelText   $csharpLabel

2. 結果を比較する

結果を比較するには、ChromeデスクトップウェブブラウザでHTMLを開きます。

注意: 任意のHTML文字列とアセットをスタンドアロンのHTMLファイルとしてエクスポートし、それらを手動で編集するか、ウェブデベロッパーに依頼してください。

PDF結果の比較

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

Chromeの印刷ダイアログで用紙サイズを変更し、背景画像の印刷を有効にする必要があるかもしれません。

印刷プレビューウィンドウ

4. 「PDFとして保存」オプションを選択する

ChromeでPDFへの印刷が完璧な場合、IronPDFもそれに一致します。

PDFとして保存オプション

5. IronPDFを実行する

HTMLが完璧である今、それをIronPDFで実行すると、全く同じように表示されます。 {PlaceHolders}を使用して顧客データをマージします。 IronPDF例のコード例が非常に役立ちます！

このチュートリアルが問題の解決に役立たない場合は、エンジニアリングサポートに連絡していただければ、ドキュメントを適応・改善し、さらに支援します。

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

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

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

準備はいいですか?
Nuget ダウンロード 16,154,058 | バージョン: 2025.11 ただ今リリースされました