web-dev-qa-db-ja.com

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

フライングソーサー（CSS/HTMLをiTextからPDFにダンプ）を使用してPDF）を作成しています。CSS3を使用して各ページに画像ヘッダーとフッターを適用しようとしています。

基本的に、このdivを各ページの左上に配置します。

<div id="pageHeader">
    <img src="..." width="250" height="25"/>
</div>

私のCSSは次のようになります。

@page {
    size: 8.5in 11in;
    margin: 0.5in;

    @top-left {
        content: "Hello";
    }
}

このdivをcontentに入れる方法はありますか？

pdfpdf-generationflying-saucercss-paged-media
44
Naftuli Kay

各ページの上部に要素を置く：

@page {
  @top-center {
    content: element(pageHeader);
  }
}
#pageHeader{
  position: running(pageHeader);
}

http://www.w3.org/TR/css3-gcpm/#running-elements （Flying Saucerで動作）を参照してください

40
Adam

ページにbothヘッダーとフッターを含めるには（@Adamからの優れた回答を詳しく説明します）：

<style>
@page {

    margin: 100px 25px;
    size: letter portrait;

    @top-left {
        content: element(pageHeader);
    }

    @bottom-left {
        content: element(pageFooter);
    }
}

#pageHeader{
    position: running(pageHeader);
}

#pageFooter{
    position: running(pageFooter);
}

</style>
<body>
    <header id="pageHeader">something from above</header>
    <footer id="pageFooter">lurking below</footer>

    <div>meaningful rambling...</div>
</body>

注：フッターをすべてのページで繰り返すには、フッターを定義する必要がある場合があります[〜＃〜] before [〜＃〜]他の本文コンテンツ（for複数ページのコンテンツ）

8
zeffren