Menu
I am using wkhtmltopdf to create PDF reports from HTML, I need to create a custom report that follows this pattern:
Putting all this together does the trick; however because step 3 info appears immediately after the table, is there a way to put the content at the end of the page?
I am not even sure if this solution is CSS based or wkhtmltopdf based.
656
If position: absolute; or position: fixed; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor. If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.
You can do that by putting a Section Break (Menu Bar > Insert > Break... > Section Break Next Page) at the end of the page prior to the last page of the document. Make sure the last page's footer is Unlinked from the prior page's footer. You do that from the Header and Footer contextual ribbon tab in the Options Group.
For that you would just add it at the bottom of the HTML code.
Keep the footer at the bottom by using Flexbox Make sure that you are wrapping everything but the footer element in a <div> or any other block-level element. Make sure that you using <footer> or any other block-level element to wrap the footer.
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> This a quite difficult task and I don't think you can solve this with pure CSS at this time (though I would love to be proven wrong).
Also the support for determined page breaks (page-break-inside: avoid;) isn't the best. In fact I don't think it works with table so far. You probably would end up with some rows split around the pagebrake. (Webkit renders one PDF and then cuts it into single pages, mostly regardless whats on the edge...)
My solution to this dilemma was to create single placeholder divs in the size of a single page and then distribute the content with some programming langugae between these placeholders before generating the PDF.
In the last of such wrappers you could then add an absolute positioned footer at the bottom.
Here is some sample code:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Sample Data</title> <style> * { padding: 0; margin: 0; } .page { page-break-inside: avoid; height: 1360px; position: relative; } table { border-collapse: collapse; width: 100%; } td { border: 1px solid #ccc; padding: .23em; } .footer { position: absolute; color: red; bottom: 0; } </style> </head> <body> <div class="page one"> <p> Some info Here... at the top of first page </p> <!-- Zen Coding: table>tbody>(tr>td>{A sample table}+td>{Foo bar})*42 --> <table> <tbody> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> </tbody> </table> </div> <div class="page two"> <table> <tbody> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> <tr><td>A sample table</td><td>Foo bar</td></tr> </tbody> </table> <p class="footer"> The last info here in the bottom of last page </p> </div> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
