HTMLを使用して、ドキュメントの印刷された各ページにヘッダーとフッターを印刷するにはどうすればよいですか？
HTMLページを印刷する際、各印刷ページにカスタムヘッダーとカスタムフッターを付けることは可能ですか？
印刷するページの上下に、内容に関係なく、赤色、Arial、サイズ16ptで "UNCLASSIFIED" という文字を追加したいのですが、可能でしょうか？
つまり、5ページに印刷されたドキュメントは、各ページにカスタムヘッダーとカスタムフッターを持つ必要があります。
HTML/CSSで可能かどうか、どなたかご存知でしょうか？
491
16
フッターにしたい要素を取り出して、position:fixed、bottom:0と設定すると、ページを印刷するときに、その要素が印刷される各ページの一番下に繰り返し表示されるようになります。 ヘッダー要素も同様で、代わりにtop:0を設定するだけです。
例えば、以下のような感じです。
CSSを使用しています。
HTML5とCSS3は、
printメディアでページのヘッダーとフッターを印刷することをサポートしていない、というのが正しい答えだと思うのです。で、シミュレートできるかもしれませんが。
それぞれバグがあり、理想的な一般解にはなり得ません。
私は一日の半分を、実際に私のために働く解決策を考え出すのに費やし、自分がしたことを共有したいと思いました。 上記の解決策の問題は、すべての段落要素がページの下部にあるフッターと重複することでした。 これを回避するために、次のCSSを使用しました。
「p」と「コンテンツブロック」の「ページブレイクインサイド」は私にとって重要でした。
h *に続くpがあるときはいつでも、両方をdiv class = "content-block">でラップして、一緒にいて壊れないようにします。私が理解するのに約3時間かかったので、誰かがこれが役に立つと思うことを願っています(私はCSS / HTMLも初めてなので、それがあります。..)。
編集。
コメントのリクエストごとに、HTMLドキュメントの例を追加します。 これをHTMLファイルにコピーして開き、ページを印刷することを選択します。 印刷プレビューでは、これが機能していることを示す必要があります。 私の側ではFirefoxとIEで機能しましたが、Chromeはフォントを1ページに収まるほど小さくしたため、そこでは機能しませんでした。
。
。
私は何年も解決策を探していましたが、この投稿は[ページのコンテンツが重複することなく複数のページで機能するフッターを印刷する方法]で見つかりました。]1。
私の要件はIE8でしたが、これまでのところ、これはChromeでは機能しないことがわかりました。 [更新] 2018年3月1日現在、Chromeでも動作します。
この例では、cssスタイルを設定してテーブルとtfoot要素を使用します。
改ページを使用して、CSSのスタイルを定義します。
次に、適切な場所でドキュメントにマークアップを追加します。
参考資料。
CSSページメディア:ページブレイク。
MDN:page-break-before。
MDN:break-before。
マルチカラムレイアウト。
XHTML印刷:第2版。
[Webkit Bug 5097:CSS2 page-break-afterが機能しない](https://bugs.webkit.org/show_bug.cgi?id = 5097)。
HTML FAQを印刷:プログラムは、改ページなどのCSSスタイルを尊重します?。
https://stackoverflow.com/questions/1763639/1113772。
この質問から-次のスタイルを印刷専用スタイルシートに追加します。 このソリューションはIEとFirefoxで機能しますが、[Chromeでは機能しません](http://code.google.com/p/chromium/issues/detail?id = 24826)(バージョン21以降):
魔法の解決策は、すべてのものを単一のテーブルに置くことです。
thead:これは繰り返しヘッダー用です。
tfoot:繰り返されるフッター。
tbody:コンテンツ。
単一のtr、tdを作成し、すべてをdivに入れます。
CODE ::
---。
---。
extra:複数のページとの重複を防ぐため。 のような:
これにより、オーバーフローが発生し、ページ内のヘッダーと重複します。.
そう>>使用:
page-break-inside:避けてください。 !重要;このクラスの「記事」。---。
かなり簡単です。これがあなたが望む最高の結果をもたらすことを願っています。
よろしく。 ;)。
私はtfootとamp;を組み合わせたこの無駄な戦いを戦おうとしました。 cssルールですが、Firefoxでのみ機能しました:(。 プレーンcssを使用すると、コンテンツはフッターの上を流れます。 tfootを使用する場合、最後のページのフッターは下部に表示されません。 これは、テーブルフッターが物理的なページではなくテーブル用であるためです。 Chrome 16、Opera 11、Firefox 3&でテスト済み6およびIE6。
すべてのページにヘッダーを追加するためにのみ機能する1つのアプローチは、コンテンツを「< table>」でラップし、ヘッダーコンテンツを「< thead>」タグに配置し、コンテンツを「< tbody>」に配置することです。 `タグ、そう:
これはChromeで動作しますが、他のブラウザについては100%確実ではありません。
javasciptを使用できる場合は、JavaScriptを使用してクライアントハンドルにコンテンツを配置し、利用可能なスペースに基づいて要素を配置します。
jquery columnizerプラグインを使用して、固定サイズのブロックでコンテンツを動的にレイアウトし、レンダリングルーチンの一部としてヘッダーとフッターを配置できます。 http://welcome.totheinter.net/columnizer-jquery-plugin/。
例10を参照してください。 http://welcome.totheinter.net/autocolumn/sample10.html。
osで有効になっている場合、ブラウザは独自のヘッダーまたはフッターを追加します。 プラットフォームとブラウザー全体で一貫したレイアウトには、条件付きcssが必要になる可能性があります。
印刷専用にしたいものなのでしょうか？サイトの各ページに追加して、CSSでタグを印刷専用のメディアとして定義することができます。
例として、これはヘッダーの例となります。
そして、CSSでは、次のようなことをします。
最後に、すべてのページにヘッダー/フッターを含めるには、サーバーサイドインクルードを使用するか、PHPやASPで生成されるページがある場合は、共通のファイルにコード化することもできます。
**編集：***
この回答は、印刷されたドキュメントに何かを表示し、それ以外には表示しない方法を提供することを意図しています。しかし、コメントで指摘されているように、コンテンツがあふれたときに、複数の印刷ページにフッターを表示させるという問題は解決していません。
それでも参考になればと思い、ここに残します。
ChromeにこのようなひどいCSS印刷サポートがあることに驚いて、感銘を受けません。
私のタスクでは、各ページに少し異なるフッターを表示する必要がありました。 最も単純なケースでは、増分する章とページ番号のみです。 より複雑なケースでは、フッター内のテキスト(たとえば、いくつかの脚注)が増えると、サイズが拡大され、そのページのコンテンツ領域にあるものが縮小され、その一部が次のページにリフローする可能性があります。
CSSプリントはこれを解決できません。少なくとも今日の粗末なブラウザのサポートでは解決できません。 しかし、CSS3は印刷物の外に足を踏み入れると、多くの重労働を行うことができます。
https://jsfiddle.net/b9chris/moctxd2a/29/。
SCSS:
この例では、Cat Ipsumを含むコードがもう少しあります。しかし、使用されているjsは、ページネーションを壊すことなくヘッダー/フッターがどれだけ変化するかを示すためにそこにあります。 重要なのは、CSS Flexboxからカラムボトムスティッキングトリックを取り、それを既知の固定された高さのページに適用することです。この場合、米国の文字サイズの紙8.5 "x11"片で、 5 "マージンは「幅:7.5インチと「高さ:10インチ」を残します。 CSSフレックスコンテナーに正確な寸法(
div.page)が通知されると、ヘッダーとフッターを従来のタイポグラフィでのように展開して収縮させるのは簡単です。残っているのは、たとえばフッターが3ではなく8の脚注に成長したときに、ページのコンテンツを流れることです。 私の場合、コンテンツは十分に修正されているので、心配する必要はありませんが、それを行う方法があると確信しています。 頭に浮かぶ1つのアプローチは、ヘッダーとフッターを100%幅のフロートに変えてから、Javascriptで配置することです。 ブラウザは、通常のコンテンツフローの中断を自動的に処理します。
Asp.net Razor EngineやAngularなどのテンプレートエンジンを使用している場合。 ページを再生成してページを複数のページに分割し、各ページを自由にマークアップして、ヘッダーとフッターをテーマに配置する必要があると思います。 1つの例は、次のようになります。
。
。
解決策が1つ見つかりました。 基本的なアイデアは、テーブルを作成し、theadセクションにヘッダーのデータをtrとcssの力で配置して、画面に印刷されていないtrのみを表示し、通常のヘッダーは印刷されていない画面にのみ表示するように強制することです。 多くのページで100%作業して印刷します。 サンプルコードはこちらです。
これを試してみてください。私にとっては、Chrome、Firefox、Safariで作業しています。 ページの内容を重ねることなく、各ページにヘッダーとフッターが固定されます。
CSS 。
HTML 。
一部の投稿に基づいて、「位置:固定」はうまくいくと思います。
。
。
Ctrl + Pをクロームで押します。ヘッダーを参照してください。各ページのフッターテキスト。 それが役立つことを願っています。