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.fignationHeight方法是仅返回文本本身的大小而不是它周围的间距或是否有另一个可能造成巨大差异的问题？感谢。

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

在HTML中创建分页符

1 个答案: