在HTML中创建分页

Question

在HTML中创建分页

javascripthtmlcssprinting

3

我正在使用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方法只返回文本本身的大小而不是其周围的间距吗？还是有其他问题导致了巨大的差异？谢谢。

- user3798384

你可能想要查看http://jsonresume.org/，它是由JSON对象构建的在线简历。 - Elmer

你需要使用计算高度。如果可以使用jQuery，我建议你这样做，可以使用(elementOrSelector).height()以像素为单位获取计算高度。如果无法使用jQuery，请尝试此方法。 - SethGunnells

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SethGunnells · 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