web-dev-qa-db-ja.com

印刷中に最後に余分な空白ページを避ける方法は？

CSSプロパティを使用していますが、

page-break-after: always; =>を使用すると、前に余分な空白ページが印刷されます

page-break-before: always; =>を使用すると、後に余分な空白ページが印刷されます。 これを避ける方法？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.print{
    page-break-after: always;

}
</style>
<script type="text/javascript">
window.print();
</script>
</head>
<body>
<div class="print">fd</div>
<div class="print">fdfd</div>
</body>
</html>
cssprinting
68
Angelin Nadar

追加することができます

.print:last-child {
     page-break-after: auto;
}

したがって、最後のprint要素は余分な改ページを取得しません。

ブラウザの破壊をターゲットにしている場合、IE8では：last-childセレクターがサポートされていないことに注意してください。

59
AKX

これを試しましたか？

@media print {
    html, body {
        height: 99%;    
    }
}
92
giannis.epp

説明された解決策 ここ 助けてくれました（ webarchive link ）。

まず、すべての要素に境界線を追加して、新しいページが追加される原因を確認できます（いくつかのマージン、パディングなど）。

div { border: 1px solid black;}

そして、解決策自体は次のスタイルを追加することでした。

html, body { height: auto; }
37
Michael Radionov

これらのどれも動作しない場合は、これを試してください

@media print {

    html, body {
      height:100vh; 
      margin: 0 !important; 
      padding: 0 !important;
      overflow: hidden;
    }

}

それが100vhであることを確認してください

20
Bryan Chan

これは私のために働く

.print+.print {
    page-break-before: always;
}
8
Lam

（今のところ）理由はわかりませんが、これは役に立ちました：

   @media print {
        html, body {
            border: 1px solid white;
            height: 99%;
            page-break-after: avoid;
            page-break-before: avoid;
        }
    }

問題と戦っている間に誰かが髪を救うことを願っています...;）

4
Adam G.

印刷領域のCSS表示と幅プロパティを変更しました

#printArea{
    display:table;
    width:100%;
}
3
Afshin Razaghi

印刷用ではない他のすべての要素にdisplay:noneを設定します。 visibility:hiddenを設定すると、それらは非表示になりますが、それらはすべてそのまま存在し、それらのためにスペースを取ります。空のページはこれらの非表示要素用です。

3
Janaka R Rajapaksha

CSSを使いたいだけで、改ページを避けたい場合は

.print{
    page-break-after: avoid;

}

paged media をご覧ください

PageBreakBeforeとpageBreakAfterの同等のスクリプトを使用して、それらの値を動的に割り当てることができます。たとえば、訪問者にカスタム改ページを強制する代わりに、これをオプションにするスクリプトを作成できます。ここでは、ヘッダー（h2）でページをスライスするか、プリンター自身の裁量（デフォルト）でページをスライスするかを切り替えるチェックボックスを作成します。

<form name="myform">
<input type="checkbox" name="mybox" onClick="breakeveryheader()">
</form>

<script type="text/javascript">
 function breakeveryheader(){
 var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto"
 for (i=0; i<document.getElementsByTagName("H2").length; i++)
 document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle
 }

これを使用する例については、 here をクリックしてください。スクリプト内のH2をPやDIVなどの別のタグに置き換えることができます。

http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

3
bilash.saha

私の場合、すべてのdivに幅を設定すると役立ちました：

.page-content div {
    width: auto !important;
    max-width: 99%;
}
3
Marjanus

さまざまな改ページ設定と高さ、およびbodyタグに関する100万のさまざまなCSSルールに苦労した後、1年後にようやく解決しました。

印刷するページ上の唯一のものと思われるdivがありますが、その後にいくつかの空白ページが表示されていました。 bodyタグはvisibility:hidden;に設定されていますが、それだけでは不十分です。縦長のページ要素は依然として「スペース」を占有します。そこで、これを印刷CSSルールに追加しました。

#header, #menu, #sidebar{ height:1px; display:none;}

