Wkhtmltopdf页脚不随位置呈现答案

【问题标题】：Wkhtmltopdf footer not rendering with positionWkhtmltopdf页脚不随位置呈现
【发布时间】：2017-11-26 20:00:32
【问题描述】：

在我的 html 中，页脚不会在 pdf 中呈现...

    <!DOCTYPE html>
<html>

<head>
  <style>
  footer{
background:#ccc;
position:absolute;
bottom:0;
width:100%;
padding-top:50px;
}
</style>
</head>

<body>
  <footer>
    <p> test </p>
    <p> test </p>
    <p> test </p>
    <p> test </p>
    <p> test </p>
    <p> test </p>
    <p> test </p>
    <p> test </p>
    <p> test </p>
  </footer>
</body>

</html>

不指定位置时有效...

要生成 pdf，我使用 pdfkit 和 python：

pdfkit.from_file(content_url, 'out.pdf', {        
        '--footer-html': footer_url,
        '--footer-spacing':  '10'
    })

这是我在 content_url 中使用的内容

<!DOCTYPE html>
<html>

<head>

</head>

<body>
<p> content </p>
</body>

</html>

有什么帮助吗？

【问题讨论】：

给更多的代码，我们不能只用这个。
感谢回答，已编辑
您是否尝试过不同的定位，例如相对？并使用其他工具生成 pdf？这可能是pdfkit的一个错误，但我对pdfkit一无所知。这是您拥有的所有 html/css 吗？如果你遗漏了一些可能是相关的......
是的，无论我怎么做都无法定位页脚...我会尝试直接在 CLI 中使用 wkhtmltopdf 生成并随时通知您

标签： html css pdf wkhtmltopdf

【解决方案1】：

许多人将页边距设置为 0 以在整篇论文中显示 PDF 页面。

这是为页脚和页眉创建问题的时候。

您需要在命令中设置选项* --margin-top 10 --margin-bottom 10 * 或者在 wkhtmltopd 包装器的配置文件中设置它。

这是 snappyBundle（wkhtmltopdf 包装库）的配置

knp_snappy:
    pdf:
        enabled:    true
        binary:     '%env(WKHTMLTOPDF_PATH)%'
        options:
          enable-javascript: true
          javascript-delay: 200
          no-stop-slow-scripts: true
          encoding: 'UTF-8'
          margin-top: 10
          margin-right: 0
          margin-bottom: 10
          margin-left: 0

【讨论】：

【解决方案2】：

您需要在页脚 html 上指定正文的高度，以便使用定位使其可见（就像在其他网页中一样）。

使用下面的代码，您可以将可变高度页脚与页面底部边缘对齐。 注意： 调用 wkhtmltopdf 时必须指定下边距，使用 --margin-bottom 选项。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            line-height: 1;
            font-size: 12pt;
            height: 20mm; /* set it to your bottom margin */
        }

        .footer {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
<div class="footer">test <b>html</b> footer<br/><i style="color:blue;">two lines</i></div>
</body>
</html>

在 wkhtmltopdf 0.12.4 上测试（带有修补的 qt）。

【讨论】：