javascript - 在 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