web-dev-qa-db-ja.com

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

私の調査では、やりたいことはできないようですが、何かが変わった場合に、どうすればいいのか考えてみたかったです。

ブラウザウィンドウでのユーザーの選択に基づいて印刷用のレポートを生成するWebアプリがあります。カスタムヘッダーとフッターがあり、レポートをブラウザーから印刷するときに、印刷されるすべてのページで繰り返す必要があります。それは私が必要とするブラウザーのヘッダーとフッターではなく、私が生成するカスタムのものです。また、これはCSSおよびメディアタイプの問題ではないと思いますが、私はCSSの専門家ではありません。ヘッダーとフッターを一度に印刷しても問題はありませんが、各ページに印刷することはできません。テーブルを使用してレポートページを再作成し、テーブルヘッドタグとCSSを使用した場合、少なくとも各ページのヘッダーを取得するために機能する可能性があることを読んだことがあります。私はまだこれで成功していませんが、それが唯一の選択肢である場合は、もう一度試してみます。同僚から、phpの行数を数え、必要に応じてヘッダーとフッターを手動で配置するよう提案されました。それはオプションだと思いますが、これを行う方法はそれほど「ブルートフォース」ではないはずです。

その他の注意点は、IE 6をサポートする必要があることです。そのため、試したCSSの一部はサポートされていないのではないかと思います。

誰かがこれを行う方法を知っているなら、それは素晴らしいことです！そうでなければ、私は自分のアプローチを考え直さなければならないでしょう。

前もって感謝します！

更新（2011年12月14日）

私はこの問題でかなりの進歩を遂げ、回答からの情報のいくつかを使用して、使用可能なレポートを作成しましたが、私が望むほど素晴らしいまたは専門的ではありませんでした。フッターはページの下部に十分に近づかない傾向があり、私は多くの推測作業と改ページの挿入を決定するために大きなテキストがどのようになるかについての「もろい」計算をしなければなりませんでした。一連のページ形式、およびレポートへの変更により、一連のコード変更が発生し、さらに計算が不安定になりました。レポートの一部が壊れるシナリオが常にありました。要件を改訂しました現在、TCPDFを使用してレポートをPDFとして生成しています。ドキュメントはやや不透明で、いくつかの実験が必要ですが、結果ははるかに優れており、レポートは本来の状態で表示されます。ブラウザからHTMLレポートを作成しようとする人なら誰でも言うでしょう。非常に単純な場合を除き、（他の人がここで教えてくれたように）欲求不満を解消してPDFやそれに似たものを使います。

htmlcssheaderprintingfooter
39
Carvell Fenton

それはテーブルで行うことができます-そして私はレイアウトにテーブルを使用することを提案することで反対投票のリスクを負うつもりです-しかし、私たちはここでIE6について話していますが、それはその素晴らしいCSSサポートで知られていません:-)

次のようにCSSスタイルを設定した場合：

thead { display: table-header-group; }
tfoot { display: table-footer-group; }

次に、HTMLを作成するときに、本文を次のようにレンダリングします。

<body>
<table>
   <thead><tr><td>Your header goes here</td></tr></thead>
   <tfoot><tr><td>Your footer goes here</td></tr></tfoot>
   <tbody>
     <tr><td>
     Page body in here -- as long as it needs to be
     </td></tr>
   </tbody>
</table>
</body>

はい、それは良くありません（テーブルvs CSS）、それは理想的ではありませんが、（重要なことに）IE6で動作します。まだテストしていないので、Firefoxについてコメントすることはできませんが、Firefoxでうまくいくはずです。これは、異なるサイズのページ、異なるフォントサイズなども処理するため、「正しく動作する」はずです。

ヘッダーとフッターを印刷されたメディアにのみ表示する場合は、@ mediaパラメーターを使用して正しいことを行います。

@media print {
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
}
@media screen {
    thead { display: none; }
    tfoot { display: none; }
}

注
2015年7月現在、これはFirefoxとIEでのみ機能します。 Webkitベースのブラウザ（Chrome、Safariを参照）は、投票するのに十分強いと感じる人がいる場合、問題トラッカーに長い間バグが残っています。

この質問の下のコメントは、これがChromeで解決されたことを示しています。私は自分でチェックしていません:-)

Chrome（参考））に対する元のバグは次のとおりです。

34
Chris J

これは、すべてではなく一部のブラウザで機能します。エレガントなクロスブラウザソリューションはないと思います

必要な印刷フッター/ヘッダーをページのdivに含めます（この例ではdiv id = 'printableFooter'）

画面のcssファイルに次のように入力します。

#printableFooter {display: none;}

印刷CSSファイルで：

#printableFooter {display: block; position: fixed; bottom: 0;}
6
UpTheCreek

ページをテーブルに分割し、最初の行にヘッダー部分を追加し、最後の行にフッター部分を追加することをお勧めします。最初の行と最後の行の間の行の内容は動的に変更できるため、目的のページで一定のヘッダーとフッターを取得できます。

----------
ROW1    HEADER
----------
ROW2   
 Insert dynamic contents here
ROW N-1
----------
ROW N Footer
5
Sachin Chourasiya

印刷用の（rtf | pdf）ドキュメントを生成しようとする

3
Horacio N. Hdez.