19

特にChromeからページヘッダー/フッターを繰り返す記事または実際の例へのリンクを持っている人はいますか?

背景:
私はこれに何日も費やしましたが、うまくいきませんでした.いくつかのスタック提案されたソリューションがありますが、どれも(Chromeでは)うまくいかないようです. 仕事で Chrome を使用しているので、そこでしかテストしていないので、以下の多くは Chrome ではできないと言っていますが、何か見落としているのでしょうか?

これらのスタックリンクを試しました（..およびその他多数）：

すべてのブラウザー (Chrome) で、Web サイトから印刷されるすべてのページにフッターを印刷します。

Web ページのヘッダー/フッターをすべてのページに印刷する方法はありますか?

ドキュメントのすべての印刷ページに HTML を使用してヘッダーとフッターを印刷する方法は?

印刷用の CSS を使用したページ ヘッダーとフッターの作成

できない場合は、繰り返しヘッダー/フッターを使用します...次に、クローンオブジェクトの行を数え、最大数で分割し、新しいページを作成し(高さを強制)、ループを再び開始します別のdivの別のページ。

私のアプリの全体的なポイントは完成した印刷された提案だったので、ヘッダー/フッター ソリューションの実行に関する提案を本当に感謝しています。

4

5 に答える 5

25

わかりました、これを受け入れる人はいないので、あと数日周りを見回して、自分の解決策を書かないことを選択した結果、ここに私が見つけたものがあります.

投票もコメントもないStack 投稿の一番下に、この孤独な小さなリンクがありました: http://welcome.totheinter.net/columnizer-jquery-plugin/#comment-53243

これは素晴らしいです。幅の広いページのコンテンツを処理し、それらを新聞のようなコラムにフォーマットするように設計されています。改ページを特にうまく処理し、非常に柔軟です。

私の場合、1 つの列 (ページの幅) と繰り返しのヘッダーとフッターが必要でした。例 10 をベースとして使用しました: http://welcome.totheinter.net/autocolumn/sample10.html

プラグインへのリンクを追加し、必要な ID とクラスを自分のページに合わせて変更し、高さと幅に CSS の小さな変更を加えただけで、Google Chrome でヘッダーとフッターを繰り返す複数ページのコンテンツを印刷することができました! (私の会社の推奨ブラウザ)

チップ：

  • CSS の小さなトリックの 1 つとして、コンテンツ div の MIN-HEIGHT セットを作成して、短いページのフッターを押し下げるようにしました。(ユーザーに縦または横のオプションを持たせたい場合は、これを行わないでください)。私の最終的なプリントは修正されたので、これは私にとって素晴らしいことでした.

  • コンテンツのさまざまな高さをテストして、コンテンツがどのように壊れるかを確認しましたが、毎回スムーズでした.

最後の例を JsBin と Fiddle に投稿しようとしましたが、毎回エラーが発生しました。

繰り返しになりますが、上記の例 10 は、前と後を示しているため、開始するのに最適な場所です。

可変高さのコンテンツと繰り返しのヘッダーとフッターを使用した最終版を次に示します (これは、ブラウザの Print Link/Button in Chrome をクリックしたときのビューです)。 ここに画像の説明を入力

2014 年 7 月更新: 繰り返しますが、Chrome は印刷の問題で私の存在の悩みの種です。私が提供したリンクについて、以下のコメントを見ました。彼の言うとおり、レンダリングは正しく行われますが、印刷ビューは正しくありません。申し訳ありませんが、設定を学ぶために遊んでみるには良い例です。

私はまだこのソリューションを使用しています.ITは機能しますが、本文のコンテンツサイズのCSSとJS変数を調整する必要があります. サイズの組み合わせは非常にデリケートですが、ページの高さ/幅とコンテンツのサイズを適切に設定すると、機能します。用紙サイズのリーガル/レター用に別の関数を作成する必要がありました。制限はありますが、私たちの目的には合っています。

また、ウィンドウのサイズによっては正しく表示されないことにも気付きましたが、最終的な PRINTED 製品はヘッダーとフッターの繰り返しで期待どおりだったので、ユーザーが出力に気付かないように、直接印刷するウィンドウを使用しました。 、むしろクロム印刷のレンダリングを見ました。この種の回避策は嫌いですが、私のオフィスの全員が Chrome を使用しているため、これは必要悪です。

于 2013-10-31T01:09:05.007 に答える
2

この質問に対する答えは、ドキュメントの構造によって異なります。一連の短くて壊れないセクションとして構成できれば、幸運です。このタイプのドキュメントで実行中のページ ヘッダーをシミュレートする Chrome 互換の方法があります (実際、一般的なすべてのデスクトップ ブラウザーで動作します)。

基本的な考え方は、分割できない各セクションの上部にヘッダーのコピーを配置し、負のマージンを使用してコピーを非表示にし、改ページによってセクションが次のページにぶつかった場合にのみ表示されるようにすることです。ただし、これは少し単純化しすぎているため、独自のドキュメントでこれを試す前に、以下のコードを検討することをお勧めします。

テスト ドキュメント:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .section {
        display: table;
        width: 100%;
      }
      .section > div {
        display: table-cell;
        overflow: hidden;
      }
      .section ~ .section > div:before {
        content: "";
        display: block;
        margin-bottom: -2.5em; /* inverse of header height */
      }
      .section > div > div {
        page-break-inside: avoid;
        display: inline-block;
        width: 100%;
        vertical-align: top;
      }
      .header {
        height: 2.5em; /* header must have a fixed height */
      }
      .content { /* this rule set just adds space between sections and is not required */
        margin-bottom: 1.25em;
      }
    </style>
  </head>
  <body>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

ページの約 1/3 を超えるテキスト ブロックを含むドキュメントでは、この手法を使用したくないでしょうが、フォームや表など、小さく個別のセクションで構成されるドキュメントには適しています。

この他の投稿に対する私の回答も興味深いかもしれません。同じ基本原則を使用して Chrome 互換の繰り返しテーブル ヘッダーを作成する方法を示しますが、余分なマークアップはすべて JavaScript を介して追加されるため、元の HTML ドキュメントが「汚染」されることはありません。

于 2014-09-17T00:03:07.250 に答える
0

残念ながら、これは Webkit の既知のバグ (Chrome および Safari)です。こちらを参照してください。何度も回避策を見つけようとしましたが、うまくいきませんでした。

受け入れられた回答にリンクされている例は、ブラウザから印刷すると機能しないようです。

于 2014-01-14T01:48:40.340 に答える