web-dev-qa-db-ja.com

最後のページの一番下に表のフッターを印刷する

テーブルを使用して、すべてのページにフッターを作成しています（Firefoxで動作します、それで十分です）。

JSフィドル： https://jsfiddle.net/j9k2xzze/

（出力ペインを右クリック->このフレーム->新しいタブでフレームを開く。印刷プレビューは通常どおり機能します）

<table id="wrapper">
    <thead>
    <tr>
        <td id="header"></td>
    </tr>
    </thead>

    <tfoot>
    <tr>
        <td colspan="0" id="footer">
            <img src="footer.jpg"/>
        </td>
    </tr>
    </tfoot>

    <tbody>
    <tr>
        <td id="content">
            <?php echo $html; ?>
        </td>
    </tr>
    </tbody>
</table>

ただし、最後のページでは、テーブルフッターがテキストのすぐ下に表示されます。テキストが最後のページより短い場合、フッターはそのページに貼り付けられます。

最後のページの一番下にフッターがあるのが好きです。残念ながら、Firefoxでは@page拡張が機能しないか、間違っています。

@page:last {
  #footer {
    position: absolute;
    bottom: 0;
  }
}
htmlcssfirefoxhtml-tableprint-css
22
LeMike

Firefoxのみをサポートしている場合、これは実際に簡単です。（編集にスキップしてIEでも機能するテクニックを確認Chromeおよび他のWebkitブラウザは、この回答を投稿したときにフッターの繰り返しをサポートしていなかったため、テストしませんでした。

あなたがしなければならないのは、コンテンツの最後に大きな下マージンを追加することです。正確なサイズは重要ではありませんが、ページの終わりを超えて実行されることが保証されるのに十分な大きさでなければなりません。少なくとも、ユーザーが使用すると思われる最大用紙サイズと同じ大きさにすることをお勧めします。

心配しないでください。これにより、ドキュメントの末尾に空白ページが追加されることはありません。余白は、他の形式の空白（パディングや<br>タグなど）とは異なり、ページの境界を超えるとキャンセルされます（ specを参照 、セクション13.3.3）。 FirefoxとIEはどちらもマージンを削除しますが、Firefoxはページの下部に改ページが発生したかのようにフッターを生成します。 （IEは、一方で、マージンがそこに決してなかったかのように振る舞うので、このアプローチはそのブラウザでは機能しません。）

pseudo-element にマージンを入れてHTMLを整理し、 @media print を使用して画面に表示されないようにすることができます。

コードは次のとおりです。 Firefoxで動作を確認するには、 this jsfiddle を開き、出力を右クリックして、[このフレーム]> [このフレームのみ表示]を選択し、印刷プレビューを実行します。

@media print {
  #content:after {
    display: block;
    content: "";
    margin-bottom: 594mm; /* must be larger than largest paper size you support */
  }
}
<table>
  <thead>
    <tr>
      <th>PAGE HEADER</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>PAGE FOOTER</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td id="content">
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content
      </td>
    </tr>
  </tbody>
</table>

[〜＃〜] edit [〜＃〜]

FirefoxとIEの両方で機能する別のオプションがあります。必要なのは、フッターを別の<div>に入れてページの下部に固定してから、繰り返しの<tfoot>をスペーサーとして使用することだけです。ただし、このアプローチにはいくつかの小さな欠点があります（詳細は以下の抜粋）。

コードは次のとおりです。 Firefoxで動作を確認するには、 this jsfiddle を開き、出力を右クリックして、[このフレーム]> [このフレームのみ表示]を選択し、印刷プレビューを実行します。 IEで、出力フレームをクリックし、CTRL + Aを押して印刷プレビューを行い、「画面上にレイアウト」を「画面上で選択」として変更します。

@media print {
  #spacer {height: 2em;} /* height of footer + a little extra */
  #footer {
    position: fixed;
    bottom: 0;
  }
}
<table>
  <thead>
    <tr>
      <th>PAGE HEADER</th>
    </tr>
  <thead>
  <tfoot>
    <tr>
      <td id="spacer"></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content
      </td>
    </tr>
  </tbody>
</table>

<div id="footer">
  PAGE FOOTER
</div>

この方法の主な制限は、印刷ジョブのすべてのページに同じフッターを配置することです。つまり、異なるフッターを持つページ、またはフッターがないページを作成することはできません。また、スペーサーの高さはフッターの高さに依存するため、フッターの高さが変わった場合は調整する必要があります。

11
DoctorDestructo

絶対位置または固定位置を使用する場合、最後のページにのみフッターを表示する方法はありません。ページの長さが足りない場合にのみフッターを下部に配置する場合は、絶対/固定位置を必要としないスティッキーフッターテクニックを使用します。このようなもの

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;
  margin-bottom: -50px;
}
.footer,
.Push {
  height: 50px;
}

各ページの下部にフッターが本当に必要な場合は、最初にpdfを生成して印刷することをお勧めします。複雑なものを印刷する必要がある場合、いずれにせよPDFを最初に生成することになりますが、印刷CSSは非常に限られています。

0
Matej Janovčík