Başlık ve İçerik Uygunsuzluğu
HTML'yi PDF'ye işlerken, başlık ve altbilgi sayfa kenarına sıfır otururken, gövde içeriği içeri itilmiş olabilir, en çok sol ve sağ kenarlarda fark edilir. Bu, MarginLeft = 0 ayarlanmış ve UseMarginsOnHeaderAndFooter etkinleştirilmiş olsa bile meydana gelir.
Sebep Chrome'un varsayılan stilidir. Render motoru, her sayfanın <body> öğesine 8 piksel kenar boşluğu uygular. Bu varsayılan ayar normal web içeriği için uygundur, ancak ilettiğiniz MarginLeft = 0 ne olursa olsun, içeriğiniz ile PDF'nin kenarı arasında görünür bir 8px boşluk bırakır. Üst bilgi ve alt bilgi etkilenmez: kenar boşlukları 0 olarak ayarlandığında, beklendiği gibi doğrudan sayfa kenarına hizalanır, bu nedenle yalnızca ana metin hizadan çıkar.
Bu snippet uyumsuzluğu yeniden üretir:
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>");
Çözüm
İçeriğin, tam sayfa genişliğinde üst bilgi ve alt bilgi ile hizalanabilmesi için Chrome'un varsayılan <body> kenar boşluğunu geçersiz kılın. Yerleşik 8px ofseti iptal etmek için negatif kenar boşlukları uygulayın:
body {
margin-left: -8px;
margin-right: -8px;
}Negatif değerler, Chrome'un varsayılan dolgusunu nötralize eder, böylece başlık, gövde ve altbilgi aynı kenara hizalanır. Uygulanan satır içi, düzeltilmiş işleme böyle görünür:
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 margin
Hata Ayıklama İpuçları
- Temiz bir sayfa tercih edin: negatif kenar boşlukları yerine bir CSS sıfırlama uygulayın veya varsayılan sapmayı kaynağında kaldırmak için
<body>öğesinemargin: 0açıkça ayarlayın. - Davranışın kapsamı: 8px boşluk, HTML bir headless Chrome aracılığıyla işlendiğinde, IronPDF, Puppeteer ve Chrome DevTools Protokolü de dahil, ortaya çıkar, bu yüzden aynı düzeltme bu araçlarda geçerlidir.
Curtis Chau, Bilgisayar Bilimleri alanında Lisans Derecesine (Carleton Üniversitesi) sahip ve Node.js, TypeScript, JavaScript ve React konularında uzmanlaşmış ön uç geliştirmeyle ilgileniyor. Sezgisel ve estetik açıdan hoş kullanıcı arayüzleri oluşturma tutkunu, Curtis modern çerçevelerle çalışmayı ve iyi yapılandırılmış, görsel olarak çekici kılavuzlar oluşturmayı seviyor.
