Add Content to the Bottom of the Last Page

Add content to the bottom of the last page

http://madalgo.au.dk/~jakobt/wkhtmltoxdoc/wkhtmltopdf-0.9.9-doc.html

Take a look at "Footers And Headers" section.

You can use --footer-html combined with some JavaScript to do this.

wkhtmltopdf --footer-html footer.html http://www.stackoverflow.com/ so.pdf

I based the contents of my footer.html on the example provided in the link above:

<!DOCTYPE html>

<script>
window.onload = function() {
    var vars = {};
    var x = document.location.search.substring(1).split('&');
    for (var i in x) {
        var z = x[i].split('=', 2);
        vars[z[0]] = unescape(z[1]);
    }

    //if current page number == last page number
    if (vars['page'] == vars['topage']) {
        document.querySelectorAll('.extra')[0].textContent = 'extra text here';
    }
};
</script>

<style>
.extra {
    color: red;
}
</style>

<div class="extra"></div>

How to align content of a div to the bottom

Relative+absolute positioning is your best bet:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}

<div id="header">
  <h1>Title</h1>
  <div id="header-content">And in the last place, where this might not be the case, they would be of long standing, would have taken deep root, and would not easily be extirpated. The scheme of revising the constitution, in order to correct recent breaches of it, as well as for other purposes, has been actually tried in one of the States.</div>
</div>

How to place content at the bottom of the last page of my document

You can force an even-page page break before the final block (the one with the footnote containing the table "footer"):

        <fo:block break-before="even-page">
            <fo:footnote><fo:inline color="white">1</fo:inline><!--footnote number is not visible-->
                <fo:footnote-body>
                    <fo:block>
                        <fo:table>
                            <fo:table-column column-width="20mm" column-number="1"/>
                            <fo:table-column column-width="200mm" column-number="2"/>
                            <fo:table-body>
                                <fo:table-row>
                                    <fo:table-cell column-number="2">
                                        <fo:block>
                                            this is the footnote table
                                        </fo:block>
                                    </fo:table-cell>
                                </fo:table-row>
                            </fo:table-body>
                        </fo:table>
                    </fo:block>
                </fo:footnote-body>
            </fo:footnote>
        </fo:block>

As an aside, I think you can safely let the fo:inline child of fo:footnote completely empty, so that your output does not contain unwanted text which, even if not visible, is still searchable and selectable; should your formatter complain about the empty fo:inline, you could use a non-breaking space .

Add table at the bottom of last page without using footer

There's a lot of ways to do this, but this is the best one I think, I also use it personally:

make sure html and body have 100% height
wrap the two tables in a div and give it display: flex; with flex-direction: column; and justify-content: space-between;
give the div a height of the available space (100% - footer height)

Check out the snippet bellow:

*{/* those only to remove margins */
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html,body{/* make sure to give html and body 100% height */
  height:100%;
}
.container{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height: calc(100% - 45px); /* 100% - footer height (thats the available space)*/
  /* Change the 45px to the footer height */
}
footer{/* footer sample */
  height:45px;
  background-color:#223;
  color:#fff;
}

<html>
<body>
<div class="container">
<table class="body" style="width: 100%; margin-top: 10px;">
    <td><#--- Body table ---></td>
</table>

<table class="recap">
    <td><#--- Table to keep at the bottom ---></td>
</table>
</div>
<footer>This is the footer</footer>
</body>
</html>

How to stick text to the bottom of the page?

You might want to put the absolutely aligned div in a relatively aligned container - this way it will still be contained into the container rather than the browser window.

<div style="position: relative;background-color: blue; width: 600px; height: 800px;">    

    <div style="position: absolute; bottom: 5px; background-color: green">
    TEST (C) 2010
    </div>
</div>

Make div stay at bottom of page's content all the time even when there are scrollbars

This is precisely what position: fixed was designed for:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Here's the fiddle: http://jsfiddle.net/uw8f9/

Add Content to the Bottom of the Last Page