在 HTML 中创建分页符

Question

我正在使用 html 创建简历，并且某些元素有多行。例如，教育可以在不同的行中包含学院、就读日期和获得的学位。但是，学院、日期和学位都是一个记录的一部分。

我在使用 html 打印时尝试创建分页符。如果下一个元素中的行数大于 8.5 x 11 页面上剩余的行数，我只希望插入分页符。使用前面的示例，我希望教育记录中的所有行都在一页上。正在传入数据，因此分页符可能因恢复而异。

我找到了创建分页符的代码：@media print {footer {page-break-after: always;}}。

我还找到了可以获取 div 行高的代码：

var element = document.getElementById('content'); document.defaultView.getComputedStyle(element,null).getPropertyValue("lineHeight");

我需要计算 8x11 页面上剩余的行数，并将该高度与下一个元素的高度进行比较。不使用分页符，另一种选择是添加足够的空行以将元素向下移动到足以使其全部位于一页上，但我仍然需要能够计算剩余的行数。我将不胜感激任何建议。谢谢。

编辑：到目前为止，这是我的代码：

var totalHeight = 1056;
var divHeight = document.getElementById('element').offsetHeight;
totalHeight = totalHeight - divHeight;
if(totalHeight < 0)
{
    document.write("<style>");
    document.write("@media print {#element {page-break-after: always;}}");
    document.write("</style>");
}

但是，当我打印出总高度时，它只返回一个略高于 200 的数字。相反，这个数字应该超过 1056。offsetHeight 方法是否只返回文本本身的大小而不是它周围的间距，还是存在另一个可能导致巨大差异的问题？谢谢。

Answer 1

我认为这里最棘手的部分是处理浏览器在打印时将在页面上放置的任何页边距。不确定你是否可以控制它。但是，如果可以，请尝试使用in 作为您的尺寸单位，而不是像px 或em 这样的单位。然后，如果您计算出您将使用已有的内容遍历 11in，请添加分页符。

这是一个伪代码算法：

var totalHeight = page margin

foreach div:
    totalHeight += calculated height in inches

    if totalHeight > 11in:
        insert page break

rinse and repeat for further pages