Question

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

解决方法是按顺序使用@print { .header {position: fixed; top: 10px} } 重复每页顶部的.header元素。但是对于这项工作，我们应该在每个新页面的顶部放置一个空白区域;否则固定的标题元素与表格顶部的其他元素混合。
作为另一种解决方法，我可以在渲染时计算元素高度，并在需要时放置手动分页符。所以我想知道是否有任何Javascript库可以在页面加载时执行，并计算页面div元素的所有渲染时间高度，并在超过高度的每个div之前放置一个零高度div元素page-break-before: always;一张A4纸。假设以下div在渲染时产生14,10,8,9,6,13和6厘米的高度。我希望图书馆在指定位置放置一个分页虚拟潜水元素：

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

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

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

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

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

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

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

Answer 1

您是否考虑过在多个页面上拆分表格？我过去通过测量页面的大小然后将行写入浏览器来完成此操作。每次到达页面结束时，我都会关闭正在写的表，然后启动下一个表，写一个新的DIV等。您需要随时跟踪每列的最大大小等，但效率方面我们可以在屏幕上写入数千行，并且通常仍会在60秒内返回大型报告。

我还使用了当时只在IE中可用的CSS方向功能（写入模式：tb-rl）来模仿在Landscape中呈现的页面和内容同样 - 它确实需要更多地考虑你的方式重写它，但结果内容看起来非常专业。

Answer 2

这是我的最终解决方案。以下代码在页面加载时执行。我的页面完全由许多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;
        }
    });
});

Answer 3

尝试使用jquery来计算div标签的高度。但是，html的打印通常可以通过使用一些简单的PHP来完成。

最简单的方法可能是为打印页面创建一个单独的css文件，并将div的背景图像作为要用于打印页面的标题。在常规样式表中，相同的div可以简单地为空并且没有高度或宽度。

This link is some company's explanation 如何使用css打印html

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

3 个答案: