ArthurHub / HTML-Renderer

Cross framework (WinForms/WPF/PDF/Metro/Mono/etc.), Multipurpose (UI Controls / Image generation / PDF generation / etc.), 100% managed (C#), High performance HTML Rendering library.
https://htmlrenderer.codeplex.com/
BSD 3-Clause "New" or "Revised" License
1.24k stars 522 forks source link

The library ignores position:absolute styling #203

Open zn opened 5 months ago

zn commented 5 months ago

I have HTML code with many elements with style position: absolute. The HTML code looks good in the browser but when I try to convert it to pdf using HtmlRenderer.PdfSharp, I get all the elements in the top left corner. How can I fix this?

Here is my code:

using PdfSharp;
using PdfSharp.Pdf;
using TheArtOfDev.HtmlRenderer.PdfSharp;

var html = "...";
File.WriteAllBytes("draft.html", Encoding.UTF8.GetBytes(html));
using PdfDocument pdf = PdfGenerator.GeneratePdf(html, PageSize.A4, margin:0);
using var ms = new MemoryStream();
pdf.Save(ms);
File.WriteAllBytes("draft.pdf", ms.ToArray());
return ms.ToArray();

The html:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
    <p style="position: absolute; top: 50px; left: 200px;margin: 0;">Hello world!</p>
    <p style="position: absolute; top: 100px; left: 200px;margin: 0;">Hello world!1</p>
    <p style="position: absolute; top: 150px; left: 200px;margin: 0;">Hello world!2</p>
    <p style="position: absolute; top: 200px; left: 200px;margin: 0;">Hello world!3</p>
</body>
</html>

Below is how the generated pdf looks like: MPt2s