2014-05-13 3 views
1

페이지를 인쇄 할 때와 동일한 방법으로 PDF로 내보낼 HTML 페이지를 만듭니다. 모든 페이지에서 동일한 머리말과 꼬리말을 사용하고 싶습니다.하지만 시도 할 때마다 ... 작동하지 않습니다.PDF의 모든 페이지에서 머리글과 바닥 글 div

Chrome 34.0.xxx와 Safari 7.0.3에서 모두 시도한 모든 항목을 테스트 중입니다 ... 동일한 결과가 나타납니다.

나는 을 bottom: 0top: 0으로 시도했습니다. 나는 테이블 사용하여 시도했다 : 나는 높이를 알 수 없기 때문에,

.header { 
    display: table-header-group; 
} 

.body { 
    display: table-row-group; 
} 

.footer { 
    display: table-footer-group; 
} 

나는 시도하지 않은 유일한 것은 CSS에서 페이지 나누기 옵션입니다 : 내가 사용 시도

<table> 

    <thead> 
    <!-- Will print at the top of every page --> 
    </thead> 

    <tbody> 
    <!-- Page content --> 
    </tbody> 

    <tfoot> 
    <!-- Will print at the bottom of every page --> 
    </tfoot> 

</table> 

을 html 페이지 내용의

이 내 HTML 페이지 (지금은)입니다 :

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>Report</title> 
     <style type="text/css"> 

      body, html { 
       font-family: "Helvetica","Arial"; 
       font-size: 12px; 
       padding: 0; 
       margin: 0; 
       width: 100%; 
       height: 100%; 
      } 
      .body { 
       width: 100%; 
       background-color: blue; 
       margin: 50px 0 50px 0; 
      } 
      .header, .footer { 
       width: 100%; 
       height: 50px; 
       position: fixed; 
      } 
      .header { 
       top: 0; 
       background-color: red; 
      } 
      .footer { 
       bottom: 0; 
       background-color: green; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="header"> 
      This is a header 
     </div> 
     <div class="body"> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
      Body<br/> 
     </div> 
     <div class="footer"> 
      This is the footer 
     </div> 
    </body> 
</html> 

그 결과 나는이 첫 페이지에 "이 바닥 글은" "이 헤더는"수 있지만 다음하지 않는 것이있다 페이지 :

Example

어떻게 각 페이지의 바닥 글 및 헤더를받을 수 있나요?

+0

를 PDF로 HTML을 수출하는 데 사용하는 무엇? –

+0

본문 내용 섹션의 iframe을 사용하고 javascript를 사용하여이 iframe에서 링크를로드하십시오. –

+0

당신이하려는 일이 이것입니까? http://sassmeister.com/gist/9ff1e082c961a3e44fb5 – Waymond

답변

관련 문제