Question

我正在使用 jsreport 与 PhantomJS 来制作帐单/发票报告。我需要在某些页面的底部放置一个div元素。银行的收银员可以用剪刀剪掉账单，这是账单的一部分。

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

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

一页：

两页：

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

Answer 1

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

您可以在此处查看实时示例：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元素放在页面的底部

2 个答案: