2016-11-18 8 views
0

enter image description herejavascriptでHTMLファイルの複数セクションのプリントをキューに入れる方法は?

上記画像は、別々に印刷する必要がある単一ページを表すhtmlファイルの異なる部分を示しています。とにかく、javascriptから各div要素の内容に別々にプリント注文をキューイングする方法はありますか?

CSS:

.AMini 
{ 
    height:70mm; 
    width:50mm; 
    background-color: white; 
    border: 5px solid black; 
    margin: 10px; 
    float:left; 
} 

HTML:あなたは、最大スタックプリンタ用のスタイルを定義することができるはずpage-break-afterとの組み合わせでprintメディアクエリを使用して

<div class="AMini"> 
    <h1>Page 1</h1> 
</div> 


<div class="AMini"> 
    <h1>Page 2</h1> 
</div> 


<div class="AMini"> 
    <h1>Page 3</h1> 
</div> 
+0

あなたはページを壊すようになっていますか? http://www.w3schools.com/cssref/pr_print_pageba.asp – Keith

答えて

0

3つのdivとそれらの間に改ページを挿入します。

ような何か:

@media print 
{ 
    body * 
    { 
     visibility: hidden; 
    } 

    .AMini, .AMini * 
    { 
     visibility: visible; 
    } 

    .AMini 
    { 
     page-break-after: always; 
     float: none; 
     position: absolute; 
     display:block; 
    } 
} 
+0

私はそうするだろうと思う。 PDF形式でエクスポートしたり、印刷プレビューを表示したりしています。それはページを吐き出す。しかし余分な空白のページがあります。ここではページブレーク・アフターを使用している可能性があります。とにかく最後の空白のページを削除できますか? –

+0

最後のdivにクラスを追加し、 'page-break-after'を' auto'にリセットすることができます。あるいは、最後のdivが最終的な子要素ならば、 ':last-child'を使うためのルールを追加することができます –

+0

あなたが気にしないならば、別の質問をオフにします。私は動的なレポートジェネレータを構築しようとしていますが、レポートには静的なコンテンツがほとんどありますが、ユーザからいくつかのフォームを介して入力された入力によって動的に変更される部分があります。だから私は、レポートの各セクションを別々に印刷したい。私のアプローチは正しかったのか、それとも良いものを提案することができますか? :) –

0

あなたは各divhiddenと呼ばれるクラスを割り当て、その後、CSSでそれvisibility: hidden;作るアプローチを試すことができます。ページの最下部に近づくと(JavaScriptやJQueryでこれを見つけることができます)、JavaScriptを使用して可視性を可視に設定します(document.getElementById('page1div').style.visibility = 'visible')。これをアニメーション化するためにJQueryを使用することさえできます。

この

は別のアプローチである:ここでは

<style> 
.break { page-break-before: always; } 
</style> 
<body> 
content on page 1... 
<h1 class="break">text of Heading 1 on page 2</h1> 
content on page 2... 
<h1 class="break">text of Heading 1 on page 3</h1> 
content on page 3... 
<p class="break">content on top of page 4</p> 
content on page 4... 
</body> 

、ページが壊れている、と一度にすべて表示されます。あなたが何を言及しているのか分からなかったが、これらはうまくいくだろう。

幸運を祈る!

関連する問題