web-dev-qa-db-ja.com

Google Chrome改ページの印刷

改ページを行うためにGoogle chromeを取得しようとしています。

page-break-after: always;はchromeで有効であると多くのWebサイトから聞いてきましたが、非常に単純な例でも機能させることができないようです。クロムで印刷するときに改ページを強制する方法はありますか？

cssprintinggoogle-chrome
101
Mike Valstar

Chromeを含むすべての主要なブラウザーで次のアプローチを使用しました。

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <h1>This is Page 1</h1>
    </div>
    <div class="page">
      <h1>This is Page 2</h1>
    </div>
    <div class="page">
      <h1>This is Page 3</h1>
    </div>
  </body>
</html>

これは簡単な例です。実際のコードでは、各ページdivにはさらに多くの要素が含まれています。

124
Phil Ross

実際、承認済みとして選択された回答（Phil Rossから）には1つの詳細が欠落しています。

それはCHROMEで動作します、そして解決策は本当にsillyです!!

親と改ページを制御する要素の両方を次のように宣言する必要があります。

position: relative

このフィドルをチェックしてください： http://jsfiddle.net/petersphilo/QCvA5/5/show/

これは次の場合に当てはまります。

page-break-before
page-break-after
page-break-inside

ただし、Safariでの改ページの制御は機能しません（少なくとも5.1.7では）

これが役立つことを願っています!!!

PS：以下の質問は、Chromeの最近のバージョンでは、位置が関係していても、これをもはや尊重しないという事実を持ち出しました。騙す。しかし、彼らは尊重しているようです：

-webkit-region-break-inside: avoid;

このフィドルを参照してください： http://jsfiddle.net/petersphilo/QCvA5/23/show

だから今それを追加する必要があると思います...

お役に立てれば！

33
Peter

ここで注意したいのは、Chromeは、フローティングされたdivのpage-break- * css設定も無視することです。

私はCSS仕様のどこかにこれの正当な正当性があると思うが、いつか誰かを助けるかもしれないことに気づいた;-)

ちょうど別の注意：IE7は、前のブロック要素の明示的な高さなしには改ページ設定を認識できません。

http://social.msdn.Microsoft.com/forums/en-US/iewebdevelopment/thread/fe523ec6-2f01-41df-a31d-9ba93f21787b/

16
fordareh

私はこれに似た問題を抱えていましたが、最終的に解決策を見つけました。 overflow-x：hidden;が<html>タグに適用されていたので、DOMで下に何をしても、改ページは許可されません。 overflow-x：visible;に戻すことでうまくいきました。

これが誰かの助けになることを願っています。

11
davidbehan

私はこの問題を自分で抱えています-改ページはChromeを除くすべてのブラウザーで機能し、テーブルセル内にあるpage-break-after要素に分離できました。 （CMSの古い継承テンプレート。）

どうやらChromeはテーブルセル内の改ページ前または改ページ後のプロパティを尊重しないため、この修正版のPhilの例では、2番目と3番目の見出しを同じページに配置します。

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <h1>This is Page 1</h1>
    </div>

    <table>
    <tr>
        <td>
            <div class="page">
              <h1>This is Page 2</h1>
            </div>
            <div class="page">
              <h1>This is, sadly, still Page 2</h1>
            </div>
        </td>
    </tr>
    </table>
  </body>
</html>

CSSの仕様により、Chromeの実装は（疑わしいことに）許可されています-詳細は http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=en

10
Nate Cook

CSSに注意：display:inline-block印刷するとき。

テーブルがdisplay:inline-blockスタイルのdiv内にある場合、次のページに移動するCCSプロパティはChromeおよびFirefoxでは機能しません。

たとえば、次は機能しません。

<div style='display:inline-block'>
  <table style='page-break-before:always'>
    ...
  </table>
  <table style='page-break-before:always'>
    ...
  </table>
</div>

しかし、次の作業：

<div>
  <table style='page-break-before:always'>
    ...
  </table>
  <table style='page-break-before:always'>
    ...
  </table>
</div>
7
Gudradain

以前、chromeでこの問題に直面しましたが、その原因は、divの値にmin-heightが設定されていたことです。解決策は、印刷中に次のように最小高さをリセットすることでした。

@media print {
    .wizard-content{
        min-height: 0;
    }
}
4
Hamdy Ahmed

2016年の更新：

まあ、私は持っていたとき、私はこの問題を手に入れました

overflow:hidden

私のdivで。

作った後

@media print {
   div {
      overflow:initial !important
   }
}

すべてが完璧になりました

3
Stanislav Talanov

ChromeをBootstrapとともに使用している場合、グリッドレイアウトを制御するクラス（例：col-xs-12など）は「float：left」を使用します。改ページ。これらをページから削除して印刷します。それは私のために働いた。 （Chromeバージョン= 49.0.2623.87で）

1
Astra Bear

次のようなパディングを使用したとき、それは私のために働いていました：

<div style="padding-top :200px;page-break-inside:avoid;">
   <div>My content</div>
</div>
0
Tuvia Khusid

私が知る限り、Google Chromeでテーブル内の正しい改ページを取得する唯一の方法は、要素<tr>にプロパティdisplay：inline-tableを与えることです。 （または表示：インラインブロックですが、テーブルではない他の場合により適しています）。また、プロパティ "page-break-after：always; page-break-inside：avoid;"も使用する必要があります。 @Phil Rossによって書かれた

<table>
  <tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;">
    <td></td>
    <td></td>
    ...
  </tr>
</table>
0
Codekraft

その問題があります。とても長い時間が経ちます...ページのサイドフィールドがなければ、それは正常に壊れますが、フィールドが表示されると、ページと「改ページスペース」が拡大縮小します。そのため、ドキュメント内の通常のフィールドでは、正しく表示されませんでした。セットで修正します

    width:100%

そして使用

div.page
  {
    page-break-before: always;
    page-break-inside: avoid;
  }

最初の行で使用します。

0
Intey