2011-02-03 9 views
12

私はMediboardプロジェクトに完全なHTMLヘッダー/フッターの印刷機能を提供することを頑張っています。HTMLヘッダー/フッターの印刷機能

私はCSS3ページメディアモジュールが私のニーズを満たすだろうと知っていますが、少なくとも2〜3年はかかるでしょう。

私はCSS2の機能で動作させようとしましたが、これはprintable documentのようにほとんど動作します。しかし、フッタの下にコンテンツが印刷されるフッターにはまだ制限があります(3-4ページの印刷プレビューを参照)。

私はそれは、Firefox 2

に動作させるために使用さdiv.bodyのパディング下かなり確信しているもののとにかく、誰かがその問題に私を助けるためにトリッキーな手掛かりを持っていますか?

EDIT: 詳細を与えるために、我々は、現在、それがヘッダまたはフッタである場合に応じtop:0又はbottom:0と、position: fixed位置決め要素を使用して、ヘッダとフッタを有します。これはうまく動作し、印刷するときに、これらの要素は各ページの正しい位置に繰り返されます(「印刷可能なドキュメント」の例を参照)。唯一の問題は、改ページが発生した場合、テキストはこれらの要素(ページ3/4を参照)の後ろに描かれている

EDIT2:更新されたドキュメントのURL

あなたが最も可能性の高いメディアタイプを実装することになるでしょう
+0

Fabien、私はちょうどGoogle Chrome 8.0.552.237をチェックし、印刷プレビューは最後のページの下にフッターを表示しています。 – DigiKev

+0

あなたのソリューションFabienを記述してください、それは大いに感謝しますか?文書へのリンクが死んでいます:/ – einarmagnus

+0

URLを更新しました。これに対する解決策は見当たりませんでした.HTMLからPDFへの変換(実際には、サーバー構成によってはdompdfまたはwkhtmltopdf)に基づいたPDF生成プログラムを使用しています。 –

答えて

-3

。詳細についてはhttp://www.w3.org/TR/CSS2/media.htmlをご覧ください。印刷用の浮動フッタと画面用の浮動フッタがないCSSシートを1枚作成できます。一例で

<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">

必要がない場合は、印刷したページでフッターを非表示にすることも検討できます。

+0

私はすでにページングされたメディアCSSを使用して、必要なものを手に入れています –

1

私の経験から、ページ区切りは要素内では機能しません。 [p] [/ p]のような要素が2つの印刷されたページにまたがっている場合、HTMLコードはページ間でどこでブレークするかを認識しません。これは、ユーザーが独自のプリンタマージンを1または1.75インチまたは他の値に設定できるためです。 CSSを使用して実際のプリンタの余白を設定することはできません。 CSSは、マージンとパディングをHTMLページ、つまり "プリンタの"定義済みマージンにのみ設定できます。マージンなどのプリンタ設定に関する情報はブラウザに送信されません。これは、ブラウザがページフィードがいつ起こったか分からないので、ヘッダーの下にコンテンツが引かれている理由を説明します。一番簡単な解決策は、最初のページにヘッダー情報を入れることですが、それはあなたが望むものではありません。ブルートフォースアプローチは、ページ区切りを挿入することです[br style = "page-break-before:always;" /]であるが、これは多数の文書では実用的ではない。また、同じメーカーのものを含め、プリンタ間の微妙な違いは微妙に異なります.1つの印刷で1ページに収まらないコンテンツが印刷されることがありますが、両方のプリンタが同じマージンを持っていても、設定。しかし、表の情報([table] [/ table])では、このようなCSSを割り当てることでテーブルをまとめやすくなります。私は、ページ上の文字数をカウントして、ブルートフォースアプローチに近づけるために、JQueryを使用するとJavaScriptを使ってページ区切りを動的に挿入できると推測しています。

3

テーブルに関連するいい答えはhereです。それはまさにあなたが望むもので、おそらくIE6でも動作します。

3

CSS2はあなたのページサイズとマージンを定義することが可能な@pageルールを持っているように見えます:

@page { size:8.5in 11in; margin: 6em 1em 2em } 

- または -

@page { size:auto; margin: 6em 1em 2em } 

残念ながら、私は時間がありませんそれをテストするが、それが動作するかどうかを知りたい。私はそれを使うことができた。

私はあなたがヘッダー/フッターで計画しているものが好きです。良い仕事:)