PDF에서 머리글, 바닥글 및 페이지 나누기 관리하기
페이지 나누기는 혼란을 야기할 수 있습니다.
page-break-after CSS 규칙은 올바르게 적용되면 항상 작동합니다. 그러나 이 규칙은 스타일 시트가 display:block에서 div을 변경하면 작동하지 않습니다. page-break-after 규칙이 블록 수준 요소, 바디 태그의 직접 자식인 것이 이상적인 div에 적용되는지 확인하세요.
아래 HTML 예시는 다음을 보여줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print Page Breaks with Header and Footer</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
position: fixed;
width: 100%;
text-align: center;
background-color: #f1f1f1;
padding: 10px 0;
}
header {
top: 0;
}
footer {
bottom: 0;
}
.content {
margin: 150px 20px; /* Adjust margins to prevent content overlap with header and footer */
}
.page-break {
page-break-after: always;
display: block; /* Ensure it remains a block-level element */
}
</style>
</head>
<body>
<header>
<h1>Document Title</h1>
<p>Header Content</p>
</header>
<footer>
<p>Footer Content</p>
</footer>
<div class="content">
<div class="page-break">
<h2>Section 1</h2>
<p>This is the first section. After this section, there will be a page break.</p>
</div>
<div class="page-break">
<h2>Section 2</h2>
<p>This is the second section. The header and footer continue to be displayed, and the content starts on a new page.</p>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print Page Breaks with Header and Footer</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
position: fixed;
width: 100%;
text-align: center;
background-color: #f1f1f1;
padding: 10px 0;
}
header {
top: 0;
}
footer {
bottom: 0;
}
.content {
margin: 150px 20px; /* Adjust margins to prevent content overlap with header and footer */
}
.page-break {
page-break-after: always;
display: block; /* Ensure it remains a block-level element */
}
</style>
</head>
<body>
<header>
<h1>Document Title</h1>
<p>Header Content</p>
</header>
<footer>
<p>Footer Content</p>
</footer>
<div class="content">
<div class="page-break">
<h2>Section 1</h2>
<p>This is the first section. After this section, there will be a page break.</p>
</div>
<div class="page-break">
<h2>Section 2</h2>
<p>This is the second section. The header and footer continue to be displayed, and the content starts on a new page.</p>
</div>
</div>
</body>
</html>PDF 페이지마다 표 머리글과 바닥글이 반복되도록 하려면 다음 문서를 참조하세요. HTML PDF에서 페이지 나누기 추가 또는 제거
위의 단계를 수행해도 문제가 해결되지 않으면 다음 단계를 시도해 보세요.
1. 문제를 단순화하세요
콘텐츠 길이가 다양하다면, 다양한 길이의 콘텐츠를 테스트하여 올바른 HTML/CSS를 사용하고 있는지 확인하십시오. 이 도구는 도움을 주는 데 사용할 수 있습니다.
2. HTML과 CSS의 유효성을 검사하세요
CSS 유효성 검사기는 사용된 CSS 스타일을 확인하는 데 사용할 수 있습니다.
HTML 유효성 검사기는 HTML 입력의 유효성을 검사하는 데 도움을 줄 수 있습니다.
또한 웹 디자이너에게 HTML을 검토해 달라고 요청하고 변경 사항을 추적할 수 있습니다.
반면에, 공지 섹션의 위치는 테이블 구조, tfoot 및 기타 많은 요소들에 의해 영향을 받습니다. 그러므로 HTML 문자열과 구조를 다시 한번 확인하는 것이 분명 도움이 될 것입니다.
3. Chrome의 인쇄 미리보기에서 출력물을 확인하세요.
IronPDF IronPDF PDF 렌더링 엔진을 사용하기 때문에 데스크톱 Chrome 웹 브라우저와 동일한 PDF를 출력합니다.
따라서 Chrome의 인쇄 미리보기를 통해 HTML이 어떻게 보이는지 확인하고 필요에 따라 HTML을 수정할 수 있습니다. 시행착오를 거쳐야 할 수도 있지만, 이것이 HTML을 디버깅하는 가장 쉬운 방법입니다.
Chrome 인쇄 미리보기를 통해 HTML을 디버깅하는 방법에 대해 자세히 알아보세요: 픽셀 단위로 완벽한 HTML 서식 지정
Chrome PDF 렌더링 엔진에 대한 자세한 내용은 다음 문서를 참조하세요. IronPDF의 Chrome 렌더러란 무엇인가요?
4. Chrome 개발자 도구를 사용하세요
또는 Chrome 개발자 도구의 '검사' 기능을 사용하여 요소에서 계산된 최종 CSS를 찾을 수도 있습니다. 이렇게 하면 문자열에 포함된 각 HTML 요소에 대한 자세한 정보를 얻을 수 있습니다.
5. IronPDF 사용하여 HTML을 렌더링합니다.
최종 HTML 문자열 또는 HTML 파일을 IronPDF Chrome Renderer에 보내고, RenderHtmlAsPdf() 또는 RenderHtmlFileAsPdf() 메서드를 사용하여 PDF 문서를 만드세요.
출력 PDF와 렌더링 작업을 세밀하게 조정하려면 렌더러에 몇 가지 렌더링 옵션을 지정해야 할 수 있습니다. 더 자세한 내용을 알아보려면 이 기사를 참조하세요.
아직도 스크롤하고 계신가요?
빠른 증거를 원하시나요? PM > Install-Package IronPdf
샘플을 실행하세요 HTML이 PDF로 변환되는 것을 지켜보세요.
무료로 시작하세요
무료로 시작하세요
무료 라이브 데모 예약하기
신용카드나 계정 생성은 필요하지 않습니다.
