인쇄용 CSS를 사용하여 페이지 머리글 및 바닥 글 만들기

Flying Saucer (CSS/HTML을 iText로 PDF로 출력 함)를 사용하여 PDF를 만들고 있는데 CSS3를 사용하여 이미지 머리글과 바닥 글을 각 페이지. 나를 넣어 할 수있는 방법이 있나요인쇄용 CSS를 사용하여 페이지 머리글 및 바닥 글 만들기

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

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

을 :

이

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

내 CSS는 다음과 같이 다소 같습니다

나는 기본적으로 각 페이지의 왼쪽 상단에이 사업부를 넣고 싶습니다 이 div는 content에 있습니까? 각 페이지의 상단에 요소를 넣는

출처

2012-03-15 Naftuli Kay

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

(비행 접시에 작품) http://www.w3.org/TR/css3-gcpm/#running-elements를 참조

출처

2012-03-16 18:02:06 Adam

와우를 정의 할 필요가 내가 그것을 덜 완벽한 방법을 수행하는'배경-image' 싸움 봤는데, 내가 빨리이 알려진 것이다 바랍니다. 정말 고마워! –

저는 이것을 채택하려고 노력하고 있습니다. 그러나 Chrome에서 헤더가 첫 페이지에만 인쇄되고 바닥 글은 마지막 페이지에만 인쇄됩니다. 파이어 폭스에서 이것은 완전히 깨졌습니다. –

Firefox 또는 Chrome에서 작동합니까? 나는 그것을 모두 시도했지만, 그것은 나를 위해 작동하지 않습니다 :/ – Jaro

페이지에 머리글과 바닥 글을 모두 포함하려면 (@에서 우수한 답변을 정교화 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>

참고 : 모든 페이지에서 바닥 글을 반복하려면 , 그것을 (여러 페이지의 콘텐츠에 대한) 전에 다른 본문 내용

출처

2017-11-29 22:08:39 zeffren

인쇄용 CSS를 사용하여 페이지 머리글 및 바닥 글 만들기

답변

관련 문제