トールページレイアウト要素を含むIDで特定のdivをターゲットにする。高さを縮め、レイアウトから削除しました。空白ページはもうありません。数年後、私はクライアントにそれをクラックしたと言ってうれしいです。これが誰かを助けることを願っています。

2
Sherri

可能性のあるテーマは、bodyタグの高さがw/eの理由から大きすぎると考えられるということです。

私の原因：min-height: 100%ベーススタイルシート。

私の解決策：min-height: autoディレクティブの@media print。

PhpStormによると、autoは正しい値ではないようです。ただし、Mozillaの min-heightのドキュメント に従って正しいです：

オート
フレックスアイテムのデフォルトの最小サイズ。他のレイアウトでは0よりも妥当なデフォルトを提供します。

2
George Marian

私はちょうどから変更する場合に遭遇しました

    </div>
    <script src="addressofjavascriptfile.js"></script>
</body>
</html>

に

        <script src="addressofjavascriptfile.js"></script>
    </div>
</body>
</html>

この問題を修正しました。

1
Terry Horner

Chromeには、特定の状況で、ロード後にdisplay：noneを使用して要素を非表示にすると、余分なスペースが多く残るバグがあるようです。ドキュメントのレンダリングが完了する前に、ドキュメントの高さを計算していると思います。 Chromeは2つのメディア変更イベントも発生し、onbeforeprintなどをサポートしません。これらは基本的に印刷の対象です。私の回避策は次のとおりです。

@media print {
    body {
        display: none;
    }
}

body.printing {
    display: block;
}

Docでbody class = "printing"を準備すると、印刷スタイルが有効になります。このシステムにより、印刷スタイルのモジュール化とブラウザー内印刷プレビューが可能になります。

1
Dirigible

私はすべての解決策を試しましたが、これは私のために機能します：

<style>
    @page {
        size: A4;
        margin: 1cm;
    }

    .print {
        display: none;
    }

    @media print {
        div.fix-break-print-page {
            page-break-inside: avoid;
        }

        .print {
            display: block;
        }
    }

    .print:last-child {
        page-break-after: auto;
    }
</style>
1
Paulo Weverton
.print:last-child{
    page-break-after: avoid;
    page-break-inside: avoid;
    margin-bottom: 0px;
}

これは私のために働いた。

1
guest

このCSSを同じページに追加して、CSSファイルを拡張します。

<style type="text/css">
   <!--
   html, body {
    height: 95%; 
    margin: 0 0 0 0;
     }
   -->
</style>
1
alnassre

私は同様の問題を抱えていましたが、原因はページの下部に40pxのマージンがあるため、最後のページにスペースがあったとしても最後の行は常に折り返されていました。 page-break-* cssコマンドが原因ではありません。印刷の余白を削除して修正しましたが、うまくいきました。他の誰かが同様のものを持っている場合に備えて、私のソリューションを追加したかっただけです！

0
AlexMorley-Finch

答えは私と一緒には機能しませんでしたが、すべてを読んだ後、私が印刷したい1つのHtmlページがあるが、それで余分な白い空白ページが印刷されていた場合、私の問題が何であるかを見つけました。 AdminLTEを使用して、印刷するレポートのページにbootstrap 3テーマを使用し、ページの右下にこのテキストを配置したいフッタータグを使用しています。

誰かが印刷

以前の「Copy Rights」フッターの代わりにjqueryを使用してそのテキストを挿入しました

$("footer").html("Printed by Mr. Someone");

テーマのデフォルトでは、タグフッターは属性を持つクラス.main-footerを使用します

padding: 15px;
border-top: 1px solid

それは余分な空白を引き起こしたので、問題を知った後、私はさまざまなオプションがありました、そして最良のオプションは使用することでした

$( "footer" ).removeClass( "main-footer" );

その特定のページで

0
Yousef Al-Hadhrami

奇妙なことに透明な境界線を設定すると、これが解決されました：

@media print {
  div {
    border: 1px solid rgba(0,0,0,0)
  }
}

たぶん、コンテナ要素に境界線を設定するだけで十分でしょう。 <-未テスト。

0
Dr Hund