1

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

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

这两个例子显示了我需要什么：

一页：

一页

两页：

两页

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

4

2 回答 2

1

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

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

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

于 2017-05-31T17:51:02.220 回答
1

基于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

于 2017-05-31T18:18:03.713 回答