IText7 html2pdf 固定页脚使用 CSS

Question

我目前正在尝试使用 itext7 和 itext7.pdfhtml 将 HTML 转换为 PDF，但有一个小问题。

我有一个固定的页脚 (.footer)，当用浏览器打开时效果很好，但当使用下面的代码转换时，div 没有固定在页面底部。 div 紧跟在它前面的其他 div 内容之后。

C#.net 核心代码

string fullBody = System.IO.File.ReadAllText("index.html"); 
var stream = new MemoryStream();
var writer = new iText.Kernel.Pdf.PdfWriter(stream);
writer.SetCloseStream(false); 
iText.Html2pdf.HtmlConverter.ConvertToPdf(fullBody , writer);
writer.Close();
stream.Seek(0, SeekOrigin.Begin);

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css"> 
</head>
<body> 
    <div class="header">
        <img src="header1.bmp" width="100%" />
        <img src="header2.bmp" width="100%"/>
    </div>
    ... 
    <div class="footer">
        Fixed footer
    </div>
</body>
</html>

CSS

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;  
    text-align: center;
}

已经尝试了其他几个例子，但它仍然不会停留在底部。

即使这个类似的问题也不起作用

如有任何帮助，我们将不胜感激。

PDF格式

在浏览器中（打印视图）

只是一个小提示 - 此 pdf 只有 1 页，因此可以考虑硬编码解决方案。

Answer 1

页脚属于页边距区域。 @page 媒体是配置它的正确方法。 CSS running 元素功能可用于将元素放入所需位置并将其从布局的其余部分排除。将 HTML 转换为基于页面的表示的主要工具都支持它。

这是一个示例 HTML:

<!DOCTYPE html>
<html>
    <head>
        <style>
            #footer {
                position: running(footer);
            }

            @page {
                @bottom-center {
                    content: element(footer);
                }
            }
        </style>
    </head>

    <body>

        <p>Hello world</p>

        <div id="footer">I am a footer</div>

    </body>
</html>

结果如下所示：

IText7 html2pdf 固定页脚使用 CSS

IText7 html2pdf fixed footer using CSS

html

css

itext

html-to-pdf

itext7