ヘッダーとコンテンツの不整合
HTMLをPDFにレンダリングする際、ヘッダーとフッターがページの端に密着している一方、本文のコンテンツは内部に押し込まれることがありますが、最も目立つのは左右のマージンです。 これは、MarginLeft = 0 が設定され、UseMarginsOnHeaderAndFooter が有効になっている場合でも発生します。
原因はChromeのデフォルトスタイリングです。 そのレンダリングエンジンは、すべてのページの <body> 要素に8ピクセルのマージンを適用します。 そのデフォルトは通常のウェブコンテンツには問題ありませんが、どの MarginLeft = 0 を ChromePdfRenderer.RenderingOptions に渡しても、コンテンツとPDFの端の間に8ピクセルのギャップが残ります。 ヘッダーとフッターは影響を受けません: マージンを 0 に設定すると、予想通りページの端に直接配置されるので、ボディだけがずれます。
このスニペットは不整合を再現します：
var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
HtmlFragment = "<h1>This is header</h1>"
};
renderer.RenderingOptions.MarginLeft = 0;
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left;
var pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>");Dim renderer As New ChromePdfRenderer()
renderer.RenderingOptions.HtmlHeader = New HtmlHeaderFooter() With {
.HtmlFragment = "<h1>This is header</h1>"
}
renderer.RenderingOptions.MarginLeft = 0
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left
Dim pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>")Dim renderer As New ChromePdfRenderer()
renderer.RenderingOptions.HtmlHeader = New HtmlHeaderFooter() With {
.HtmlFragment = "<h1>This is header</h1>"
}
renderer.RenderingOptions.MarginLeft = 0
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left
Dim pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>")
解決策
Chromeのデフォルトの <body> マージンをオーバーライドして、コンテンツをページ全体の幅でヘッダーとフッターに合わせます。 組み込みの8pxオフセットを打ち消すためにネガティブマージンを適用します：
body {
margin-left: -8px;
margin-right: -8px;
}ネガティブ値は、Chromeのデフォルトのパディングを中和し、ヘッダー、ボディ、フッターが同じ端に揃うようにします。 インラインで適用すると、修正済みのレンダリングは次のようになります：
var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
HtmlFragment = "<h1>This is header</h1>"
};
renderer.RenderingOptions.MarginLeft = 0;
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left;
var pdf = renderer.RenderHtmlAsPdf("<h1 style=\"margin-left: -8;\">Hello World</h1>"); //adjust margin left to -8 px to cancel out default Chrome marginvar renderer = new ChromePdfRenderer();
renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
HtmlFragment = "<h1>This is header</h1>"
};
renderer.RenderingOptions.MarginLeft = 0;
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left;
var pdf = renderer.RenderHtmlAsPdf("<h1 style=\"margin-left: -8;\">Hello World</h1>"); //adjust margin left to -8 px to cancel out default Chrome marginDim renderer = New ChromePdfRenderer()
renderer.RenderingOptions.HtmlHeader = New HtmlHeaderFooter() With {
.HtmlFragment = "<h1>This is header</h1>"
}
renderer.RenderingOptions.MarginLeft = 0
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left
Dim pdf = renderer.RenderHtmlAsPdf("<h1 style=""margin-left: -8;"">Hello World</h1>") 'adjust margin left to -8 px to cancel out default Chrome marginDim renderer = New ChromePdfRenderer()
renderer.RenderingOptions.HtmlHeader = New HtmlHeaderFooter() With {
.HtmlFragment = "<h1>This is header</h1>"
}
renderer.RenderingOptions.MarginLeft = 0
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left
Dim pdf = renderer.RenderHtmlAsPdf("<h1 style=""margin-left: -8;"">Hello World</h1>") 'adjust margin left to -8 px to cancel out default Chrome margin
デバッグのヒント
- クリーンスレートを推奨: 否定マージンの代わりに、CSSリセットを適用するか、デフォルトのオフセットをソースで削除するために
margin: 0を<body>要素に明示的に設定してください。 - 挙動の範囲: 8pxの隙間は、IronPDF、Puppeteer、およびChrome DevTools Protocolを含むヘッドレスChromeを介してHTMLがレンダリングされる際に出現し、同じ修正がそれらのツールに適用されます。
Curtis Chauは、カールトン大学でコンピュータサイエンスの学士号を取得し、Node.js、TypeScript、JavaScript、およびReactに精通したフロントエンド開発を専門としています。直感的で美しいユーザーインターフェースを作成することに情熱を持ち、Curtisは現代のフレームワークを用いた開発や、構造の良い視覚的に魅力的なマニュアルの作成を楽しんでいます。
