7

divいくつかの とを含む HTML レポートを設計しましたtable。現在、私のクライアントは、印刷された各ページの上部に繰り返しヘッダーを配置するように求めています。私の知る限り、プレーンな CSS と HTML を使用してこれを行うことはできません。試しに、ヘッダー div 要素をdisplay: table-header-group表示するために適用した広告内に配置し、レポートの他のすべての要素をメイン テーブルの行として配置しましたが、成功しませんでした。

  1. @print { .header {position: fixed; top: 10px} }回避策は、各ページの上部で .header 要素を繰り返すために使用することです。しかし、この作業では、新しい各ページの上部に空白を配置する必要があります。それ以外の場合、固定ヘッダー要素はテーブルの上部で他の要素と混合されます。

  2. 別の回避策として、レンダリング時に要素の高さを計算し、必要に応じて手動で改ページすることができます。page-break-before: always;したがって、ページの読み込み時に実行できる Javascript ライブラリがあり、ページの div 要素のすべてのレンダリング時の高さを計算し、A4 用紙の高さを超える各 div の前に高さゼロの div 要素を配置するかどうかを知りたいです。たとえば、次の 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だけで構成されていました。ヘッダーとして2つのdiv、詳細として他のdiv（表形式のデータを含む）。私は常に縦向きで印刷することを想定し、A4サイズ（=〜21x30cm）も想定しました。また、ページの左右と上下に4.5cmの余白を想定しました。コードは最初に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 に答える
1

表を複数のページに分割することを検討しましたか? 過去に、ページの大きさを測定し、行をブラウザーに書き出すことでこれを行ったことがあります。ページの終わりに到達するたびに、書き込み中のテーブルを閉じてから、次のテーブルを開始し、新しい DIV などを書き込みます。各列の最大サイズなどを追跡する必要があります。しかし、効率的に言えば、画面に何千行も書き込むことができ、大きなレポートの場合は通常 60 秒未満で返されます。

また、当時 IE でしか利用できなかった CSS 方向付け機能 (writing-mode:tb-rl) を使用して、横向きでレンダリングされるページと同様にコンテンツを模倣しました。 、しかし、結果のコンテンツは非常にプロフェッショナルに見えました.

于 2011-07-26T09:09:58.790 に答える
0

jqueryを試して、divタグの高さを計算してください。ただし、htmlの印刷は通常、いくつかの単純なphpを使用して実行できます。

また、最も簡単な方法は、印刷ページ用に別のcssファイルを作成し、divの背景画像を印刷ページに使用するヘッダーにすることです。通常のスタイルシートでは、同じdivが単純に空で、高さや幅がない場合があります。

このリンクは、 HTMLを印刷するためのcssの使用方法に関する会社の説明です。

于 2011-07-20T13:25:56.270 に答える