8

印刷用に設計された、動的に生成された html ページがあります。

div セクション (任意の div) に基づいて改ページを作成したいと思います。ページに完全に収まらない場合は、その前に改ページを挿入してください。

理論的には、1 つの div からおそらく 10 までの div が 1 つの印刷ページに収まる可能性があるため、ページが読み込まれた後に jQuery を使用して挿入する必要があると考えています。

これがデスクトップ アプリケーションである場合、次のようにアプローチします。

  1. ページの幅と高さを測定します (何らかのプリンター オブジェクトを使用)。
  2. 各 div の高さを測定し、それをページの残りの高さの合計から差し引きます
  3. if ( left_space - div_height > 0 ) { // ページに配置 } else { // 最初に改ページを挿入 }

jQuery、CSS、生の JavaScript などを使用して、このシナリオに到達する方法はありますか?

4

5 に答える 5

3

わかりました、私はこれを理解するのに1日かそこら費やしたので、他の誰かが答えを必要とする場合に備えて、これに対する私の解決策を投稿したいと思いました.

一般的に言えば、ここで私がしたことです。

  1. 通常どおり生成された出力 (プリンター向けではない)
  2. 2 つのスタイル シート (1 つはプリンター用、もう 1 つは画面用) を作成しました。印刷出力に変換されるすべてのページ要素の測定値は、(ピクセルではなく) インチでした。
  3. jQueryを使用して、次のことを行いました。

-> DOM に初期ページを追加する呼び出し関数 - このようなもの

// assumes old_page_id is existing element in DOM, and var page_id = 1;
$j("<div class='page' id='" + page_id + "'><div class='print_area'></div></div>")
.insertAfter('#' + old_page_id);

- >ページであるdivの高さを測定します（私の場合、 $('.page').height(); ）

-> div と新しいページの挿入を行う関数を実行しました - このようなもの

$('div_class').each(
 function() {
  // measure height of $(this)
  // add it to running total of used space on existing page
  // if sum total exceeds remaining space, create new page, and add to that one
  // if still room left, add to this one
 }
);

プリンター スタイルシートの各ページ div (私の場合、class='page') には次のようなものがあることに注意してください。

改ページ後: 常に;

これが、必要な場所にプリンターで新しいページを作成する方法です。

上記の jQuery 関数を実行した後、印刷ページに移動したい div 要素を含む元のセクションを非表示にしました。jQuery の測定では有効な結果が得られないため、このセクションを事前に非表示にできなかったことに注意してください (私の場合、すべての div を「hide_me」の id を持つ div ラッパー内に配置し、スタイルをheight:1px に設定しました。オーバーフロー:自動; )。

これは非常に 50,000 フィートのビューですが、お役に立てば幸いです。

于 2011-02-03T20:58:12.967 に答える
2

jQueryでページ境界を計算したHTML内のポイントに、CSS属性{pageBreakBefore：'always'}または{pageBreakAfter：'always'}を使用して空のDIVタグをいつでも挿入できます。 DIVか何か。ただし、ページコンテンツについてはかなり詳しい知識が必要であり、フォントサイズなどを「px」ではなく「pt」として指定する必要があります。

ただし、ここで同様のクエリを参照してください。

CSSを使用して印刷ページ分割を適用する

于 2011-02-02T18:13:13.183 に答える
0

あなたが探しているものとは正確には異なりますが、これを見て ください http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

JS のダッシュを追加すると、達成したいことが可能になる場合があります。

于 2011-02-02T18:14:20.187 に答える
0

このプラグインを使用して、ページの要素を印刷してみることができます。http://www.recoding.it/wp-content/uploads/demos/jqprint-demo.htm

これは、デスクトップ アプリケーションで提案したのと同じロジックに従う場合に役立ちます。「ページ」を div で囲むことができ、それが jqPrint に印刷するように指示するものです。改ページは別の要素または div である可能性がありますが、改ページであることを知らせるクラスがあります。例えば：

<div id="#page1" class="page">
...
</div>
</div id="#break1" class="break"> </div>

等..

それから

$('#page1').jqprint();

あなたがjQueryに精通しているかどうかはわかりません。ご連絡がない場合はお知らせください。

于 2011-02-02T18:14:54.090 に答える