如何在打印的HTML的每个页面的顶部放置一个空格

Question

我设计了一个带有几个divs和tables 的HTML报告.现在我的客户要求我在每个打印页面的顶部放置一个重复的标题.据我所知,使用纯CSS和HTML是不可能的.就像尝试一样,我将标题div元素放在我应用的thead display: table-header-group中以便显示,并将报告的所有其他元素作为主表的行但没有成功.

1. 解决方法是使用@print { .header {position: fixed; top: 10px} }以在每个页面的顶部重复.header元素.但是对于这项工作,我们应该在每个新页面的顶部放置一个空白区域; 否则固定的标题元素与表格顶部的其他元素混合.

2. 作为另一种解决方法,我可以在渲染时计算元素高度,并在需要时放置手动分页符.所以我想知道是否有任何Javascript库可以在页面加载时执行,并计算页面div元素的所有渲染时间高度,并page-break-before: always;在每个div之前放置一个零高度div元素,超过A4纸张的高度.假设以下div在渲染时产生14,10,8,9,6,13和6厘米的高度.我希望图书馆在指定位置放置一个分页虚拟潜水元素:

<div id="d1">...</div>

<div id="d2">...</div>

<!-- here, because 14+10+8 exceeds 30cm -->

<div id="d3">...</div>

<div id="d4">...</div>

<div id="d5">...</div>

<!-- here, because 8+9+6+13 exceeds 30cm -->

<div id="d6">...</div>

<div id="d7">...</div>

Answer 1

这是我的最终解决方案。以下代码在页面加载时执行。我的页面仅由许多 div 组成。两个 div 作为标题，其他 div（包含表格数据）作为详细信息。我假设总是以纵向方案打印，并且还假设 A4 尺寸（= ~21x30cm）。我还假设页面的左右和上下边距为 4.5 厘米。该代码首先将 div 的大小调整为纵向兼容的宽度（以便所有表格的 div 都会自动调整大小）。然后，我迭代非标题 div 元素，以在高度超过 A4 高度时添加分页符。我还通过此代码在每个页面顶部克隆并添加了标题元素。

// page width in pixels
function pw() {
    return cm2px(16.5);
}
// page height in pixels
function ph() {
    return cm2px(25.5);
}
function px2cm(px) {
    return px * 2.54 / 96;
}
function cm2px(cm) {
    return cm * 96 / 2.54;
}

$(function() {
    $('.section > div').each(function(){
        $(this).width(pw() + 'px');
    });
    hh = $('.section > div.heading');
    headingHeight = hh.eq(0).height() + hh.eq(1).height();

    h1 = hh.eq(0).clone();
    h2 = hh.eq(1).clone();

    var h = headingHeight;
    var pageHeight = ph();

    $('.section > div').not('.heading').each(function(){
        if (h + $(this).height() + 14 > pageHeight) {
            h1.css('page-break-before', 'always');
            $(this).before(h1.clone());
            $(this).before(h2.clone());
            h = $(this).height() + 14 + headingHeight;
        } else {
            h += $(this).height() + 14;
        }
    });
});