7

我设计了一个带有几个divs 和tables 的 HTML 报告。现在我的客户要求我在每个打印页面的顶部放置一个重复的标题。据我所知,使用纯 CSS 和 HTML 是不可能的。就像尝试一样,我将标题 div 元素放在我应用的theaddisplay: 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>

4

3 回答 3

1

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

我还使用了当时仅在 IE 中可用的 CSS 方向功能(writing-mode:tb-rl)来模拟在横向中呈现的页面以及类似的内容 - 它确实需要更多地考虑如何编写它, 但是生成的内容看起来很专业。

于 2011-07-26T09:09:58.790 回答
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;
        }
    });
});
于 2011-07-27T06:32:22.670 回答
0

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

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

此链接是一些公司对如何使用 css 打印 html的解释

于 2011-07-20T13:25:56.270 回答