페이지를 인쇄 할 때와 동일한 방법으로 PDF로 내보낼 HTML 페이지를 만듭니다. 모든 페이지에서 동일한 머리말과 꼬리말을 사용하고 싶습니다.하지만 시도 할 때마다 ... 작동하지 않습니다.PDF의 모든 페이지에서 머리글과 바닥 글 div
Chrome 34.0.xxx와 Safari 7.0.3에서 모두 시도한 모든 항목을 테스트 중입니다 ... 동일한 결과가 나타납니다.
나는 을 bottom: 0
및 top: 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>
그 결과 나는이 첫 페이지에 "이 바닥 글은" "이 헤더는"수 있지만 다음하지 않는 것이있다 페이지 :
어떻게 각 페이지의 바닥 글 및 헤더를받을 수 있나요?
를 PDF로 HTML을 수출하는 데 사용하는 무엇? –
본문 내용 섹션의 iframe을 사용하고 javascript를 사용하여이 iframe에서 링크를로드하십시오. –
당신이하려는 일이 이것입니까? http://sassmeister.com/gist/9ff1e082c961a3e44fb5 – Waymond