PhantomJS：将 div 元素放在页面底部

Question

我正在使用 jsreport 和 PhantomJS 为 bills/invoices 制作报告。我需要在某些页面的底部放置一个 div 元素。是银行收银员可以用剪刀剪掉的钞票部分。

我用 CSS 尝试了不同的方法，但是当 jsreport 呈现时，结果不是我所期望的.

这两个例子展示了我所需要的：

一页：

两页：

如果有人想编辑它，我在这里做了一个非常基本的例子： https://playground.jsreport.net/studio/workspace/rJRuPJkfW/57

Answer 1

我认为您可以实现所需的设计，自定义固定大小和自定义的 phantomjs 页脚 html，并添加自定义页边距。

你可以在这里看到一个活生生的例子：https://playground.jsreport.net/studio/workspace/BJEMYu3bb/31

仔细看看模板的幻影选项和页脚内的逻辑，只打印在最后一页，我也不确定当你有内容移动到另一页时它是否会起作用也许有某种解决方法需要您申请才能让一切就绪，但无论如何这都是一个开始。

Answer 2

基于javascript的解决方案：

可以查看单页全高。您还可以找出文档的实际高度。这两个值可以帮助您计算最后一页的底部。然后就可以用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>

演示在这里 https://playground.jsreport.net/studio/workspace/BJEMYu3bb/36

PhantomJS：将 div 元素放在页面底部

PhantomJS: place div element on bottom part of a page

css

phantomjs

jsreport