CODEWITHSUNDEEP
htmlcsspdfwkhtmltopdf
Rémy V.D
Rémy V.D

Reputation: 260

Wkhtmltopdf footer not rendering with position

With this in my html, the footer won't render in the 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>

It works when position is not specified...

To generate the pdf i'm using pdfkit with python:

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

Here is the content I use in content_url

<!DOCTYPE html>
<html>

<head>

</head>

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

</html>

Any help ?

Upvotes: 5

Views: 9943

Answers (3)

Reza-S4
Reza-S4

Reputation: 1052

If you set the margin-top: 0 and margin-bottom: 0, then you should put footer-spacing or header-spacing to some negative value (equal to the height of the header or the footer) to show them.

margin-top: 0
margin-right: 0
margin-bottom: 0
margin-left: 0
header-spacing: -10
footer-spacing: -10

Upvotes: 0

Stevan Tosic
Stevan Tosic

Reputation: 7229

Many people set margins at 0 to show the PDF page in the full paper.

This is a time when the problem is created for footer and header.

You need to set options in your command * --margin-top 10 --margin-bottom 10 * or to set this in the configuration file for wkhtmltopd wrapper.

This is a configuration for snappyBundle (wkhtmltopdf wrapper library) 

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

Upvotes: 3

Marco Sacchi
Marco Sacchi

Reputation: 982

You need to specify the body's height on the footer html to get it visible using positioning (like in other webpages).

Using the code below you get variabile height footer aligned to page bottom edge. Note: bottom margin must be specified when you call wkhtmltopdf, using --margin-bottom option.

<!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>

Tested on wkhtmltopdf 0.12.4 (with patched qt).

Upvotes: 5

Related Questions