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

【问题标题】：PhantomJS: place div element on bottom part of a pagePhantomJS：将 div 元素放在页面的底部
【发布时间】：2017-06-05 23:44:35
【问题描述】：

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

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

这两个例子说明了我需要什么：

一页：

两页：

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

【问题讨论】：

标签： css phantomjs jsreport

【解决方案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

【讨论】：

您的链接效果很好，但是当我在本地 Jsreport 服务器中尝试它时，效果不佳：我创建了一个名为“页脚”的新模板，然后我粘贴了 HTML 代码，然后单击跑。我应该配置其他东西吗？
它应该可以正常工作，无需进行更多更改。如果您在 osx/linux 上运行而不是在运行 Playground 的 Windows 上运行，您可能只需要调整 pageSize 常量。
是的，我在 Linux 计算机上安装了 jsreport。我尝试了不同的尺寸，直到它起作用：如果 pageSize 是 989，它似乎可以工作。可以吗，还是有 JavaScript 函数来获取值？
我确实更新了答案以包括您的 989 for linux。我不知道会计算它的函数。我们暂时需要坚持这个神奇的常数。

【解决方案2】：

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

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

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

【讨论】：

只用链接回答问题不是一个好习惯，因为链接将来可能会停止工作。