PhantomJS: place div element on bottom part of a page - css

Question

I am using jsreport with PhantomJS for making reports for bills/invoices.
I need to place a div element on the bottom part of some pages. It is the part of a bill that the cashier of a bank can cut with a scissor.
I tried different ways with CSS to do it but when jsreport renders, the result is not what I expect.
These two examples show what I need:
One page:
Two pages:
I made a very basic example here if someone wants to edit it:
https://playground.jsreport.net/studio/workspace/rJRuPJkfW/57

Answer 1

The javascript based solution:
You can find out the full height of the single page. You can also find out the real height of the document. These two values helps you to calculate the bottom of the last page. Then you can absolute position the cut area to the last page using js.
<script>
// magical page size number was only estimated based on very long pdf
// it differs based on the recipe and platform used to render
// windows phantomjs 1.9.8 = 1274
// linux/osx phantomjs 1.9.8 = 989
var pageSize = 1274
// the size of the area you want to cut
var cutDivHeight = 200
var numberOfPages = Math.ceil(document.height / pageSize)
// run debug to see the values
console.log(numberOfPages * pageSize - document.height)
// find out if the extra div fits to the last page space
if (numberOfPages * pageSize - document.height < cutDivHeight) {
numberOfPages++
}
// add the cut area
var watermark = document.createElement('div');
watermark.innerHTML = "CUT ME"
watermark.style.top = (numberOfPages * pageSize) - cutDivHeight
watermark.style.height = cutDivHeight + 'px'
watermark.style.width = '100%'
watermark.style['background-color'] = 'red'
watermark.style.position = 'absolute'
document.body.appendChild(watermark)
</script>
Demo here
https://playground.jsreport.net/studio/workspace/BJEMYu3bb/36

Answer 2

i think that you can achieve the desired design customizing the phantomjs footer with a fixed size and custom html, and adding custom page margins.
you can see a live example here: https://playground.jsreport.net/studio/workspace/BJEMYu3bb/31
take a closer look at the template's phantom options and the logic inside the footer to only be printed in the last page, also i'm not sure that it is going to work when you have content that move to another page maybe there is some kind of workaround that you will need to apply to have everything in place, but anyway this is a start.