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 回答