改ページで印刷されたページにCSSおよび/またはjQueryを使用する

Question

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

私はdivセクションに基づいてページ区切りを作成したいと思います - 指定されたdivがページに完全に収まらない場合は、その前に改ページを挿入します。

理論的には、1つのdivから10までの任意の場所が1つの印刷されたページに収まる可能性があるため、ページが読み込まれた後にjQueryを挿入する必要があります。

これは、デスクトップアプリケーションだったら、私はこのような何かそれに近づくでしょう：

1. は（ある種のプリンタオブジェクトを使用して）ページの幅と高さを測定しますが。
2. 測定各DIVの高さ - とは減算その総ページの残りの高さ
3. からIF（remaining_space - div_height> 0）他{//ページ上に置く} {//最初の挿入ページ区切り}

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

Answer 1

私は過去1日かそこらを費やしていましたので、誰かが答えが必要な場合に備えて私の解決策を投稿したかったのです。

ここでは、私がしたことがあります。

1. 生成される出力として通常の（ないプリンタ意図）
2. 作成2枚のスタイルシート（プリンタのための1つ、及び画面に対して1つ）。測定値はすべてのページ要素が印刷出力に変わるためのインチ単位（ピクセルではない）です。 jQueryのを使用して
3. 、私は次のようでした：

- > 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の>測定高さ（中私の場合、$（ 'ページ'）の高さ（）;）

- >の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要素は、この持っている：

改ページ - 後：常に;

これは私が望んでいたプリンタで新しいページを作成するためにそれを得た方法です。

上記jQueryの機能を実行した後、私は私が印刷されたページに移動したかったのdiv要素が含まれて元のセクションを隠しました。私のjQueryの測定が有効な結果を生成しないので、私は手の前に、このセクションを隠すことができなかった注意してください（私の場合、私は「hide_me」のidを持つdivのラッパー内のすべてのdivを配置し、高さにスタイルを設定する：1ピクセル;オーバーフロー：自動;）。

私はこれが非常に50,000フィートの視野であることを理解していますが、うまくいけばそれはあなたにとって有益です。

Answer 2

CSSの属性{pageBreakBefore： 'always'}または{pageBreakAfter： 'always'}を空白のDIVタグに挿入することは、jQueryで検査するページ境界を計算したHTMLのポイントDIVの高さまたは何でも。しかし、あなたはページの内容をかなり親密に知っている必要があり、フォントサイズなどを "px"ではなく "pt"と指定する必要があります。

かかわらず、ここで同様のクエリを参照してください：

Enforce Print Page Breaks with CSS

Answer 3

は、あなたが探しているわけではありません正確に何が、JSの追加ダッシュでこの http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

を見てあなたが達成しようとしたいことが可能かもしれません。

Answer 4

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

これは、デスクトップアプリケーションに提案したのと同じロジックに従うと便利です。 divであなたの "ページ"をラップすることができます。それがjqPrintに印刷するよう指示するものです。ページ区切りは別の要素でもdivでも可能ですが、ページ区切りであることを知らせるクラスがあります。たとえば：あなたはjQueryのに精通している場合

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

など。その後、

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

私は知りません。あなたが私たちに知らせていないならば。

Answer 5

私の心の中で、印刷ページ設定のポイントは、物事をひどく分割しないことです。そして、通常、あなたがひどく分割したくないのは、表形式のデータです。これは、<div>を表の書式に変更し、グループ化しないでください（行数を<tbody>にグループ化することを前提としています）。

我々は見つけるためにコードのヘッダーとフッターをマークしたい、と彼らは

を説明されている場合、我々は必ずしも彼らが右表示したくない。これは、ページのロード時に自分自身を呼び出しますが、その代わりに右の印刷前に呼び出すことができ。

<script> 
    $().ready(function() { 
     $('table.paged').each(function (i, o) { 
      BreakPages($(o)); 
     }) 
    }); 
    function BreakPages(jSource) { 
     $('body').width("7in"); 
     var perInch = $('body').width()/7.5; 
     var nPageHeight = 9 * perInch; 

     var jHeader = null; 
     var jFooter = null; 
     var jWrapper = jSource.clone().empty(); 
     var jPage = null; 
     var iPage = 0; 
     jSource.after("<div></div>"); 
     var jFixed = jSource.next(); 

     function substed(jStuff) { 
      var jCopy = jStuff.clone(); 
      jCopy.find('span.pageNo').html(" " + iPage + " ").removeClass('pageNo'); 
      return jCopy; 
     } 

     jSource.children().each(
      function (iChunk, oChunk) { 
       var jChunk = $(oChunk); 
       if (jChunk.hasClass('footer')) { 
        jFooter = jChunk; 
       } 
       if (jChunk.hasClass('header')) { 
        jHeader = jChunk; 
        jFooter = jChunk.nextUntil('.footer').last().next(); 
       } 
       if (!jChunk.hasClass('sample')) { 
        var nHeight = jChunk.height(); 
        if (jPage) 
         nHeight += jPage.height(); 
        if (jFooter) 
         nHeight += jFooter.height(); 
        if (nHeight > nPageHeight) { 
         if (jFooter) 
          jPage.append(substed(jFooter)); 
         jPage.after("<p style='page-break-after:always; height:0; width:0'>&nbsp</p>"); 
         jPage = null; 
        } 
        if (!jPage) { 
         iPage++; 
         jPage = jWrapper.clone(); 
         jFixed.append(jPage); 
         if (jHeader && jHeader !== jChunk) 
          jPage.append(substed(jHeader)); 
        } 
        jPage.append(jChunk); 
       } 
      } 
     ); 
     jFixed.find('span.pageCount').html(" " + iPage + " "); 
     jFixed.find('span.pageNo').html(" " + iPage + " "); 
     jSource.remove(); 
    } 
</script> 

このようにページングする表をレイアウトします。

<body> 
    <table> 
     <tbody class="header"> 
      PAGE ONE HEADER 
     </tbody> 
     <tbody class="header sample"> 
      LATER PAGE HEADER (IF RELEVANT) 
     </tbody> 
     <tbody class="together"> 
      ROW GROUP 1 
     </tbody> 

     <tbody class="together"> 
      ROW GROUP N 
     </tbody> 
     <tbody class="footer"> 
      FOOTER 
     </tbody> 
    </table> 
</body> 

我々は<tbody>年代をスキャンし、ページの終わりを越え破るために運命づけられている任意の要素の前にフッターやヘッダーを詰め込みます。

ヘッダーとフッターをCSSクラスでマークし、ヘッダーとフッターを変更する必要がある行フローの場所に置くことでヘッダーとフッターを変更する可能性を追跡しますが、別のCSSクラスでは表示しません。

ページ違反のいくつかの実装は厳密に "ブロック"要素にのみ適用されるため、tbodyでは定義されていません。したがって、私はそれを各ページテーブルに追加された<p>タグクラスに適用しました。